/* Motion revision: entrances, camera depth, scroll zoom, and Compass footprints. */
:root{--arrival:cubic-bezier(.16,1,.3,1);--pop:cubic-bezier(.2,.85,.25,1.12)}
.hero-person .character,.about-eight,.faq-compass,.hero-sign,.hero-lab img,.hero-star,.small-star{animation:none}
.hero-team{animation:none;transform:none}
.hero-content>*{animation:none}
.hero-content{translate:0 calc(var(--hero-progress,0)*-65px)}
.hero-road{scale:calc(1 + var(--hero-progress,0)*.18);translate:0 calc(var(--hero-progress,0)*90px);transform-origin:75% 60%}
.hero-me{translate:calc(var(--hero-progress,0)*-36px) calc(var(--hero-progress,0)*70px);scale:calc(1 + var(--hero-progress,0)*.12)}
.hero-you{translate:calc(var(--hero-progress,0)*52px) calc(var(--hero-progress,0)*120px);scale:calc(1 + var(--hero-progress,0)*.16)}
.hero-eight{translate:calc(var(--hero-progress,0)*14px) calc(var(--hero-progress,0)*-52px);scale:calc(1 - var(--hero-progress,0)*.05)}
.hero-compass{translate:calc(var(--hero-progress,0)*-24px) calc(var(--hero-progress,0)*160px);scale:calc(1 + var(--hero-progress,0)*.2)}
.hero-lab{scale:calc(1 + var(--hero-progress,0)*.16);translate:0 calc(var(--hero-progress,0)*68px);transform-origin:70% 62%}
.hero-star{rotate:calc(var(--hero-progress,0)*110deg)}
.hero-sign{translate:0 calc(var(--hero-progress,0)*-70px)}
.lab-light{animation:none;scale:calc(.9 + var(--hero-progress,0)*.9);opacity:calc(.6 - var(--hero-progress,0)*.3)}
.lab-ring{animation:none;rotate:calc(var(--hero-progress,0)*35deg)}

