/*
  V8 desktop motion layer
  -----------------------
  This file intentionally leaves V7 layout, copy and visual tokens untouched.
  The existing V7 IntersectionObserver supplies the one-time `.is-visible`
  state; V8 only gives the five approved compositions distinct entrances.
*/

:root{
  --v8-motion-ease:cubic-bezier(.16,1,.3,1);
}

/* Keep V7's scroll-driven image scale. V8 moves the frame itself, so the
   scroll scale and the pointer response never compete for one transform. */
.hero-frame img{
  transform:scale(var(--hero-scale));
}

.hero-frame{
  transform:
    translate3d(var(--v8-visual-x,0px),var(--v8-visual-y,0px),0)
    rotate(var(--v8-visual-r,0deg));
  transition:
    border-color .15s,
    transform .52s cubic-bezier(.16,1,.3,1);
}

.hero-copy h1{
  transform:
    perspective(1200px)
    translate3d(var(--v8-copy-x,0px),var(--v8-copy-y,0px),0)
    rotateX(var(--v8-copy-rx,0deg))
    rotateY(var(--v8-copy-ry,0deg));
  transform-origin:42% 50%;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}

.hero-copy :is(.kicker,p,.hero-actions){
  transform:translate3d(var(--v8-copy-soft-x,0px),var(--v8-copy-soft-y,0px),0);
  transition:transform .46s cubic-bezier(.16,1,.3,1);
}

.hero.v8-pointer-active .hero-frame,
.hero.v8-pointer-active .hero-copy h1,
.hero.v8-pointer-active .hero-copy :is(.kicker,p,.hero-actions){
  transition-duration:.11s;
  transition-timing-function:ease-out;
}

/* V8 entrance scope: everything outside the five approved compositions stays
   static even though it remains on V7's shared observer list. */
.reveal-ready .reveal{
  opacity:1;
  transform:none;
  clip-path:none;
  filter:none;
  transition:none;
}

/* Keyboard feedback mirrors the existing pointer feedback on primary actions. */
.button:focus-visible{
  background:#fff;
  color:#241014;
}

