@media (hover: hover) and (pointer: fine) {
  .role-card {
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  }

  .role-card .role-circle,
  .role-card .counselor-art,
  .role-card .house-art,
  .role-card .fire-art {
    transition: transform 280ms ease;
  }

  .role-card .role-cta {
    transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  }

  .role-card:hover,
  .role-card:focus-within {
    transform: translateY(-7px);
    box-shadow: 0 24px 46px rgb(51 76 87 / 25%);
    filter: saturate(1.04);
  }

  .role-card:hover .role-circle,
  .role-card:focus-within .role-circle {
    transform: scale(1.045);
  }

  .role-card:hover .counselor-art,
  .role-card:focus-within .counselor-art {
    transform: translateY(-5px) scale(1.035);
  }

  .role-card:hover .house-art,
  .role-card:focus-within .house-art {
    transform: translateY(-5px) rotate(3deg) scale(1.035);
  }

  .role-card:hover .fire-art,
  .role-card:focus-within .fire-art {
    transform: translateY(-4px) scale(1.05);
  }

  .role-card:hover .role-cta,
  .role-card:focus-within .role-cta {
    background: #e67f00;
    box-shadow: 0 8px 18px rgb(199 111 0 / 25%);
    transform: translateY(-2px);
  }
}

.role-card {
  display: block;
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.login-button {
  text-decoration: none;
}

.role-card:focus-visible {
  outline: 3px solid #4b5662;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .role-card,
  .role-card .role-circle,
  .role-card .counselor-art,
  .role-card .house-art,
  .role-card .fire-art,
  .role-card .role-cta {
    transition: none !important;
  }
}