/* Phone motion layer (see mobile-wow.js). Hidden starting states exist only under
   .wow-active, so paused, reduced-motion and desktop views always render final. */
.stream-caret{display:none}
.experience-stats .odo,.experience-stats .odo>span{font:inherit;letter-spacing:inherit;color:inherit;max-width:none;text-transform:none}
.odo{display:inline-flex;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.odo>span{display:flex;flex-direction:column;transform:translateY(calc(var(--n) * -1em))}
.odo i{display:block;height:1em;font-style:normal}

@media screen and (max-width:600px) and (prefers-reduced-motion:no-preference){
  /* Hero: avatar settles in, the introduction streams, the actions follow. */
  .wow-active .hero-avatar{animation:avatar-in 1s cubic-bezier(.16,1,.3,1) .25s both}
  .wow-active .hero-description .tok{opacity:0;filter:blur(7px);transform:translateY(.32em);display:inline-block;transition:opacity .55s ease-out,filter .6s ease-out,transform .7s cubic-bezier(.16,1,.3,1)}
  .wow-active .hero-description .tok.is-on{opacity:1;filter:none;transform:none}
  .wow-active .stream-caret{display:inline-block;width:.42em;height:.95em;margin:0 -.42em 0 .1em;vertical-align:-.1em;background:var(--orange);border-radius:1px;animation:caret-blink .8s steps(1) infinite}
  .wow-active .stream-caret.is-done{animation:caret-out .5s ease forwards}
  .wow-active .hero-copy>.round-link{animation:rise-in .9s cubic-bezier(.16,1,.3,1) 1.35s both}
  .wow-active .hero-copy>.research-credential{animation:rise-in .9s cubic-bezier(.16,1,.3,1) 1.5s both}
  .wow-active .sculpture-controls{animation:rise-in .9s cubic-bezier(.16,1,.3,1) 1.8s both}

  /* The sculpture is a touch object: horizontal drags spin it, vertical drags scroll. */
  .wow-active .sculpture-panel{height:290px}
  .wow-active .sculpture-panel canvas{touch-action:pan-y}
  .wow-active .sculpture-panel::after{content:'DRAG TO SPIN · TAP';position:absolute;top:8px;right:0;font:9px/1 var(--mono);letter-spacing:.08em;color:#5f6b58;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);animation:rise-in .9s cubic-bezier(.16,1,.3,1) 2.3s both,hint-pulse 2.8s ease-in-out 3.4s 3;transition:opacity .5s}
  .wow-active .sculpture-panel.is-touched::after{opacity:0}

  /* Lime ticker returns on phones and answers scroll speed and direction. */
  .wow-active .capability-strip{display:block;padding:13px 0}
  .wow-active .strip-track{animation-duration:26s;gap:22px}
  .wow-active .strip-track>*{display:inline-block;transform:skewX(var(--strip-skew,0deg));transition:transform .25s ease-out}

  /* Dark chapters open like an aperture as they arrive. */
  .wow-active .research-section,.wow-active .approach-section{clip-path:inset(0 var(--aperture,0%) round var(--aperture-radius,0px))}

  /* Lead paragraphs light up as the reader reaches them. */
  .wow-active .read-scrub .rw{opacity:clamp(.2, calc(var(--lit, 0) - var(--i)), 1);transition:opacity .2s linear}

  .wow-active .experience-stats .odo>span{transition:transform 1.8s cubic-bezier(.2,.75,.1,1)}
  .wow-active .experience-stats>div:nth-child(2) .odo>span{transition-delay:.18s}
  .wow-active .experience-stats:not(.is-in) .odo>span{transform:none}

  /* Every tap gets a physical response. */
  .wow-active :is(.cta-button,.round-link,.project-selector button,.research-scenario button,.publication-links>a,.mode-control,.header-contact,.contact-arrow):active{transform:scale(.965);transition:transform .12s ease}
  .wow-active .project-grid{view-transition-name:project-stage}
}

::view-transition-old(project-stage){animation:stage-out .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(project-stage){animation:stage-in .55s cubic-bezier(.16,1,.3,1) .05s both}
html[data-swap="back"]::view-transition-old(project-stage){animation-name:stage-out-back}
html[data-swap="back"]::view-transition-new(project-stage){animation-name:stage-in-back}
::view-transition-group(project-stage){animation-duration:.5s}

@keyframes avatar-in{from{opacity:0;transform:scale(.4) rotate(-25deg)}}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}}
@keyframes caret-blink{50%{opacity:0}}
@keyframes caret-out{to{opacity:0;transform:scaleY(.2)}}
@keyframes hint-pulse{50%{border-color:var(--orange);color:var(--ink)}}
@keyframes stage-out{to{opacity:0;transform:translateX(-14%) scale(.94);filter:blur(4px)}}
@keyframes stage-in{from{opacity:0;transform:translateX(16%) scale(.96)}}
@keyframes stage-out-back{to{opacity:0;transform:translateX(14%) scale(.94);filter:blur(4px)}}
@keyframes stage-in-back{from{opacity:0;transform:translateX(-16%) scale(.96)}}