/* Hover motion without transforming text.
   Scale, rotate, and translate rasterise type and leave it looking soft.
   These rules nudge position, colour, and shadow instead. */

@media (hover: hover) and (pointer: fine) {
  .gsap-tilt,
  .inner-3d {
    will-change: auto !important;
    transform-style: flat !important;
  }

  .inner-3d {
    transform: none !important;
  }

  button[class*="rounded-"]:not([role="switch"]):not([class*="absolute"]):not([class*="fixed"]),
  a[class*="rounded-"][class*="bg-"]:not([class*="absolute"]):not([class*="fixed"]),
  a[class*="rounded-"][class*="border"]:not([class*="absolute"]):not([class*="fixed"]),
  .btn {
    position: relative;
    top: 0;
    transition: top 220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 200ms ease,
      border-color 200ms ease,
      color 200ms ease;
  }

  button[class*="rounded-"]:not([role="switch"]):not([class*="absolute"]):not([class*="fixed"]):hover,
  a[class*="rounded-"][class*="bg-"]:not([class*="absolute"]):not([class*="fixed"]):hover,
  a[class*="rounded-"][class*="border"]:not([class*="absolute"]):not([class*="fixed"]):hover,
  .btn:hover {
    top: -3px;
  }

  button[class*="rounded-"]:not([role="switch"]):not([class*="absolute"]):not([class*="fixed"]):active,
  a[class*="rounded-"][class*="bg-"]:not([class*="absolute"]):not([class*="fixed"]):active,
  a[class*="rounded-"][class*="border"]:not([class*="absolute"]):not([class*="fixed"]):active,
  .btn:active {
    top: 0;
  }

  a[class*="bg-[#0150B6]"]:hover,
  button[class*="bg-[#0150B6]"]:hover,
  a[class*="bg-primary"]:hover,
  button[class*="bg-primary"]:hover {
    background-color: #01449c;
    box-shadow: 0 12px 22px -12px rgba(1, 80, 182, 0.55);
  }

  a[class*="bg-ink"]:hover,
  button[class*="bg-ink"]:hover,
  a[class*="bg-[#191C20]"]:hover,
  button[class*="bg-[#191C20]"]:hover,
  a[class*="bg-slate-900"]:hover,
  button[class*="bg-slate-900"]:hover {
    background-color: #0d1014;
    box-shadow: 0 12px 22px -12px rgba(15, 23, 42, 0.45);
  }

  a[class*="bg-white"]:hover,
  button[class*="bg-white"]:hover,
  a[class*="bg-panel"]:hover,
  button[class*="bg-panel"]:hover {
    border-color: #0150b6;
    box-shadow: 0 10px 18px -12px rgba(1, 80, 182, 0.4);
  }

  article[class*="rounded-"],
  .gsap-tilt,
  .clinic-card {
    position: relative;
    top: 0;
    transition: top 240ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 240ms ease;
  }

  article[class*="rounded-"]:hover,
  .gsap-tilt:hover,
  .clinic-card:hover {
    top: -4px;
    z-index: 2;
    box-shadow: 0 16px 32px -18px rgba(1, 80, 182, 0.28), 0 2px 8px rgba(15, 23, 42, 0.05);
  }

  article[class*="rounded-"]:hover,
  .clinic-card:hover {
    border-color: rgba(1, 80, 182, 0.28);
  }

  header nav a,
  footer a:not([class*="bg-"]):not([class*="border"]) {
    transition: color 180ms ease, background-color 180ms ease;
  }

  header nav a:hover,
  header nav .group:hover > button,
  footer a:not([class*="bg-"]):not([class*="border"]):hover {
    color: #0150b6;
  }

  header nav .group:hover .material-symbols-outlined {
    transform: rotate(180deg);
  }

  header nav .absolute a:hover,
  #mobile-menu a:hover {
    background-color: #eef5ff;
    color: #0150b6;
  }

  .map-pin-wrapper:hover > div > div:first-child {
    translate: 0 -3px;
  }

  .img-zoom img {
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .img-zoom:hover img {
    transform: scale(1.045);
  }
}

button[class*="active:scale"]:active,
a[class*="active:scale"]:active,
.map-pin-wrapper:active {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  button[class*="rounded-"],
  a[class*="rounded-"],
  article[class*="rounded-"],
  .gsap-tilt,
  .clinic-card,
  .btn {
    transition: none !important;
    top: 0 !important;
  }
}