/* Motion layer: paper that gets tossed, taped, stamped and written on. Hidden states live under .mo,
   which is only set when the visitor hasn't asked for reduced motion, so the page always reads fine without it. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.5,.5,1)}

/* hand-drawn doodles (static when motion is off) */
.hero-copy{position:relative}
.dd{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dd path{stroke-width:3}
.dd-arrow{width:84px;right:-10px;bottom:70px;stroke:var(--blue)}
.dd-star{width:46px;right:2%;top:-18px;stroke:var(--tangerine)}
.dd-spark{width:46px;right:12%;top:-30px;stroke:var(--ink)}
.dd-loop{width:150px;right:4%;bottom:16px;stroke:var(--blue)}
.dd-heart{width:36px;left:46%;top:300px;stroke:var(--tangerine);fill:none}
@media (max-width:1180px){.dd-arrow{display:none}}
@media (max-width:940px){.dd-spark,.dd-loop,.dd-heart{display:none}.dd-star{right:0;top:-30px}}
@media (max-width:600px){.dd-star{display:none}}

.scrib{display:none}
.hl{position:relative;display:inline-block}
.hl svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- everything below only runs with motion on ---------- */

/* pencil line under the nav that follows your scroll */
.mo .nav::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--tangerine);transform-origin:0 50%;scale:var(--sp,0) 1}

/* hero: the opening sequence */
.mo .hero h1,.mo .hero-note,.mo .lede,.mo .nametag,.mo .card,.mo .claim-note{animation:none}
.mo .scribble::after{display:none}
.mo .scrib{display:block;position:absolute;left:-4%;right:-6%;bottom:-.08em;width:110%;height:.32em;z-index:-1;overflow:visible}
.mo .scrib path{fill:none;stroke:var(--tangerine);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.mo .dd path{stroke-dasharray:1;stroke-dashoffset:1}

.mo .hero:not(.go) :is(h1,.hero-note,.lede,.nametag,.claim-note,.card){opacity:0}
.w{display:inline-block}
.mo .hero.go h1 .w{animation:word .8s var(--ease) calc(var(--i) * .07s + .1s) backwards}
@keyframes word{from{opacity:0;translate:0 .45em;rotate:6deg}}
.mo .hero.go .scrib path{animation:draw .7s ease-out .85s forwards}
.mo .hero.go .hero-note{animation:write .9s steps(18) 1.15s backwards}
.mo .hero.go .lede{animation:up .8s var(--ease) .55s backwards}
.mo .hero.go .nametag{animation:slap .7s var(--spring) .85s backwards}
.mo .hero.go .claim-note{animation:write .9s steps(20) 1.6s backwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes write{from{clip-path:inset(-30% 100% -30% 0)}to{clip-path:inset(-30% -5% -30% 0)}}
@keyframes slap{0%{opacity:0;scale:1.25;rotate:-7deg;translate:0 -24px}55%{opacity:1;scale:.97;rotate:1deg;translate:0 0}100%{scale:1;rotate:0deg}}

/* cards get tossed onto the table, then taped down */
.mo .c-a{--tx:30vw;--ty:-70vh;--tr:28deg;--d:.35s}
.mo .c-b{--tx:40vw;--ty:-40vh;--tr:-34deg;--d:.55s}
.mo .c-c{--tx:-20vw;--ty:-80vh;--tr:-22deg;--d:.75s}
.mo .hero.go .card{animation:toss 1s cubic-bezier(.2,.7,.25,1) var(--d) backwards}
.mo .hero.go .card .tape{animation:tape .3s ease-out calc(var(--d) + .8s) backwards}
.mo .hero.go .card figcaption{animation:write .8s steps(14) calc(var(--d) + 1.1s) backwards}
@keyframes toss{0%{opacity:0;translate:var(--tx) var(--ty);rotate:var(--tr);scale:1.2}55%{opacity:1}80%{translate:0 0;rotate:0deg;scale:.985}100%{translate:0 0;rotate:0deg;scale:1}}
@keyframes tape{from{opacity:0;scale:.3 1.6}}
.mo .hero.go .dd path{animation:draw .9s ease-out var(--dd,1.6s) forwards}
.mo .dd-star{--dd:1.3s}.mo .dd-spark{--dd:1.9s}.mo .dd-loop{--dd:2.1s}.mo .dd-heart{--dd:2.4s}.mo .dd-arrow{--dd:2.2s}
.mo .dd-arrow path+path{animation-delay:2.9s}

/* cards you can pick up and move around (desktop) */
.mo .collage.play .card{cursor:grab;touch-action:none;user-select:none;transition:transform .35s var(--ease),box-shadow .2s,scale .2s}
.mo .collage.play .card.lift{cursor:grabbing;scale:1.05;box-shadow:12px 16px 0 rgba(22,22,22,.85);transition:transform .35s var(--ease),box-shadow .2s,scale .2s}
.move-note{position:absolute;left:6%;bottom:-86px;transform:rotate(-3deg);font-size:22px!important;color:var(--ink-2)!important;opacity:0;transition:opacity .6s}
.move-note.on{opacity:1}

/* the sample card nods each time a new name lands */
.mo .c-a.bump .mini{animation:bump .5s var(--spring)}
.mo .domain b.flash{animation:flash .9s ease-out}
@keyframes bump{40%{scale:1.03;rotate:-1deg}}
@keyframes flash{0%{background:var(--lime)}100%{background:transparent}}

/* generic paper reveal */
.mo .rv{opacity:0;translate:0 28px;transition:opacity .8s var(--ease) var(--rd,0s),translate .9s var(--ease) var(--rd,0s),transform .35s var(--ease)}
.mo .rv.in{opacity:1;translate:0 0}
.mo h2.split .w{opacity:0;translate:0 .4em;rotate:5deg;transition:opacity .6s var(--ease),translate .8s var(--ease),rotate .8s var(--ease);transition-delay:calc(var(--i) * .06s)}
.mo h2.split.in .w{opacity:1;translate:0 0;rotate:0deg}
.hl path{stroke-width:4;stroke:var(--tangerine)}
.mo .hl path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease-out .5s}
.mo .in .hl path{stroke-dashoffset:0}

/* why: the résumé gets crossed out and pushed aside as the webfolio rises */
.mo .resume{filter:none;rotate:calc(var(--p,0) * -7deg);translate:calc(var(--p,0) * -16px) calc(var(--p,0) * 26px);scale:calc(1 - var(--p,0) * .06);opacity:calc(.9 - var(--p,0) * .3)}
.mo .folio{rotate:calc((1 - var(--p,0)) * 4deg);translate:0 calc((1 - var(--p,0)) * 50px)}
.strike{position:absolute;inset:-6% -4%;width:108%;height:112%;overflow:visible;pointer-events:none;fill:none;stroke:var(--tangerine);stroke-width:4;stroke-linecap:round}
.strike path{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, var(--p,0) * 2.2 - .8, 1))}
.mo .folio li::before{content:none}
.tick{position:absolute;left:-2px;top:2px;width:22px;height:22px;overflow:visible;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.tick path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease-out calc(var(--i) * .22s + .3s)}
.folio.in .tick path{stroke-dashoffset:0}