.formation-arrival .play-track:is(:hover,:focus-visible),
.group-recognition a:is(:hover,:focus-visible){
  color:#351016;
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* Formation Score: four independent lines resolve into one answer. */
  .reveal-ready .formation-score .solo-thread,
  .reveal-ready .formation-score .formation-arrival{
    transition:
      opacity .52s var(--v8-motion-ease),
      transform .68s var(--v8-motion-ease);
  }

  .reveal-ready .formation-score .solo-thread i{
    transform-origin:left center;
    transition:transform .76s var(--v8-motion-ease);
  }

  .reveal-ready .formation-score:not(.is-visible) .solo-thread{
    opacity:.14;
    transform:translate3d(-18px,0,0);
  }

  .reveal-ready .formation-score:not(.is-visible) .solo-thread i{
    transform:scaleX(0);
  }

  .reveal-ready .formation-score:not(.is-visible) .formation-arrival{
    opacity:.01;
    transform:translate3d(22px,0,0);
  }

  .reveal-ready .formation-score.is-visible .solo-thread,
  .reveal-ready .formation-score.is-visible .formation-arrival{
    opacity:1;
    transform:none;
  }

  .reveal-ready .formation-score.is-visible .solo-thread i{
    transform:scaleX(1);
  }

  .reveal-ready .formation-score .solo-thread:nth-child(2){transition-delay:.055s}
  .reveal-ready .formation-score .solo-thread:nth-child(3){transition-delay:.11s}
  .reveal-ready .formation-score .solo-thread:nth-child(4){transition-delay:.165s}
  .reveal-ready .formation-score .solo-thread:nth-child(2) i{transition-delay:.055s}
  .reveal-ready .formation-score .solo-thread:nth-child(3) i{transition-delay:.11s}
  .reveal-ready .formation-score .solo-thread:nth-child(4) i{transition-delay:.165s}
  .reveal-ready .formation-score .formation-arrival{transition-delay:.2s}

  /* Members Deck: the four portraits arrive as a single editorial deck. */
  .reveal-ready .member-intro .member-card{
    transition:
      flex .55s var(--v8-motion-ease),
      filter .35s;
  }

  .reveal-ready .member-intro:not(.is-visible) .member-card{
    opacity:.01;
    transform:translate3d(0,34px,0);
    clip-path:inset(0 0 12% 0);
  }

  .reveal-ready .member-intro.is-visible .member-card{
    animation:v8-member-deck-in .7s var(--v8-motion-ease) both;
  }

  .reveal-ready .member-intro.is-visible .member-card:nth-child(2){animation-delay:.06s}
  .reveal-ready .member-intro.is-visible .member-card:nth-child(3){animation-delay:.12s}
  .reveal-ready .member-intro.is-visible .member-card:nth-child(4){animation-delay:.18s}

  @keyframes v8-member-deck-in{
    from{
      opacity:.01;
      transform:translate3d(0,34px,0);
      clip-path:inset(0 0 12% 0);
    }
    to{
      opacity:1;
      transform:none;
      clip-path:inset(0);
    }
  }

  /* Sound Studio: controls enter first, then the playable record dossier. */
  .reveal-ready #sound .sound-studio .sound-route-nav{
    transition:
      opacity .5s var(--v8-motion-ease),
      transform .66s var(--v8-motion-ease);
  }

  .reveal-ready #sound .sound-studio .sound-focus{
    transition:
      opacity .58s var(--v8-motion-ease),
      clip-path .78s var(--v8-motion-ease),
      transform .7s var(--v8-motion-ease);
    transition-delay:.1s;
  }

  .reveal-ready #sound .sound-studio:not(.is-visible) .sound-route-nav{
    opacity:.01;
    transform:translate3d(-24px,0,0);
  }

  .reveal-ready #sound .sound-studio:not(.is-visible) .sound-focus{
    opacity:.01;
    clip-path:inset(0 7% 0 0);
    transform:translate3d(18px,0,0);
  }

  .reveal-ready #sound .sound-studio.is-visible :is(.sound-route-nav,.sound-focus){
    opacity:1;
    transform:none;
  }

  .reveal-ready #sound .sound-studio.is-visible .sound-focus{
    clip-path:inset(0);
  }

  /* Timeline Chapters: media and copy meet from opposite directions. */
  .reveal-ready .timeline-edition > :is(figure,.timeline-covers),
  .reveal-ready .timeline-edition > div:last-child{
    transition:
      opacity .56s var(--v8-motion-ease),
      transform .72s var(--v8-motion-ease),
      clip-path .72s var(--v8-motion-ease);
  }

  .reveal-ready .timeline-edition > div:last-child{
    transition-delay:.08s;
  }

  .reveal-ready .timeline-edition:not(.is-visible) > :is(figure,.timeline-covers){
    opacity:.01;
    transform:translate3d(-30px,0,0);
    clip-path:inset(0 9% 0 0);
  }

  .reveal-ready .timeline-edition-breakout:not(.is-visible) > .timeline-covers{
    transform:translate3d(30px,0,0);
    clip-path:inset(0 0 0 9%);
  }

  .reveal-ready .timeline-edition:not(.is-visible) > div:last-child{
    opacity:.01;
    transform:translate3d(24px,0,0);
  }

  .reveal-ready .timeline-edition-breakout:not(.is-visible) > div:last-child{
    transform:translate3d(-24px,0,0);
  }

  .reveal-ready .timeline-edition.is-visible > :is(figure,.timeline-covers,div:last-child){
    opacity:1;
    transform:none;
    clip-path:inset(0);
  }

  /* KMA evidence: the official record is uncovered before its explanation. */
  .reveal-ready .group-recognition figure{
    transition:
      opacity .54s var(--v8-motion-ease),
      clip-path .76s var(--v8-motion-ease);
  }

  .reveal-ready .group-recognition figure img{
    transition:transform .82s var(--v8-motion-ease);
  }

  .reveal-ready .group-recognition > div{
    transition:
      opacity .56s var(--v8-motion-ease),
      transform .68s var(--v8-motion-ease);
    transition-delay:.1s;
  }

  .reveal-ready .group-recognition:not(.is-visible) figure{
    opacity:.01;
    clip-path:inset(0 12% 0 0);
  }

  .reveal-ready .group-recognition:not(.is-visible) figure img{
    transform:scale(1.025);
  }

  .reveal-ready .group-recognition:not(.is-visible) > div{
    opacity:.01;
    transform:translate3d(24px,0,0);
  }

  .reveal-ready .group-recognition.is-visible figure,
  .reveal-ready .group-recognition.is-visible > div{
    opacity:1;
    transform:none;
  }

  .reveal-ready .group-recognition.is-visible figure{
    clip-path:inset(0);
  }

  .reveal-ready .group-recognition.is-visible figure img{
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-frame img{
    transform:scale(var(--hero-scale));
  }

  .hero-frame,
  .hero-copy h1,
  .hero-copy :is(.kicker,p,.hero-actions){
    transform:none;
    transition:none;
  }

  .reveal-ready :is(
    .formation-score .solo-thread,
    .formation-score .solo-thread i,
    .formation-score .formation-arrival,
    .member-intro .member-card,
    #sound .sound-studio .sound-route-nav,
    #sound .sound-studio .sound-focus,
    .timeline-edition > figure,
    .timeline-edition > .timeline-covers,
    .timeline-edition > div:last-child,
    .group-recognition figure,
    .group-recognition figure img,
    .group-recognition > div
  ){
    opacity:1;
    transform:none;
    clip-path:none;
    filter:none;
    transition:none;
  }
}