/* ---------- Motion layer ----------
   Page transitions, scroll reveals, ink-fill headings, parallax, marquee, scroll-read text.
   Everything is opt-in via html.motion (set in <head> unless reduced motion is requested). */

/* Cross-document page transitions: the old page lifts away, the new sheet wipes up like a fresh page. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .62s cubic-bezier(.16,.84,.24,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-28px) scale(.985);filter:blur(3px)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0 round 32px 32px 0 0);transform:translateY(60px)}to{clip-path:inset(0 0 0 0 round 0)}}

/* Scroll progress + header that tucks away while reading down. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--violet),var(--highlight));transform-origin:0 50%;transform:scaleX(var(--scroll,0));pointer-events:none}
.site-header{transition:border-color .25s,transform .45s cubic-bezier(.2,.8,.2,1)}
.site-header.is-tucked{transform:translateY(-100%)}
.site-header:focus-within{transform:none}

/* Reveals: blocks rise in; siblings stagger via --i. */
.motion .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.motion .reveal.is-in{opacity:1;transform:none}
/* Failsafe: never leave content hidden if scripting stalls. */
.motion .reveal:not(.is-in){animation:reveal-failsafe 0s 4s forwards}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}

/* Headline words rise out of a mask; outlined words then ink in (idea -> reality). */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .08em;margin:0 -.08em -.08em}
.w>span{display:inline-block}
.motion .split-words .w>span{transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--w,0) * 55ms)}
.motion .split-words.is-in .w>span{transform:none}
.motion .split-words:not(.is-in) .w>span{animation:reveal-failsafe 0s 4s forwards}
.display-title .muted .w>span{transition:transform .9s cubic-bezier(.2,.8,.2,1),color .9s ease;transition-delay:calc(var(--w,0) * 55ms),calc(.75s + var(--w,0) * 120ms)}
.display-title.is-in .muted .w>span{color:var(--ink)}

/* Doodle underline draws under each handwritten note as it appears. */
.eyebrow.doodle{padding-bottom:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C40 2 70 9 110 5S170 3 198 6' fill='none' stroke='%23ffd43b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/0% 9px;transition:background-size .9s cubic-bezier(.6,.1,.3,1) .35s}
.eyebrow.doodle.is-in{background-size:100% 9px}

/* Media: images unclip and settle as they enter. */
.motion .reveal-media{overflow:clip;clip-path:inset(8% 6% 8% 6% round var(--r-media));transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1)}
.motion .reveal-media img{transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
/* Final state drops the rounded clip so captions under the image are never cut. */
.motion .reveal-media.is-in{clip-path:inset(0)}
.motion .reveal-media.is-in img{transform:none}
.motion .reveal-media:not(.is-in){animation:media-failsafe 0s 4s forwards}
@keyframes media-failsafe{to{clip-path:none}}
.photo-story-image{overflow:hidden}
.motion .photo-story-image.reveal-media{clip-path:inset(0 18% 0 0);border-radius:0}
.motion .photo-story-image.reveal-media.is-in{clip-path:inset(0 0 0 0)}

/* Scroll-linked parallax where the browser supports scroll timelines. */
@supports (animation-timeline:view()){
  .motion .wide-photo img,.motion .photo-story-image img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes drift{from{object-position:50% 0%}to{object-position:50% 100%}}
}

/* Scroll-read: words brighten as the paragraph passes the reading line. */
.read-word{transition:color .25s}
.motion [data-scroll-read] .read-word{color:color-mix(in srgb,var(--ink-2) 28%,transparent)}
.motion [data-scroll-read] .read-word.is-read{color:var(--ink)}

/* Marquee: velocity-reactive capability band. */
.marquee{overflow:hidden;padding-block:clamp(28px,4vw,48px);border-block:1px solid var(--line);background:var(--paper)}
.marquee-track{display:flex;align-items:center;gap:clamp(24px,3vw,44px);width:max-content;will-change:transform}
.mq-item{font-size:clamp(36px,5.4vw,80px);font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.mq-item:not(.mq-hand){color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.mq-hand{font-family:var(--hand);font-weight:700;letter-spacing:0;color:var(--violet)}
.mq-spark{flex:none;width:clamp(20px,2.4vw,34px);aspect-ratio:1;background:var(--highlight);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* Approach: each stage heading starts as an outline and inks in when you reach it. */
.process-step h3{color:var(--paper);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;transition:color .7s ease}
.process-step.is-active h3{color:var(--ink)}
.section--soft .process-step h3{color:var(--white)}
.section--soft .process-step.is-active h3{color:var(--ink)}

/* Brief ink meter: the sketch firms up as the brief fills in. */
.brief-meter{display:flex;align-items:center;gap:14px}
.meter-label{font-family:var(--hand);font-size:20px;color:var(--violet);min-width:120px}
.meter-track{flex:1;height:6px;border-radius:99px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 13px)}
.meter-fill{display:block;height:100%;width:calc(var(--fill,0) * 100%);border-radius:inherit;background:var(--violet);transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* Footer email: letters wave on hover. */
.footer-mail .ch{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--c) * 14ms)}
.footer-mail:hover .ch{transform:translateY(-.12em)}
.footer-mail:hover .ch:nth-child(odd){transform:translateY(.05em)}

@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Hero headline: each line rises out of a mask on load. */
.motion .home-hero h1>span{animation:line-up 1s cubic-bezier(.2,.8,.2,1) backwards}
.motion .home-hero h1>span+span{animation-delay:.14s}
@keyframes line-up{from{clip-path:inset(0 0 100% 0);transform:translateY(.35em)}to{clip-path:inset(0 0 -20% 0);transform:none}}