/* Leonida FX · the motion layer of the landing page (driven by fx/fx.mjs).
   Base CSS in launch.css is the complete static page; everything here only adds movement on top.
   .fx = the module runs · .fx-still = reduced motion (end states only) · .fx-intro = first visit of the session. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* ---------- Shader canvases ---------- */
.hero-gl,.map-water{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity 900ms var(--ease-out);pointer-events:none}
.hero-gl{z-index:-2}
.map-water{z-index:-1}
.hero-gl.ready,.map-water.ready{opacity:1}
.hero-scene{transition:opacity 600ms var(--ease-out)}

/* ---------- Intro: letterbox opens, then the type arrives ---------- */
.fx-intro .hero{background:var(--ink-950)}
.fx-intro .hero-scene{opacity:0}
.fx-intro .hero-gl{transition:none}
.fx-intro .hero{--intro-delay:1250ms}
.fx-intro .hero-script[data-wipe]{transition-delay:1500ms}
.fx-intro .hero-copy [data-reveal]{transition-delay:calc(1800ms + var(--i,0)*90ms)}
.fx-intro .hero-device .phone{transition-delay:2000ms}
.fx-intro .site-header{animation:fx-fade 900ms var(--ease-out) 1700ms both}
@keyframes fx-fade{from{opacity:0;translate:0 -12px}}

/* ---------- Split type ---------- */
.split .w{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block}
.fx [data-split][data-wipe]{clip-path:none!important;transition:none}

