/* NextBias motion language: a few recognizable gestures, not effects everywhere. */
:root {
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  --motion-spring: cubic-bezier(.16, 1, .3, 1);
  --motion-quick: 180ms;
  --motion-medium: 620ms;
  --motion-long: 920ms;
}

/* A compact music-track scroll indicator instead of a generic progress bar. */
.motion-track {
  position: fixed;
  z-index: 140;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  pointer-events: none;
}

.motion-track::before {
  position: absolute;
  top: 2px;
  right: 0;
  left: 0;
  height: 2px;
  background: color-mix(in srgb, var(--line, rgba(56, 38, 104, .15)) 72%, transparent);
  content: "";
}

.motion-track-fill {
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--motion-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, #ff3ca6 0%, #9b62ff 44%, #70f4ef 76%, #ffe66a 100%);
}

.motion-track-head {
  position: absolute;
  top: 0;
  left: calc(var(--motion-progress, 0) * 100%);
  width: 7px;
  height: 7px;
  margin-left: -3px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: #ff3ca6;
  box-shadow: 0 0 0 4px rgba(255, 60, 166, .12), 0 2px 8px rgba(72, 35, 120, .2);
  transition: left 80ms linear;
}

/* Homepage opening: timed like a title card and lyric line. */
.motion-ready .home .hero-copy > * {
  opacity: 0;
  translate: 0 22px;
  clip-path: inset(0 0 18% 0);
}

.motion-live .home .hero-copy > * {
  animation: motion-lyric-enter var(--motion-long) var(--motion-spring) forwards;
}

.motion-live .home .hero-copy > :nth-child(1) { animation-delay: 40ms; }
.motion-live .home .hero-copy > :nth-child(2) { animation-delay: 120ms; }
.motion-live .home .hero-copy > :nth-child(3) { animation-delay: 210ms; }
.motion-live .home .hero-copy > :nth-child(4) { animation-delay: 300ms; }
.motion-live .home .hero-copy > :nth-child(5) { animation-delay: 390ms; }

.home .hero {
  --hero-pointer-x: 50%;
  --hero-pointer-y: 38%;
  position: relative;
  isolation: isolate;
}

.home .hero::before {
  position: absolute;
  z-index: -1;
  width: min(64vw, 920px);
  aspect-ratio: 1;
  top: -26%;
  right: -17%;
  border-radius: 50%;
  background:
    radial-gradient(circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(112, 244, 239, .22), transparent 18%),
    conic-gradient(from 210deg, rgba(255, 60, 166, .11), rgba(118, 87, 255, .14), rgba(112, 244, 239, .1), rgba(255, 60, 166, .11));
  content: "";
  opacity: .78;
  pointer-events: none;
  transform: translate3d(var(--hero-drift-x, 0), var(--hero-drift-y, 0), 0);
  transition: transform 320ms var(--motion-ease);
}

.hero-stack {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.motion-ready .hero-stack .stack-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --card-lift: 0px;
  opacity: 0;
  translate: 0 48px;
  scale: .95;
  will-change: transform, translate, scale;
}

.motion-live .hero-stack .stack-card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transform:
    perspective(1200px)
    translate3d(0, var(--card-lift), 0)
    rotateZ(var(--stack-rotate, 0deg))
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transition:
    opacity 680ms var(--motion-spring),
    translate 860ms var(--motion-spring),
    scale 860ms var(--motion-spring),
    transform 220ms var(--motion-ease),
    box-shadow 240ms ease,
    filter 240ms ease;
}

.motion-live .hero-stack .stack-1 { --stack-rotate: 2deg; transition-delay: 170ms; }
.motion-live .hero-stack .stack-2 { --stack-rotate: -8deg; transition-delay: 250ms; }
.motion-live .hero-stack .stack-3 { --stack-rotate: 11deg; transition-delay: 330ms; }
.motion-live .hero-stack .stack-card:hover {
  --card-lift: -12px;
  z-index: 12;
  filter: saturate(1.07) contrast(1.02);
  box-shadow: 0 34px 80px rgba(35, 20, 68, .28);
}