/* how: a paper plane flies the route and stamps each step */
.flight{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.flight .route{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:7 9;opacity:.45}
.flight .plane{fill:#fff;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.steps.flying::before{display:none}
.steps .num{position:relative;z-index:1}
.mo .steps.flying .num{opacity:.3;scale:.85;transition:opacity .3s,scale .3s}
.mo .steps.flying .num.hit{opacity:1;scale:1;animation:stamp .5s var(--spring)}
@keyframes stamp{0%{scale:1.7;rotate:-14deg;opacity:0}60%{scale:.92;rotate:2deg;opacity:1}100%{scale:1;rotate:0deg}}

/* pricing: tags swing on their hole like they were just hung up */
.mo .tag{transform-origin:50% 24px}
.mo .tag.rv{translate:0 0;transition:opacity .3s}
.mo .tag.in{animation:swing 1.6s cubic-bezier(.3,.6,.4,1) var(--rd,0s) backwards}
.mo .tag.in.hung{animation:none}
.mo .tag.hung.jig{animation:jig .9s ease-out}
@keyframes swing{0%{opacity:0;rotate:-22deg;translate:0 -40px}25%{opacity:1;rotate:12deg;translate:0 0}45%{rotate:-7deg}62%{rotate:4deg}78%{rotate:-2deg}90%{rotate:.8deg}100%{rotate:0deg}}
@keyframes jig{25%{rotate:3.5deg}50%{rotate:-2.5deg}75%{rotate:1deg}}

/* refer: a rubber stamp hits the ticket */
.stamp{position:absolute;right:24px;top:16px;display:flex;align-items:baseline;gap:6px;font:900 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tangerine);border:2.5px solid var(--tangerine);border-radius:6px;padding:5px 9px;rotate:-6deg;pointer-events:none}
.stamp b{font:400 22px/1 var(--serif);letter-spacing:0}
.mo .ticket.rv{translate:30px 0;rotate:6deg;transition:opacity .7s var(--ease),translate .9s var(--ease),rotate .9s var(--ease)}
.mo .ticket.rv.in{translate:0 0;rotate:0deg}
.mo .ticket .stamp{opacity:0}
.mo .ticket.in .stamp{animation:thud .45s cubic-bezier(.5,0,.6,1.4) .9s forwards}
.mo .ticket.in{animation:shake .3s ease-out 1.25s}
@keyframes thud{0%{opacity:0;scale:2.6}70%{opacity:1;scale:.92}100%{opacity:1;scale:1}}
@keyframes shake{30%{translate:-3px 2px}60%{translate:2px -1px}}

/* the letter unfolds, then signs itself */
.mo .book{perspective:1600px}
.mo .letter.rv{translate:0 40px;rotate:x -70deg;transform-origin:50% 0;transition:opacity .6s var(--ease),translate 1.1s var(--ease),rotate 1.1s var(--ease)}
.mo .letter.rv.in{translate:0 0;rotate:x 0deg}
.mo .letter.rv .letter-head,.mo .letter.rv .letter-sign{clip-path:inset(-30% 100% -30% 0)}
.mo .letter.in .letter-head{animation:write .8s steps(16) .7s forwards}
.mo .letter.in .letter-sign{animation:write .7s steps(12) 1.3s forwards}

/* little things */
.heart{cursor:pointer;user-select:none}
.puff{position:fixed;z-index:60;pointer-events:none;color:var(--tangerine);font-size:18px;animation:puff 1.3s ease-out forwards}
@keyframes puff{to{opacity:0;translate:var(--x) -90px;rotate:var(--r);scale:1.6}}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}