/* Hero: LEONIDA rises out of the haze, then drifts apart while the hero scrolls away. */
.fx .hero h1 .ch{transform-origin:50% 100%;translate:0 calc(var(--hp,0)*var(--drift,0)*-260px);rotate:calc(var(--hp,0)*var(--drift,0)*-10deg);transition:transform 1200ms var(--ease-out),opacity 800ms ease,filter 1000ms var(--ease-out);transition-delay:calc(var(--intro-delay,0ms) + 200ms + var(--i)*60ms)}
.fx:not(.fx-still) .hero h1:not(.in) .ch{opacity:0;transform:translateY(55%) scaleY(1.35);filter:blur(14px)}
.fx:not(.fx-still) .hero-copy{translate:0 calc(var(--hp,0)*150px);opacity:calc(1 - var(--hp,0)*1.5)}
.fx:not(.fx-still) .hero-device{translate:0 calc(var(--hp,0)*-110px);transform:perspective(1400px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform 900ms var(--ease-out)}

/* Section headlines rise letter by letter out of their line. */
.fx main h2[data-split] .w{overflow:hidden;padding:.16em .04em .04em;margin:-.16em -.04em -.04em;vertical-align:top}
.fx main h2[data-split] .ch{transition:transform 900ms var(--ease-out);transition-delay:calc(80ms + var(--i)*26ms)}
.fx:not(.fx-still) main h2[data-split]:not(.in) .ch{transform:translateY(112%) rotate(8deg)}
.eyebrow .split .w{white-space:pre}

/* ---------- Header: floating glass bar with reading progress ---------- */
.fx .site-header{transition:translate 420ms var(--ease-out)}
.fx .site-header.is-floating{position:fixed;inset:12px auto auto 50%;width:min(1240px,calc(100% - 32px));margin:0;padding:8px 8px 8px 22px;gap:20px;transform:translateX(-50%);border-radius:24px;background:rgba(11,7,16,.6);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 0 0 1px rgba(255,246,236,.12),inset 0 1px 0 rgba(255,255,255,.08),0 22px 44px -22px rgba(0,0,0,.7);animation:header-drop 560ms var(--ease-out)}
.fx .site-header.is-floating.is-hidden{translate:0 calc(-100% - 28px)}
@keyframes header-drop{from{translate:0 calc(-100% - 28px)}}
.header-progress{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:1px;background:var(--accent);transform-origin:left;transform:scaleX(var(--sp,0));opacity:0;transition:opacity var(--base) var(--ease);pointer-events:none}
.is-floating .header-progress{opacity:1}
[data-theme=light] .site-header.is-floating{background:rgba(255,250,244,.8);color:var(--text);box-shadow:inset 0 0 0 1px rgba(29,21,41,.1),inset 0 1px 0 #fff,0 22px 44px -24px rgba(107,47,160,.4)}
[data-theme=light] .site-header.is-floating .wordmark-secondary{color:var(--text-2);border-color:rgba(29,21,41,.25)}
[data-theme=light] .site-header.is-floating nav a{color:var(--text-2)}
[data-theme=light] .site-header.is-floating nav a:hover{color:var(--text)}
[data-theme=light] .site-header.is-floating .nav-launch{color:var(--text);box-shadow:inset 0 0 0 1px rgba(29,21,41,.3)}
[data-theme=light] .site-header.is-floating .nav-launch:hover{background:rgba(29,21,41,.06)}
[data-theme=light] .landing .site-header.is-floating .theme-switch{background:rgba(29,21,41,.07);box-shadow:inset 0 0 0 1px rgba(29,21,41,.18);color:var(--text)}
[data-theme=light] .site-header.is-floating .language-picker summary{color:var(--text)}

/* ---------- Tapes: two crossing bands that run with your scroll ---------- */
.tapes{position:relative;z-index:2;height:190px;margin:16px 0 -56px;overflow:hidden;pointer-events:none}
.tape{position:absolute;left:-6%;right:-6%;top:50%;padding:13px 0;overflow:hidden}
.tape-a{z-index:1;background:var(--accent);color:var(--ink-950);transform:translateY(-50%) rotate(-3deg);box-shadow:0 20px 44px -20px rgba(255,46,136,.7)}
.tape-b{background:var(--text);color:var(--page);transform:translateY(-50%) rotate(2.2deg)}
.tape-track{display:flex;align-items:center;gap:26px;width:max-content;padding-left:26px;will-change:transform}
.tape-track span{font:400 34px/1 var(--font-display);text-transform:uppercase;white-space:nowrap;padding-top:2px}
.tape .keycap{--k:30px}
.tape-a .keycap{--cap-bg:var(--ink-950);--cap-fg:var(--paper-100);--cap-edge:#000}
[data-theme=light] .tape-a{color:#fff;box-shadow:0 20px 44px -22px rgba(212,16,106,.6)}
[data-theme=light] .tape-a .keycap{--cap-bg:#fff;--cap-fg:var(--accent);--cap-edge:var(--paper-300)}
[data-theme=light] .tape-b .keycap{--cap-bg:var(--paper-100);--cap-fg:var(--ink-950);--cap-edge:var(--paper-300)}

/* ---------- Bento: features ---------- */
@media (min-width:1181px){.feature-grid{grid-auto-rows:minmax(232px,auto)}.feature-grid>li:has(.is-hero){grid-column:span 2;grid-row:span 2}.feature-grid>li:has(.is-wide){grid-column:span 2}}
@media (max-width:1180px){.feature-grid>li:has(.is-hero),.feature-grid>li:has(.is-wide){grid-column:span 2}}
.fx .feature{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 520ms var(--ease-out),box-shadow var(--base) var(--ease)}
@media (hover:hover){.fx .feature:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}}
.fx .feature::before,.fx .feature::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity 300ms var(--ease-out);pointer-events:none}
.fx .feature::before{padding:1.5px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--accent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx .feature::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,46,136,.14),transparent 62%)}
@media (hover:hover){.fx .feature:hover::before,.fx .feature:hover::after{opacity:1}}

/* The map card: a little live map. The route draws when the card arrives, the markers land on it. */
.feature.is-hero{gap:12px}
.bento-map{position:relative;flex:1;min-height:220px;margin:-12px -12px 14px;border-radius:20px;overflow:hidden;background:linear-gradient(155deg,#1D6B6E 0%,#24486B 40%,#2A1F5E 78%,#170D2E);box-shadow:inset 0 0 0 1px rgba(255,246,236,.1)}
.bento-map svg{position:absolute;inset:0;width:100%;height:100%}
.bm-land{fill:rgba(11,7,16,.32);stroke:rgba(255,246,236,.32);stroke-width:1.3;vector-effect:non-scaling-stroke}
.bm-road{fill:none;stroke:rgba(255,246,236,.24);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bm-route{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1700ms var(--ease-io) 1500ms}
.bm-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);transition:translate 640ms var(--ease-out),opacity 420ms ease;transition-delay:calc(500ms + var(--d)*360ms)}
.bm-pin .keycap{--k:34px}
.bm-pin::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px solid var(--accent);opacity:0}
.feature-grid>li.in .bm-pin::after{animation:pin-ping 900ms var(--ease-out) calc(1000ms + var(--d)*360ms) both}
.fx:not(.fx-still) .feature-grid>li:not(.in) .bm-route{stroke-dashoffset:1}
.fx:not(.fx-still) .feature-grid>li:not(.in) .bm-pin{translate:0 -28px;opacity:0}
@media (hover:hover){.fx .is-hero:hover .bm-route{stroke-dasharray:.03 .025;animation:route-march 1.4s linear infinite;transition:none}}
@keyframes route-march{to{stroke-dashoffset:-.11}}
[data-theme=light] .bento-map{background:linear-gradient(155deg,#BDEBE4 0%,#9ED7DD 42%,#B6C8EE 78%,#D7C6F0);box-shadow:inset 0 0 0 1px rgba(29,21,41,.08)}
[data-theme=light] .bm-land{fill:#FFF3E3;stroke:rgba(29,21,41,.3)}
[data-theme=light] .bm-road{stroke:rgba(29,21,41,.3)}

/* The search card types its query. */
.bento-search{display:flex;align-items:center;gap:12px;height:52px;margin:-4px 0 10px;padding:0 18px;border-radius:14px;background:rgba(11,7,16,.38);box-shadow:inset 0 0 0 1px var(--line-strong)}
.bento-search svg{width:20px;height:20px;margin:0;fill:none;stroke:var(--text-3);stroke-width:2}
.bento-typed{font:500 19px/1 var(--font-body);color:var(--text);white-space:nowrap;clip-path:inset(-4px 0 -4px 0)}
.bento-caret{width:2px;height:22px;margin-left:-8px;background:var(--accent);animation:caret 1060ms steps(1) 5}
@keyframes caret{50%{opacity:0}}
.fx:not(.fx-still) .feature-grid>li.in .bento-typed{animation:type 1300ms steps(15,end) 900ms both}
@media (hover:hover){.fx:not(.fx-still) .is-wide:hover .bento-typed{animation:type-again 1100ms steps(15,end) both}}
@keyframes type{from{clip-path:inset(-4px 100% -4px 0)}}
@keyframes type-again{from{clip-path:inset(-4px 100% -4px 0)}}
[data-theme=light] .bento-search{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(29,21,41,.14)}

/* Small reactions per card: the icon does what the feature does. */
.feature>svg{transform-box:fill-box;transform-origin:center}
.feature>svg *{transition:stroke-dashoffset 900ms var(--ease) calc(420ms + var(--i,0)*60ms),fill 300ms var(--ease-out),transform 500ms var(--ease-out)}
@media (hover:hover){
 .feature[href$="#missions"]:hover>svg{animation:flag 900ms var(--ease-out)}
 .feature[href$="#saved"]:hover>svg path{fill:var(--accent)}
 .feature[href$="#systems"]>svg rect{transform-box:fill-box;transform-origin:center}
 .feature[href$="#systems"]:hover>svg rect{transform:rotate(90deg)}
 .feature[href$="#systems"]:hover>svg rect:nth-child(2){transition-delay:60ms}
 .feature[href$="#systems"]:hover>svg rect:nth-child(3){transition-delay:120ms}
 .feature[href$="#systems"]:hover>svg rect:nth-child(4){transition-delay:180ms}
 .feature[href$="#milestones"]:hover>svg{animation:trophy 700ms var(--ease-out)}
 .is-spoiler>svg path:last-child{transition:stroke-dashoffset 420ms var(--ease-out)}
 .is-spoiler:hover>svg path:last-child{stroke-dashoffset:1}
}
@keyframes flag{30%{transform:rotate(-10deg) translateY(-2px)}65%{transform:rotate(6deg)}}
@keyframes trophy{40%{transform:translateY(-5px) rotate(-8deg)}}

/* ---------- Map ---------- */
.fx .map-chart{transition:clip-path 1700ms var(--ease-io) 250ms}
.fx:not(.fx-still) .map-shell:not(.in) .map-chart{clip-path:circle(0% at 23% 28%)}
.fx:not(.fx-still) .map-shell:not(.in) .map-chart{clip-path:circle(0% at 23% 28%)}
.fx .map-shell.in .map-chart{clip-path:circle(150% at 23% 28%)}
.fx .map-pin{transition:transform 560ms var(--ease),translate 720ms var(--ease-out),opacity 480ms ease;transition-delay:0s,calc(1100ms + var(--k,0)*150ms),calc(1100ms + var(--k,0)*150ms)}
.map-pin:nth-child(2){--k:1}.map-pin:nth-child(3){--k:2}.map-pin:nth-child(4){--k:3}
.fx:not(.fx-still) .map-shell:not(.in) .map-pin{translate:0 -40px;opacity:0}
/* ---------- Reading room: the page turns over, the stack fans out ---------- */
.reading-spread{position:relative}
.page-ghost{position:absolute;z-index:3;margin:0;transform-origin:left center;backface-visibility:hidden;pointer-events:none}
.page-ghost::before{display:none}
.page-ghost::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(29,21,41,0),rgba(29,21,41,.28));animation:fx-shade 760ms var(--ease-io) both}
@keyframes fx-shade{from{opacity:0}}
.fx .reading-page::before{transition:transform 1200ms var(--ease-out) 700ms}
.fx:not(.fx-still) .reading-page:not(.in)::before{transform:none}

/* ---------- Pocket: pinned scene, the phones fan out as you scroll ---------- */
.pocket.is-pinned .pocket-pin{height:250vh;margin-top:-6vh}
.pocket.is-pinned .pocket-sticky{position:sticky;top:0;display:flex;align-items:center;height:100vh;height:100svh}
.pocket.is-pinned .pocket-phone{translate:calc((1 - var(--fan,0))*var(--fx,0%)) calc((1 - var(--fan,0))*var(--fy,0px));rotate:calc((1 - var(--fan,0))*var(--fr,0deg));scale:calc(.88 + var(--fan,0)*.12)}
.pocket.is-pinned .pocket-phone:nth-child(1){--fx:106%;--fy:36px;--fr:-9deg;z-index:1}
.pocket.is-pinned .pocket-phone:nth-child(2){--fy:-72px;z-index:2}
.pocket.is-pinned .pocket-phone:nth-child(3){--fx:-106%;--fy:36px;--fr:9deg;z-index:1}
.pocket.is-pinned .pocket-phone figcaption{opacity:var(--fan,0)}
.pocket.is-pinned:not(.charged) .ring-fill{stroke-dashoffset:100}
.pocket.is-pinned:not(.charged) .bar-row i::after,.pocket.is-pinned:not(.charged) .set-bar{transform:scaleX(0)}
.pocket.is-pinned:not(.charged) .switch{background:var(--raised)}
.pocket.is-pinned:not(.charged) .switch::after{transform:translateX(-26px);background:var(--text-3)}

/* ---------- Date: odometer roll, the sunset is this screen's brand moment ---------- */
.date-mark time{display:inline-flex}
.roll-row{display:inline-flex;align-items:center}
.roll-dot{align-self:center}
.roll{--rh:1.25em;position:relative;display:inline-block;height:var(--rh);margin-block:calc((.8em - var(--rh))/2);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.roll-size{display:block;visibility:hidden;line-height:var(--rh)}
.roll-strip{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;transform:translateY(calc(var(--n)*var(--rh)*-1));transition:transform 1900ms var(--ease);transition-delay:calc(250ms + var(--i)*120ms)}
.roll-strip span{display:block;height:var(--rh);line-height:var(--rh);text-align:center}
.roll-strip span,.roll-dot{background:linear-gradient(180deg,var(--sun-gold),var(--sun-tangerine) 40%,var(--sun-flamingo) 72%,var(--sun-orchid));-webkit-background-clip:text;background-clip:text;color:transparent}
.fx:not(.fx-still) .date-mark:not(.in) .roll-strip{transform:none}

/* ---------- Footer: the coast settles, the call to action waves ---------- */
.fx .coastal-photo{transform:scale(calc(1.16 - var(--fp,1)*.16));transform-origin:70% 85%}
.fx .footer-cta .w{overflow:hidden;padding:.14em .03em .03em;margin:-.14em -.03em -.03em;vertical-align:top}
.fx .footer-cta .ch{transition:transform 900ms var(--ease-out);transition-delay:calc(var(--i)*30ms)}
.fx:not(.fx-still) .coastal-footer:not(.in) .footer-cta .ch{transform:translateY(112%)}
@media (hover:hover){.fx:not(.fx-still) .footer-cta:hover .ch{animation:cta-wave 760ms var(--ease-out) calc(var(--i)*30ms)}}
@keyframes cta-wave{40%{transform:translateY(-16%) rotate(-4deg)}}

/* ---------- Magnetic actions ---------- */
.magnetic{transition-property:background-color,box-shadow,color,translate,transform;transition-duration:var(--fast),var(--fast),var(--fast),420ms,var(--fast);transition-timing-function:var(--ease-out)}

/* ---------- Questions open smoothly ---------- */
@supports selector(::details-content){
 :root{interpolate-size:allow-keywords}
 .fx:not(.fx-still) .question-list details::details-content{block-size:0;overflow:hidden;transition:block-size 460ms var(--ease-out),content-visibility 460ms allow-discrete}
 .fx:not(.fx-still) .question-list details[open]::details-content{block-size:auto}
}

/* ---------- Small screens ---------- */
@media (max-width:900px){
 .tapes{height:150px;margin:8px 0 -40px}
 .tape-track span{font-size:26px}
 .tape .keycap{--k:26px}
 .fx .site-header.is-floating{padding:6px 6px 6px 16px;gap:10px;border-radius:20px}
}
@media (max-width:600px){
 .tape-a{top:38%}
 .tape-b{top:66%}
 .fx .site-header.is-floating .wordmark-secondary{display:none}
 .fx .site-header.is-floating .wordmark-name{font-size:18px;line-height:.95}
 .bento-map{min-height:180px;margin:-4px -4px 10px;border-radius:16px}
 .bm-pin .keycap{--k:28px}
 .bento-search{height:46px;padding:0 14px}
 .bento-typed{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
 .fx .feature,.fx .feature:hover{transform:none}
 .bento-caret{animation:none}
}