/* Final motion tuning: smoother acceleration, shorter travel, and less snap. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-spring: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 220ms;
  --motion-medium: 520ms;
  --motion-long: 760ms;
}

.home .hero::before {
  transition-duration: 440ms;
  transition-timing-function: var(--motion-ease);
}

/*
 * The overlapping hero cards deliberately stay 2D.
 * Combining overflow:hidden + rounded corners + overlapping siblings with
 * perspective/rotateX/rotateY can produce triangular GPU clipping in Chromium.
 */
.hero-stack {
  perspective: none;
  transform-style: flat;
}

.motion-ready .hero-stack .stack-card {
  --stack-scale: 1;
  translate: 0 34px;
  scale: .97;
}

.motion-live .hero-stack .stack-card {
  transform:
    translateY(var(--card-lift, 0px))
    rotate(var(--stack-rotate, 0deg))
    scale(var(--stack-scale, 1));
  transform-origin: 50% 50%;
  transform-style: flat;
  backface-visibility: hidden;
  will-change: transform;
  transition:
    opacity 560ms var(--motion-ease),
    translate 700ms var(--motion-ease),
    scale 700ms var(--motion-ease),
    transform 360ms var(--motion-ease),
    box-shadow 360ms var(--motion-ease),
    filter 320ms var(--motion-ease);
}

/* Entrance staggering is owned by motion-safety.cb578dfab6e9.css animation-delay.
   Do not delay later hover/focus interactions. */
.motion-live .hero-stack .stack-1,
.motion-live .hero-stack .stack-2,
.motion-live .hero-stack .stack-3 {
  transition-delay: 0ms;
}

.motion-live .hero-stack .stack-card:hover,
.motion-live .hero-stack .stack-card:focus-visible {
  --card-lift: -5px;
  --stack-scale: 1.012;
  z-index: 12;
  filter: saturate(1.025) contrast(1.008);
  box-shadow: 0 29px 66px rgba(35, 20, 68, .24);
}

.motion-live .hero-stack .stack-card:active {
  --card-lift: -2px;
  --stack-scale: .997;
  transition-duration: 120ms;
}

.motion-lyric {
  translate: 0 14px;
  transition:
    opacity 380ms var(--motion-ease) var(--motion-delay),
    translate 620ms var(--motion-ease) var(--motion-delay),
    clip-path 680ms var(--motion-ease) var(--motion-delay);
}

.motion-album {
  translate: -22px 0;
  rotate: -.7deg;
  transition:
    opacity 420ms var(--motion-ease) var(--motion-delay),
    translate 680ms var(--motion-ease) var(--motion-delay),
    rotate 680ms var(--motion-ease) var(--motion-delay),
    clip-path 680ms var(--motion-ease) var(--motion-delay);
}

.motion-member {
  translate: var(--member-offset, 20px) 0;
  transition:
    opacity 400ms var(--motion-ease) var(--motion-delay),
    translate 620ms var(--motion-ease) var(--motion-delay),
    scale 620ms var(--motion-ease) var(--motion-delay);
}
.motion-member:nth-of-type(even) { --member-offset: -20px; }

.motion-sleeve,
.motion-poster,
.motion-quiet {
  transition-duration: 440ms, 620ms, 620ms;
  transition-timing-function: var(--motion-ease);
}

.motion-depth {
  transition: transform 300ms var(--motion-ease), box-shadow 300ms var(--motion-ease), filter 300ms var(--motion-ease);
}
.motion-depth:hover {
  --tilt-lift: -3px;
}
.motion-depth .card-photo {
  transition: transform 720ms var(--motion-ease), filter 300ms var(--motion-ease);
}

.button.primary,
.header-cta,
.footer-cta,
.finder-alt-card,
.group-card,
.shop-card,
.schedule-event {
  transition-timing-function: var(--motion-ease);
}

@media (max-width: 620px) {
  :root {
    --motion-quick: 180ms;
    --motion-medium: 380ms;
    --motion-long: 540ms;
  }
  .motion-ready .hero-stack .stack-card {
    translate: 0 16px;
    scale: .99;
  }
  .motion-live .hero-stack .stack-card {
    transform: rotate(var(--stack-rotate, 0deg));
    transition:
      opacity 360ms var(--motion-ease),
      translate 480ms var(--motion-ease),
      scale 480ms var(--motion-ease),
      transform 360ms var(--motion-ease);
  }
  .motion-live .hero-stack .stack-card:hover,
  .motion-live .hero-stack .stack-card:focus-visible {
    --card-lift: 0px;
    --stack-scale: 1;
  }
  .motion-lyric,
  .motion-album,
  .motion-sleeve,
  .motion-poster,
  .motion-quiet {
    translate: 0 8px;
    transition:
      opacity 280ms var(--motion-ease) var(--motion-delay),
      translate 420ms var(--motion-ease) var(--motion-delay),
      scale 420ms var(--motion-ease) var(--motion-delay);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}