/* Small, consistent hover feedback across cards and controls. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .glass-card {
    transition:
      transform 360ms cubic-bezier(.2, .75, .25, 1),
      box-shadow 360ms cubic-bezier(.2, .75, .25, 1),
      border-color 360ms ease;
  }

  .glass-card::before,
  .glass-card::after {
    transition: opacity 360ms ease;
  }

  .glass-card:hover {
    transform: translate3d(0, -3px, 0) scale(1.004);
    border-color: var(--glass-shell-border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .2), 0 0 28px rgba(var(--tint-rgb), .08);
  }

  .glass-card:hover::before {
    opacity: .58;
  }

  .glass-card:hover::after {
    opacity: .72;
  }

  a[href],
  button:not(:disabled),
  [role="button"],
  [role="link"] {
    transition:
      transform 220ms cubic-bezier(.2, .75, .25, 1),
      color 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }

  a[href]:hover,
  button:not(:disabled):hover,
  [role="button"]:hover,
  [role="link"]:hover {
    transform: translate3d(0, -1.5px, 0);
  }

  a[href]:active,
  button:not(:disabled):active,
  [role="button"]:active,
  [role="link"]:active {
    transform: scale(.97);
  }

  .glass-card [role="listitem"] {
    transition: transform 260ms cubic-bezier(.2, .75, .25, 1);
  }

  .glass-card [role="listitem"]:hover {
    transform: translate3d(0, -2px, 0);
  }

  .glass-card [role="listitem"] > div {
    transition:
      transform 260ms cubic-bezier(.2, .75, .25, 1),
      border-color 260ms ease,
      box-shadow 260ms ease;
  }

  .glass-card [role="listitem"]:hover > div {
    transform: scale(1.055);
    border-color: rgba(var(--tint-rgb), .48);
    box-shadow: 0 0 0 4px rgba(var(--tint-rgb), .08), 0 8px 20px rgba(0, 0, 0, .18);
  }

  a[href] img,
  a[href] svg {
    transition: transform 260ms cubic-bezier(.2, .75, .25, 1), filter 260ms ease;
  }

  a[href]:hover img {
    transform: scale(1.045);
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .2));
  }

  a[href]:hover .lucide-arrow-up-right {
    transform: translate3d(2px, -2px, 0);
  }
}

a[href]:focus-visible,
button:not(:disabled):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), .72);
  outline-offset: 3px;
}

/* Smooth, low-key movement for the music player. */
.ios-media-card {
  will-change: transform;
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
}

.ios-media-card:hover {
  transform: translate3d(0, -3px, 0);
}


.ios-media-card .ios-media-card__album {
  will-change: transform;
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
}

.ios-media-card:hover .ios-media-card__album {
  transform: translate3d(0, -1px, 0) scale(1.035);
}

.ios-media-card button {
  will-change: transform;
  transition: transform 180ms cubic-bezier(.16, 1, .3, 1);
}

.ios-media-card button:hover,
.ios-media-card button:focus-visible {
  transform: scale(1.04);
}

.ios-media-card button:active {
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .ios-media-card,
  .ios-media-card__album,
  .ios-media-card .ios-media-card__progress,
  .ios-media-card button,
  .glass-card::before,
  .glass-card::after,
  a[href],
  button:not(:disabled),
  [role="button"],
  [role="link"],
  .glass-card [role="listitem"],
  .glass-card [role="listitem"] > div,
  a[href] img,
  a[href] svg {
    transition-duration: .01ms !important;
  }
}

.ios-media-card__progress:focus-visible {
  outline: 2px solid white;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .ios-media-card:hover,
  .ios-media-card:hover .ios-media-card__album,
  .ios-media-card button:hover,
  .ios-media-card button:focus-visible,
  .ios-media-card button:active { transform: none; }
}