/* One decorative music object, only in the homepage hero. */
.motion-sound-orbit {
  position: absolute;
  z-index: 0;
  width: 210px;
  height: 210px;
  right: 3%;
  top: 7%;
  border: 1px solid color-mix(in srgb, var(--violet, #7657ff) 34%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: scale(.84) rotate(-10deg);
  transition: opacity 700ms ease, transform 900ms var(--motion-spring);
}

.motion-sound-orbit::before,
.motion-sound-orbit::after {
  position: absolute;
  border-radius: inherit;
  content: "";
}
.motion-sound-orbit::before {
  inset: 18px;
  border: 1px dashed color-mix(in srgb, var(--pink, #ff3ca6) 45%, transparent);
}
.motion-sound-orbit::after {
  inset: 55px;
  background: radial-gradient(circle, rgba(112, 244, 239, .17), transparent 66%);
  box-shadow: inset 0 0 0 1px rgba(112, 244, 239, .14);
}
.motion-sound-orbit.is-visible {
  opacity: .88;
  transform: scale(1) rotate(0);
}
.motion-sound-orbit .motion-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: rotate(-18deg);
}
.motion-sound-orbit i {
  display: block;
  width: 4px;
  height: var(--bar-height, 22px);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe66a, #ff3ca6 55%, #7657ff);
  box-shadow: 0 0 14px rgba(255, 60, 166, .25);
  transform-origin: center;
}
.motion-sound-orbit.is-visible i {
  animation: motion-beat var(--beat-speed, 1100ms) ease-in-out infinite alternate;
  animation-delay: var(--beat-delay, 0ms);
}
.motion-sound-orbit b {
  position: absolute;
  right: -5px;
  bottom: 18px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #18132e) 88%, transparent);
  box-shadow: 0 9px 24px rgba(23, 12, 44, .18);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Shared reveal state; each page type supplies its own choreography below. */
.motion-reveal {
  --motion-delay: 0ms;
  transition-delay: var(--motion-delay);
}
.motion-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  clip-path: inset(0 0 0 0);
}

/* Section titles enter like a lyric line being uncovered. */
.motion-lyric {
  opacity: 0;
  translate: 0 18px;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 420ms ease var(--motion-delay),
    translate 760ms var(--motion-spring) var(--motion-delay),
    clip-path 880ms var(--motion-spring) var(--motion-delay);
}

/* Profile pages resemble an album sleeve sliding out. */
.motion-album {
  opacity: 0;
  translate: -34px 0;
  rotate: -1.2deg;
  clip-path: inset(0 9% 0 0 round 20px);
  transition:
    opacity 500ms ease var(--motion-delay),
    translate 900ms var(--motion-spring) var(--motion-delay),
    rotate 900ms var(--motion-spring) var(--motion-delay),
    clip-path 900ms var(--motion-spring) var(--motion-delay);
}

/* Member cards stagger like a lineup rather than floating in from below. */
.motion-member {
  opacity: 0;
  translate: var(--member-offset, 28px) 0;
  scale: .975;
  transition:
    opacity 460ms ease var(--motion-delay),
    translate 760ms var(--motion-spring) var(--motion-delay),
    scale 760ms var(--motion-spring) var(--motion-delay);
}
.motion-member:nth-of-type(even) { --member-offset: -28px; }

/* Shop blocks use a record-sleeve side reveal. */
.motion-sleeve {
  opacity: 0;
  translate: 24px 0;
  clip-path: inset(0 0 0 14% round 18px);
  transition:
    opacity 480ms ease var(--motion-delay),
    translate 820ms var(--motion-spring) var(--motion-delay),
    clip-path 820ms var(--motion-spring) var(--motion-delay);
}

/* Guides and business panels feel like printed posters being pinned down. */
.motion-poster {
  opacity: 0;
  translate: 0 20px;
  rotate: var(--poster-rotate, .55deg);
  transform-origin: top center;
  transition:
    opacity 440ms ease var(--motion-delay),
    translate 780ms var(--motion-spring) var(--motion-delay),
    rotate 780ms var(--motion-spring) var(--motion-delay);
}
.motion-poster:nth-of-type(even) { --poster-rotate: -.55deg; }

/* Supporting content gets only a quiet rise. */
.motion-quiet {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 400ms ease var(--motion-delay),
    translate 680ms var(--motion-spring) var(--motion-delay);
}

/* Depth is limited to a handful of discovery cards. */
.motion-depth {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  transform:
    perspective(1050px)
    translate3d(0, var(--tilt-lift), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 220ms var(--motion-ease), box-shadow 220ms ease, filter 220ms ease;
  will-change: transform;
}
.motion-depth:hover {
  --tilt-lift: -6px;
  filter: saturate(1.035);
  box-shadow: 0 24px 58px rgba(50, 28, 95, .15);
}
.motion-depth.is-pressed {
  --tilt-lift: -2px;
  scale: .99;
}
.motion-depth .card-photo {
  transition: transform 620ms var(--motion-spring), filter 280ms ease;
}
.motion-depth:hover .card-photo {
  transform: scale(1.045);
  filter: saturate(1.06);
}

/* Only the main calls to action receive a quick light sweep. */
.button.primary,
.header-cta,
.footer-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--motion-quick) var(--motion-ease), box-shadow var(--motion-quick) ease;
}
.button.primary::before,
.header-cta::before,
.footer-cta::before {
  position: absolute;
  z-index: -1;
  width: 38%;
  height: 250%;
  top: -75%;
  left: -70%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  content: "";
  pointer-events: none;
  rotate: 18deg;
  transition: left 520ms var(--motion-ease);
}
.button.primary:hover::before,
.header-cta:hover::before,
.footer-cta:hover::before { left: 132%; }
.button.primary:active,
.header-cta:active,
.footer-cta:active { transform: translateY(1px) scale(.98); }

.pro-header .primary-nav a:hover .nav-symbol {
  animation: motion-symbol-pop 340ms var(--motion-spring);
}
.brand:hover .brand-mark {
  animation: motion-logo-turn 520ms var(--motion-spring);
}
.ticker:hover div { animation-play-state: paused; }

html[data-theme="dark"] .motion-track-head { box-shadow: 0 0 0 4px rgba(112, 244, 239, .1), 0 2px 9px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .motion-sound-orbit { opacity: .7; }
html[data-theme="dark"] .motion-depth:hover { box-shadow: 0 26px 62px rgba(0, 0, 0, .34); }

@keyframes motion-lyric-enter {
  from { opacity: 0; translate: 0 22px; clip-path: inset(0 0 18% 0); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); }
}
@keyframes motion-lyric-enter-mobile {
  from { opacity: 0; translate: 0 12px; clip-path: inset(0 0 8% 0); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); }
}
@keyframes motion-beat {
  0% { scale: 1 .42; opacity: .58; }
  55% { scale: 1 1.18; opacity: 1; }
  100% { scale: 1 .72; opacity: .78; }
}
@keyframes motion-symbol-pop {
  0% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-3px) rotate(-12deg) scale(1.16); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes motion-logo-turn {
  0% { transform: rotate(0) scale(1); }
  46% { transform: rotate(-7deg) scale(1.06); }
  100% { transform: rotate(0) scale(1); }
}

@media (max-width: 860px) {
  .motion-sound-orbit {
    width: 156px;
    height: 156px;
    right: 0;
    top: 12%;
  }
  .motion-depth,
  .motion-depth:hover {
    --tilt-x: 0deg !important;
    --tilt-y: 0deg !important;
  }
}

/* Phones use a shorter, quieter motion profile made for touch and long pages. */
@media (max-width: 620px) {
  :root {
    --motion-quick: 140ms;
    --motion-medium: 440ms;
    --motion-long: 620ms;
  }

  .motion-track {
    height: 2px;
  }
  .motion-track::before,
  .motion-track-fill {
    top: 0;
    height: 2px;
  }
  .motion-track-head {
    display: none;
  }

  .motion-ready .home .hero-copy > * {
    translate: 0 12px;
    clip-path: inset(0 0 8% 0);
  }
  .motion-live .home .hero-copy > * {
    animation-name: motion-lyric-enter-mobile;
    animation-duration: 620ms;
  }
  .motion-live .home .hero-copy > :nth-child(1) { animation-delay: 20ms; }
  .motion-live .home .hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .motion-live .home .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .motion-live .home .hero-copy > :nth-child(4) { animation-delay: 170ms; }
  .motion-live .home .hero-copy > :nth-child(5) { animation-delay: 220ms; }

  .home .hero::before {
    opacity: .5;
    transform: none;
  }

  .motion-ready .hero-stack .stack-card {
    translate: 0 24px;
    scale: .98;
  }
  .motion-live .hero-stack .stack-card {
    --card-lift: 0px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transition:
      opacity 420ms var(--motion-spring),
      translate 600ms var(--motion-spring),
      scale 600ms var(--motion-spring);
  }
  .motion-live .hero-stack .stack-1 { transition-delay: 90ms; }
  .motion-live .hero-stack .stack-2 { transition-delay: 140ms; }
  .motion-live .hero-stack .stack-3 { transition-delay: 190ms; }
  .motion-live .hero-stack .stack-card:hover {
    --card-lift: 0px;
    filter: none;
    box-shadow: none;
  }

  .motion-sound-orbit {
    display: none;
  }

  .motion-lyric,
  .motion-album,
  .motion-sleeve,
  .motion-poster,
  .motion-quiet {
    opacity: 0;
    translate: 0 11px;
    rotate: 0deg;
    scale: .99;
    clip-path: none;
    transition:
      opacity 300ms ease var(--motion-delay),
      translate 500ms var(--motion-spring) var(--motion-delay),
      scale 500ms var(--motion-spring) var(--motion-delay);
  }

  .motion-member {
    --member-offset: 12px;
    opacity: 0;
    translate: var(--member-offset) 0;
    scale: .99;
    transition:
      opacity 320ms ease var(--motion-delay),
      translate 520ms var(--motion-spring) var(--motion-delay),
      scale 520ms var(--motion-spring) var(--motion-delay);
  }
  .motion-member:nth-of-type(even) {
    --member-offset: -12px;
  }

  .motion-depth,
  .motion-depth:hover {
    --tilt-x: 0deg !important;
    --tilt-y: 0deg !important;
    --tilt-lift: 0px !important;
    transform: none;
    filter: none;
    box-shadow: none;
  }
  .motion-depth:hover .card-photo {
    transform: none;
    filter: none;
  }

  .button.primary::before,
  .header-cta::before,
  .footer-cta::before {
    display: none;
  }
  .button.primary:active,
  .header-cta:active,
  .footer-cta:active {
    transform: translateY(1px) scale(.985);
  }
}

@media (hover: none), (pointer: coarse) {
  .motion-depth,
  .motion-depth:hover {
    --tilt-x: 0deg !important;
    --tilt-y: 0deg !important;
    --tilt-lift: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-track,
  .motion-sound-orbit { display: none; }
  .motion-ready .home .hero-copy > *,
  .motion-live .home .hero-copy > *,
  .motion-ready .hero-stack .stack-card,
  .motion-live .hero-stack .stack-card,
  .motion-reveal,
  .motion-reveal.is-visible {
    opacity: 1;
    translate: none;
    rotate: none;
    scale: 1;
    clip-path: none;
    animation: none;
    transition: none;
  }
  .motion-depth,
  .motion-depth:hover {
    --tilt-x: 0deg !important;
    --tilt-y: 0deg !important;
    --tilt-lift: 0px !important;
    transform: none;
    transition: none;
  }
  .button.primary::before,
  .header-cta::before,
  .footer-cta::before { display: none; }
}