/* Scroll-driven motion layer. Everything here is disabled for reduced motion. */
.statement { padding:70px 28px 10px; }
.statement p { font:400 38px/1.12 var(--display); letter-spacing:-.02em; text-wrap:balance; }
.statement .w { opacity:.2; transition:opacity .25s linear; }
.statement .w.hot { color:var(--lime); }

/* hero follows the scroll */
.hero-photo { transform:translate3d(0,calc(var(--sy,0) * .18px),0) scale(calc(1.06 + var(--sy,0) * .00035)); }
.hero-copy { opacity:calc(1 - var(--sy,0) * .0016); transform:translate3d(0,calc(var(--sy,0) * -.08px),0); }
.brand { opacity:calc(1 - var(--sy,0) * .004); }

/* section headings wipe in */
.js h2.mask { clip-path:inset(0 0 100% 0); transform:translateY(18px); transition:clip-path .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.js .in h2.mask, .js h2.mask.in { clip-path:inset(0 0 -20% 0); transform:none; }

/* steps light up as you reach them, with a line that fills */
.steps { position:relative; }
.steps::before { content:""; position:absolute; left:41px; top:30px; bottom:30px; width:2px; background:#ffffff1c; }
.steps::after { content:""; position:absolute; left:41px; top:30px; width:2px; height:calc((100% - 60px) * var(--fill,0)); background:var(--lime); }
.steps li { position:relative; z-index:1; opacity:.4; transform:translateX(-8px); transition:opacity .5s, transform .5s, border-color .5s; }
.steps li.on { opacity:1; transform:none; border-color:#dcff0055; }
.steps li.on b { color:var(--lime); }
.steps li b { transition:color .4s; background:#171717; }

/* checklist ticks pop in one by one */
.checks li { opacity:0; transform:translateX(-18px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 120ms); }
.inside.in .checks li { opacity:1; transform:none; }
.checks .icon { transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay:calc(var(--i,0) * 120ms + 250ms); }
.inside.in .checks .icon { transform:none; }

/* portrait unveils */
.js .about img { clip-path:inset(0 100% 0 0); transform:scale(1.18); transition:clip-path 1.1s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1); }
.js .about.in img { clip-path:inset(0); transform:none; }

/* destination previews drift inside their frames */
.destination-image img { transform:translate3d(0,var(--py,0px),0) scale(1.18); will-change:transform; }
.book-art img { transform:rotate(-7deg) rotateY(var(--ry,-12deg)) rotateX(var(--rx,0deg)); transition:transform .15s linear; }
.book-card:hover .book-art img { transform:rotate(-2deg) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); }

/* cards tilt toward the cursor (fine pointers only) */
@media (pointer:fine) {
 .resource, .steps li, .stats li { transform-style:preserve-3d; }
 .tilt { transform:perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--lift,0px)); }
 .magnet { transition:transform .25s cubic-bezier(.16,1,.3,1); }
}

/* quiz options and unlocks arrive one after another */
.q-opt { animation:optin .5s cubic-bezier(.16,1,.3,1) backwards; }
.q-opt:nth-child(2) { animation-delay:.07s; }
.q-opt:nth-child(3) { animation-delay:.14s; }
@keyframes optin { from { opacity:0; transform:translateX(26px); } }
.bd-row i { transition:width 1s cubic-bezier(.16,1,.3,1); }

/* final card: headline lines rise as it enters */
.glow-card { transform:scale(.96); transition:transform .9s cubic-bezier(.16,1,.3,1); }
.final.in .glow-card { transform:none; }

/* faq opens smoothly */
.faq details p { animation:faq .35s cubic-bezier(.16,1,.3,1); }
@keyframes faq { from { opacity:0; transform:translateY(-6px); } }

@media(max-width:680px) {
 .statement { padding:56px 18px 4px; }
 .statement p { font-size:33px; }
 .steps::before, .steps::after { left:37px; }
}
@media(prefers-reduced-motion:reduce) {
 .statement .w { opacity:1; }
 .hero-copy, .brand { opacity:1; transform:none; }
 .js h2.mask { clip-path:none; transform:none; }
 .steps li, .checks li, .checks .icon { opacity:1; transform:none; }
 .js .about img { clip-path:none; transform:none; }
 .destination-image img { transform:scale(1.05); }
 .glow-card { transform:none; }
}