html[data-motion=playing] .hero-kicker{animation:copy-arrive .8s .08s var(--arrival) both}
html[data-motion=playing] .hero h1{animation:headline-arrive 1.05s .16s var(--arrival) both}
html[data-motion=playing] .hero-description{animation:copy-arrive .9s .48s var(--arrival) both}
html[data-motion=playing] .hero-link{animation:copy-arrive .9s .6s var(--arrival) both}
html[data-motion=playing] .hero-person .character{animation:character-arrive 1.15s var(--pop) both}
.hero-me .character{--arrival-x:-95px;--arrival-y:100px;--arrival-turn:-13deg;animation-delay:.18s!important}
.hero-you .character{--arrival-x:120px;--arrival-y:115px;--arrival-turn:12deg;animation-delay:.3s!important}
.hero-eight .character{--arrival-x:40px;--arrival-y:-100px;--arrival-turn:14deg;animation-delay:.12s!important}
.hero-compass .character{--arrival-x:-45px;--arrival-y:130px;--arrival-turn:-12deg;animation-delay:.43s!important}
html[data-motion=playing] .hero-lab img{animation:lab-arrive 1.5s var(--arrival) both}
@keyframes copy-arrive{from{opacity:0;translate:0 38px}to{opacity:1;translate:0 0}}
@keyframes headline-arrive{from{opacity:0;translate:0 65px;scale:.94;clip-path:inset(0 0 100%)}to{opacity:1;translate:0 0;scale:1;clip-path:inset(0)}}
@keyframes character-arrive{from{opacity:0;transform:translate(var(--arrival-x),var(--arrival-y)) scale(.55) rotate(var(--arrival-turn))}to{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes lab-arrive{from{opacity:.35;scale:1.17}to{opacity:1;scale:1}}

/* A's cast fills the stage. Compass is in the foreground, 8 behind the people. */
[data-theme=A] .hero-content{width:55%;padding-top:185px}
[data-theme=A] .hero-first{font-size:clamp(30px,2.8vw,43px)}
[data-theme=A] .hero-big{font-size:clamp(92px,9.2vw,148px);line-height:1.04;letter-spacing:-.075em}
[data-theme=A] .hero-description{font-size:19px;margin-top:29px}
[data-theme=A] .hero-team{inset:110px -70px -70px 43%;max-width:none}
[data-theme=A] .hero-me{width:78%;left:-15%;bottom:19%;transform:rotate(-8deg);z-index:2}
[data-theme=A] .hero-you{width:82%;right:-14%;bottom:5%;transform:rotate(7deg);z-index:3}
[data-theme=A] .hero-eight{width:42%;right:13%;top:-4%;transform:rotate(8deg);z-index:1}
[data-theme=A] .hero-compass{width:55%;left:7%;bottom:-3%;transform:rotate(-10deg);z-index:4}
[data-theme=A] .hero-sign{top:113px;right:auto;left:var(--gutter);padding:5px 13px;transform:rotate(-4deg)}
[data-theme=A] .hero-sign span{font-size:9px}
[data-theme=A] .hero-sign b{font-size:15px}
[data-theme=A] .hero-star{display:none}
[data-theme=A] .hero-orbit{opacity:.6}
[data-theme=A] .star-one{right:5%;top:25%;width:47px}
[data-theme=A] .star-two{right:56%;bottom:13%;width:30px}

/* Reveal effects are attached to small readable groups, rather than whole sections. */
.motion-ready .motion-reveal{opacity:0;translate:0 52px;scale:1;transition:opacity .75s var(--arrival),translate 1s var(--arrival),scale 1s var(--arrival);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .motion-reveal[data-reveal=pop]{translate:0 18px;scale:.55;transition-timing-function:var(--pop);transition-duration:.7s}
.motion-ready .motion-reveal[data-reveal=card]{translate:0 72px;scale:.93;transition-duration:.9s}
.motion-ready .motion-reveal[data-reveal=note]{translate:0 80px;scale:.91;transition-duration:1s}
.motion-ready .motion-reveal.is-visible{opacity:1;translate:0 0;scale:1}
[data-scrub]{--view-progress:0;transform-origin:50% 65%;will-change:translate,scale}
[data-scrub=character]{scale:calc(.74 + var(--view-progress)*.26);translate:0 calc((1 - var(--view-progress))*105px)}
[data-scrub=screen]{scale:calc(.84 + var(--view-progress)*.16);translate:0 calc((1 - var(--view-progress))*95px);rotate:calc((1 - var(--view-progress))*-6deg)}
[data-scrub=portrait]{scale:calc(.7 + var(--view-progress)*.3);translate:calc((1 - var(--view-progress))*55px) calc((1 - var(--view-progress))*120px)}
[data-scrub=team]{scale:calc(.88 + var(--view-progress)*.12);translate:0 calc((1 - var(--view-progress))*50px)}

/* An independent narrow lane leaves all four steps readable. */
.compass-trail{position:absolute;left:0;top:35px;bottom:35px;width:116px;pointer-events:none;z-index:0}
.paw-trail{display:block;width:100%;height:100%;overflow:visible}
.paw-print{fill:var(--yellow);stroke:var(--navy);stroke-width:.55;opacity:0;scale:.55;transform-box:fill-box;transform-origin:center;transition:opacity .18s,scale .3s var(--pop),fill .2s}
.paw-print.is-printed{opacity:1;scale:1}
.paw-print.is-leading{fill:var(--navy);stroke:var(--navy);scale:1.18}
[data-theme=A] .flow-steps{padding-left:145px}
[data-theme=A] .flow-step,[data-theme=A] .flow-step:nth-of-type(even){padding:46px 0;grid-template-columns:128px 1fr 1fr;gap:28px}
[data-theme=A] .flow-step h3{font-size:27px}
[data-theme=A] .step-number{font-size:76px}

html[data-motion=paused] .motion-reveal{opacity:1;translate:0 0;scale:1}
html[data-motion=paused] .hero-content,html[data-motion=paused] .hero-person,html[data-motion=paused] .hero-road,html[data-motion=paused] .hero-lab,html[data-motion=paused] .hero-sign{translate:0 0;scale:1}
html[data-motion=paused] .hero-person .character,html[data-motion=paused] .hero-lab img{animation:none;opacity:1;transform:none;scale:1}
html[data-motion=paused] [data-scrub]{translate:0 0;scale:1;rotate:0deg}
html[data-motion=paused] .paw-print{opacity:1;scale:1}

@media(max-width:1190px){
 [data-theme=A] .hero-content{padding-top:170px}
 [data-theme=A] .hero-big{font-size:clamp(86px,9.2vw,113px)}
 [data-theme=A] .hero-team{left:44%;right:-60px;top:175px;bottom:-30px}
 [data-theme=A] .hero-me{bottom:18%}
 [data-theme=A] .hero-eight{top:-10%}
 [data-theme=A] .hero-sign{top:110px}
 [data-theme=A] .flow-steps{padding-left:100px}
 .compass-trail{width:80px}
 [data-theme=A] .flow-step,[data-theme=A] .flow-step:nth-of-type(even){grid-template-columns:100px 1fr 1fr;gap:22px}
 [data-theme=A] .step-number{font-size:64px}
 [data-theme=A] .flow-step h3{font-size:23px}
}
@media(min-width:701px) and (max-width:980px){
 [data-theme=A] .hero{min-height:800px;height:800px}
 [data-theme=A] .hero-content{width:64%;padding-top:185px}
 [data-theme=A] .hero-big{font-size:82px}
 [data-theme=A] .hero-description{font-size:15px}
 [data-theme=A] .hero-team{left:40%;right:-60px;top:180px;bottom:20px}
 [data-theme=A] .hero-me{width:70%;left:-11%;bottom:15%}
 [data-theme=A] .hero-you{width:76%;right:-3%;bottom:2%}
 [data-theme=A] .hero-eight{width:35%;right:11%;top:0}
 [data-theme=A] .hero-compass{width:45%;left:12%;bottom:8%}
 [data-theme=A] .hero-sign{top:120px}
 [data-theme=A] .flow-step,[data-theme=A] .flow-step:nth-of-type(even){grid-template-columns:80px 1fr;gap:22px}
 [data-theme=A] .step-description{grid-column:2}
}
@media(max-width:700px){
 [data-theme=A] .hero{height:900px}
 [data-theme=A] .hero-content{width:100%;padding:120px 24px 0}
 [data-theme=A] .hero-first{font-size:26px;margin-bottom:10px}
 [data-theme=A] .hero-big{font-size:clamp(64px,17.5vw,94px);line-height:1.08;letter-spacing:-.065em}
 [data-theme=A] .hero-description{font-size:14px;margin-top:20px;line-height:1.85}
 [data-theme=A] .hero-team{inset:420px -12px 0;max-width:560px}
 [data-theme=A] .hero-me{width:86%;left:-16%;bottom:29%}
 [data-theme=A] .hero-you{width:92%;right:-17%;bottom:10%}
 [data-theme=A] .hero-eight{width:43%;right:10%;top:-4%}
 [data-theme=A] .hero-compass{width:58%;left:9%;bottom:8%}
 [data-theme=A] .hero-sign{display:none}
 [data-theme=A] .star-one{right:5%;top:44%;width:28px}
 [data-theme=A] .star-two{left:4%;right:auto;bottom:22%;width:24px}
 .hero-content{translate:0 calc(var(--hero-progress,0)*-35px)}
 .hero-compass{translate:0 calc(var(--hero-progress,0)*65px);scale:calc(1 + var(--hero-progress,0)*.1)}
 .hero-you{translate:0 calc(var(--hero-progress,0)*50px);scale:calc(1 + var(--hero-progress,0)*.07)}
 .hero-me{translate:0 calc(var(--hero-progress,0)*30px);scale:calc(1 + var(--hero-progress,0)*.05)}
 .hero-eight{translate:0 calc(var(--hero-progress,0)*-30px)}
 [data-theme=A] .flow-steps{padding-left:59px}
 .compass-trail{width:44px;left:-6px;top:25px;bottom:30px}
 [data-theme=A] .flow-step,[data-theme=A] .flow-step:nth-of-type(even){display:grid;grid-template-columns:1fr;padding:32px 0;gap:17px}
 [data-theme=A] .step-number{font-size:52px;display:flex;align-items:center;gap:17px}
 [data-theme=A] .step-number span{font-size:19px;margin:0}
 [data-theme=A] .flow-step h3{font-size:23px;letter-spacing:-.055em}
 [data-theme=A] .step-description{grid-column:auto}
 .motion-ready .motion-reveal{translate:0 35px}
 [data-scrub=character]{scale:calc(.8 + var(--view-progress)*.2);translate:0 calc((1 - var(--view-progress))*65px)}
 [data-scrub=portrait]{scale:calc(.8 + var(--view-progress)*.2);translate:0 calc((1 - var(--view-progress))*75px)}
}
@media(max-width:370px){
 [data-theme=A] .hero{height:860px}
 [data-theme=A] .hero-content{padding-inline:20px}
 [data-theme=A] .hero-first{font-size:23px}
 [data-theme=A] .hero-big{font-size:60px}
 [data-theme=A] .hero-description{font-size:13px}
 [data-theme=A] .hero-team{top:407px;bottom:6px}
 [data-theme=A] .hero-eight{top:0}
 [data-theme=A] .hero-compass{bottom:27%}
 [data-theme=A] .flow-steps{padding-left:48px}
 .compass-trail{width:36px}
 [data-theme=A] .flow-step h3{font-size:21px}
}
@media(min-width:981px) and (max-height:800px){
 [data-theme=A] .hero-compass{bottom:9%}
}
@media print{.motion-ready .motion-reveal{opacity:1;translate:0 0;scale:1}[data-scrub]{translate:0 0;scale:1}.paw-print{opacity:1;scale:1}}