/* ==========================================================================
   Motion. Everything here is progressive:
   - only runs when the visitor has not asked for reduced motion;
   - hero entrances are pure CSS and always end visible;
   - scroll reveals only hide elements js/motion.js has marked (.rv), and it
     only marks elements that start below the fold, so nothing flashes and
     nothing stays hidden if the script fails.
   Animations use the individual translate / scale properties so they compose
   with the tilts (transform: rotate) the cards already have.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- hero entrance -------------------------------------------------------- */
  .hero__copy > *, .hero__copy h1,
  .hero__inner > .on-violet > *, .hero__stats > *,
  .legal-hero__inner > * {
    animation: mo-rise 0.8s var(--mo-ease) both;
  }
  .hero__copy > :nth-child(2), .hero__inner > .on-violet > :nth-child(2), .hero__stats > :nth-child(1), .legal-hero__inner > :nth-child(2) { animation-delay: 0.08s; }
  .hero__copy > :nth-child(3), .hero__stats > :nth-child(2), .legal-hero__inner > :nth-child(3) { animation-delay: 0.16s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.24s; }

  .hero__stage > * {
    animation: mo-drop 1s var(--mo-spring) both, mo-bob 7s 1.4s ease-in-out infinite alternate;
  }
  .hero__stage > :nth-child(1) { animation-delay: 0.2s, 1.4s; }
  .hero__stage > :nth-child(2) { animation-delay: 0.38s, 2.6s; animation-duration: 1s, 8s; }
  .hero__stage > :nth-child(3) { animation-delay: 0.56s, 1.9s; animation-duration: 1s, 6s; }

  /* ---- scroll reveal ---------------------------------------------------------- */
  .rv { opacity: 0; translate: 0 32px; }
  .rv.is-in {
    opacity: 1; translate: 0 0;
    transition: opacity 0.7s var(--mo-ease), translate 0.8s var(--mo-ease);
    transition-delay: var(--rv-delay, 0s);
  }
  .rv--side { translate: 48px 0; }
  /* Link targets only fade, so an in-page jump lands where it was aimed. */
  .rv[id] { translate: none; }

  /* bars grow from their left edge, streak dots pop, chart points rise */
  .rv-bar span { transform: scaleX(0); transform-origin: left center; }
  .rv-bar.is-in span { transform: none; transition: transform 0.9s var(--mo-ease); }
  .rv-bar.is-in span:nth-child(2) { transition-delay: 0.06s; }
  .rv-bar.is-in span:nth-child(3) { transition-delay: 0.12s; }
  .rv-bar.is-in span:nth-child(4) { transition-delay: 0.18s; }
  .rv-bar.is-in span:nth-child(5) { transition-delay: 0.24s; }
  .rv-bar.is-in span:nth-child(6) { transition-delay: 0.3s; }

  .rv-dots .streak__dot { scale: 0; }
  .rv-dots.is-in .streak__dot { scale: 1; transition: scale 0.5s var(--mo-spring); }
  .rv-dots.is-in .streak__day:nth-child(2) .streak__dot { transition-delay: 0.06s; }
  .rv-dots.is-in .streak__day:nth-child(3) .streak__dot { transition-delay: 0.12s; }
  .rv-dots.is-in .streak__day:nth-child(4) .streak__dot { transition-delay: 0.18s; }
  .rv-dots.is-in .streak__day:nth-child(5) .streak__dot { transition-delay: 0.24s; }
  .rv-dots.is-in .streak__day:nth-child(6) .streak__dot { transition-delay: 0.3s; }
  .rv-dots.is-in .streak__day:nth-child(7) .streak__dot { transition-delay: 0.36s; }

  /* ---- small interactions ------------------------------------------------------- */
  .btn { transition: translate 0.2s var(--mo-ease), scale 0.15s var(--mo-ease), background-color 0.2s; }
  .btn:hover { translate: 0 -2px; }
  .btn:active { scale: 0.97; translate: 0 0; }
  .feed, .tile, .feat, .plan, .widget { transition: translate 0.3s var(--mo-ease); }
  .social__list .feed:hover, .bento .tile:hover, .plan:hover { translate: 0 -4px; }

  /* Live Activity: the 9 key gets tapped every few seconds */
  .live__keys span:nth-child(9) { animation: mo-tap 4.8s 1.8s ease-in-out infinite; }

  /* ---- library ------------------------------------------------------------------- */
  .lib-card:not(.skeleton) { animation: mo-rise 0.6s var(--mo-ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
  .skeleton .cover { animation: mo-pulse 1.4s ease-in-out infinite alternate; }
  .sheet.is-open .sheet__scrim { animation: mo-fade 0.3s ease both; }
  .sheet.is-open .sheet__panel { animation: mo-sheet-side 0.45s var(--mo-ease) both; }
  @media (max-width: 900px) {
    .sheet.is-open .sheet__panel { animation-name: mo-sheet-up; }
  }

  /* ---- scroll-linked, where the browser supports it ------------------------------- */
  @supports (animation-timeline: view()) {
    .footer__mark { animation: mo-mark linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .hero__stage { animation: mo-parallax linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  }
}

@keyframes mo-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes mo-drop { from { opacity: 0; translate: 0 90px; scale: 0.9; } }
@keyframes mo-bob { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-pulse { to { opacity: 0.55; } }
@keyframes mo-sheet-side { from { translate: 60px 0; opacity: 0; } }
@keyframes mo-sheet-up { from { translate: 0 100%; } }
@keyframes mo-mark { from { translate: 0 45%; } }
@keyframes mo-parallax { to { translate: 0 -70px; } }
@keyframes mo-tap {
  0%, 18%, 100% { scale: 1; background: color-mix(in srgb, var(--band) 24%, var(--black)); color: var(--band); }
  5% { scale: 0.86; }
  9%, 14% { scale: 1; background: var(--band); color: var(--black); }
}