/* Scroll story: the hero exhales into About, then the story arrives in beats. */
:root{--hero-scroll-progress:0;--hero-card-progress:0}

@media (prefers-reduced-motion:no-preference){
  .hero-copy{will-change:transform,opacity,filter}
  .hero-copy{opacity:calc(1 - var(--hero-scroll-progress) * .88);transform:translateY(calc(var(--hero-scroll-progress) * -72px)) scale(calc(1 - var(--hero-scroll-progress) * .06));filter:blur(calc(var(--hero-scroll-progress) * 3px))}
  .hero-art{opacity:calc(1 - var(--hero-scroll-progress) * .72);filter:blur(calc(var(--hero-scroll-progress) * 2px)) saturate(calc(1 - var(--hero-scroll-progress) * .12))}
  .hero-showcase{opacity:calc(1 - var(--hero-card-progress) * .65);filter:blur(calc(var(--hero-card-progress) * .8px))}
  .hero-bottom{opacity:calc(1 - var(--hero-scroll-progress) * .95)}

  .js-motion #about-title .sketch-line,
  .js-motion #about-title .sketch-soul{opacity:0;clip-path:inset(0 0 100% 0);translate:0 34px;transition:opacity .75s var(--ease),clip-path .9s var(--ease),translate .9s var(--ease)}
  .js-motion #about.is-scroll-story-active #about-title .sketch-line,
  .js-motion #about.is-scroll-story-active #about-title .sketch-soul{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}
  .js-motion #about.is-scroll-story-active #about-title .sketch-hands{transition-delay:.15s}
  .js-motion #about.is-scroll-story-active #about-title .sketch-soul{transition-delay:.3s}
  .js-motion #about.is-scroll-story-active #about-title .sketch-soul:after{transition-delay:.85s}

  .js-motion #about .about-story .story-beat{display:block;opacity:0;translate:0 20px;transition:opacity .65s var(--ease),translate .65s var(--ease)}
  .js-motion #about.is-scroll-story-active .about-story .story-beat{opacity:1;translate:0 0}
  .js-motion #about.is-scroll-story-active .about-story-main .story-beat:nth-child(1){transition-delay:.55s}
  .js-motion #about.is-scroll-story-active .about-story-main .story-beat:nth-child(2){transition-delay:.72s}
  .js-motion #about.is-scroll-story-active .about-ai-note .story-beat{transition-delay:.92s}
  .js-motion #about .about-stickers,.js-motion #about .sketch-annotations{opacity:0;translate:0 14px;transition:opacity .6s var(--ease),translate .6s var(--ease)}
  .js-motion #about.is-scroll-story-active .about-stickers,.js-motion #about.is-scroll-story-active .sketch-annotations{opacity:1;translate:0 0;transition-delay:.46s}

  .js-motion .project-card{transition-delay:var(--project-delay,0ms)!important}
}

@media (prefers-reduced-motion:reduce){
  .story-beat{display:block}
}

@media (max-width:760px){
  .js-motion #about-title .sketch-line,.js-motion #about-title .sketch-soul{translate:0 22px}
  .hero-copy{transform:translateY(calc(var(--hero-scroll-progress) * -30px)) scale(calc(1 - var(--hero-scroll-progress) * .03))}
}