/* Sussydle landing (markup in index.html, motion in landing.js): the scroll story signed-out visitors see.
   Off unless the head script puts .landing on <html>. Every scene's resting CSS is its finished state,
   so reduced motion (or GSAP failing to load) is simply a normal scrolling page. With .ld-anim on <html>
   the stage pins and scrolling scrubs each scene's --p from 0 to 1. */
.ld{display:none}
html.landing body.signed-out{padding:0}
html.landing body.signed-out .ld{display:block}
html.landing .gate{display:none}

.ld{--gut:max(20px,env(safe-area-inset-left,0px));color:var(--ink);overflow-x:clip}
.ld-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:16px var(--gut)}
.ld-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.02em}
.ld-brand svg{width:32px;height:32px}
.ld-ghost{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--ink);font-weight:700;transition:border-color 180ms ease-out,transform 180ms ease-out}
.ld-ghost:hover{border-color:var(--muted);transform:translateY(-1px)}
.ld-bar{display:none}

/* ---------- scenes (finished state) ---------- */
.ld-scene{display:grid;gap:32px;align-items:center;max-width:1200px;margin:0 auto;padding:56px var(--gut)}
.ld-copy{display:flex;flex-direction:column;gap:16px;max-width:600px}
.ld-n{margin:0;font-family:var(--mono);font-size:14px;color:var(--muted);letter-spacing:.06em}
.ld-n b{color:var(--accent);font-size:20px}
.ld h1,.ld h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(40px,8vw,88px);line-height:.95;letter-spacing:-.04em;text-wrap:balance}
.ld-sub{margin:0;font-size:clamp(16px,1.6vw,20px);line-height:1.45;color:var(--muted);max-width:46ch}
.ld-games{margin:0;font-family:var(--mono);font-size:13px;color:var(--muted)}
.ld-vis{position:relative;width:100%;max-width:520px;aspect-ratio:1;justify-self:center;container-type:size}
.ld-hint{display:none}
@media (min-width:900px){.ld-scene{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;min-height:88vh}}

/* 1 · the deck */
.ld-deck{position:absolute;inset:0}
.ld-card{--p:1;position:absolute;left:50%;top:56%;width:60cqmin;height:38cqmin;margin:-19cqmin 0 0 -30cqmin;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;gap:1cqmin;padding:4.5cqmin;border-radius:4cqmin;background:var(--surface);border:1px solid var(--line);box-shadow:0 2cqmin 6cqmin -2cqmin rgba(0,0,0,.5);will-change:transform;
  transform:translate(calc((1 - var(--p)) * var(--sx) * 1cqmin),calc(((1 - var(--p)) * var(--sy) - var(--i) * 2.2) * 1cqmin)) rotate(calc(((1 - var(--p)) * var(--sr) + (var(--i) - 2.5) * 2) * 1deg)) scale(calc(.82 + .18 * var(--p)))}
.ld-card i{position:absolute;left:4.5cqmin;top:4.5cqmin;width:7cqmin;height:7cqmin;border-radius:2cqmin;background:var(--c)}
.ld-card b{font-family:var(--display);font-size:7cqmin;line-height:1;letter-spacing:-.03em}
.ld-card span{font-size:3.6cqmin;color:var(--muted)}

/* 2 · the word grid */
.ld-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(5,15cqmin);gap:2.2cqmin}
.ld-tile{--t:1;--f:1;width:15cqmin;height:15cqmin;perspective:60cqmin}
.ld-tile > div{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(calc(var(--f) * 180deg))}
.ld-tile .f,.ld-tile .b{position:absolute;inset:0;display:grid;place-items:center;border-radius:1.6cqmin;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-family:var(--display);font-weight:800;font-size:8cqmin}
.ld-tile .f{background:var(--surface);border:2px solid var(--line)}
.ld-tile .f span{opacity:var(--t);transform:scale(calc(.5 + .5 * var(--t)))}
.ld-tile .b{transform:rotateX(180deg);background:var(--c);color:var(--ci)}

/* 3 · the globe */
.ld-globe,.ld-plane,.ld-golf{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.ld-globe .sea{fill:var(--surface)}
.ld-globe .rim{fill:none;stroke:var(--line);stroke-width:2}
.ld-globe .grat{fill:none;stroke:var(--line);stroke-width:1}
.ld-globe .land{fill:color-mix(in srgb,var(--muted) 28%,var(--surface))}
.ld-globe .hit{fill:var(--geo)}
.ld-globe .pin circle{fill:var(--accent);stroke:var(--bg);stroke-width:3}
.ld-globe .pin text{fill:var(--ink);font:700 20px var(--body);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:4px}

/* 4 · the plane */
.ld-plane .alt path{fill:none;stroke:var(--line);stroke-dasharray:4 8}
.ld-plane .alt text{fill:var(--muted);font:500 12px var(--mono)}
.ld-plane .trail{fill:none;stroke:var(--sky);stroke-width:4;stroke-linecap:round}
.ld-plane .ticks circle{fill:var(--surface);stroke:var(--line);stroke-width:2}
.ld-plane .ticks circle.on{fill:var(--good);stroke:var(--good)}
.ld-plane .craft{fill:var(--ink)}
.ld-plane .readout{fill:var(--ink);font:700 22px var(--mono);text-anchor:end}

/* 5 · the golf hole */
.ld-golf .hill{fill:color-mix(in srgb,var(--geo) 32%,var(--surface))}
.ld-golf .cup{fill:var(--sunk)}
.ld-golf .pole{stroke:var(--ink);stroke-width:3}
.ld-golf .flag{fill:var(--est)}
.ld-golf .arc{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round;opacity:.7}
.ld-golf .ball{fill:#F7F8FC}
.ld-golf .shadow{fill:rgba(0,0,0,.35)}
.ld-golf .card{fill:var(--muted);font:500 18px var(--mono);text-anchor:middle}
.ld-golf .card tspan{fill:var(--accent);font-weight:700}

/* 6 · the leaderboard */
.ld-board{position:absolute;inset:0;margin:auto;height:fit-content;width:88cqmin;list-style:none;padding:0;display:flex;flex-direction:column;gap:2cqmin}
.ld-board li{--p:1;display:grid;grid-template-columns:7cqmin 1fr auto;align-items:center;gap:3cqmin;padding:3cqmin 4cqmin;border-radius:3cqmin;background:var(--surface);border:1px solid var(--line);font-size:5cqmin;opacity:var(--p);transform:translateX(calc((1 - var(--p)) * 60cqmin))}
.ld-board b{font-family:var(--display);font-weight:800;color:var(--muted)}
.ld-board li:first-child b{color:var(--gold)}
.ld-board span{font-weight:700}
.ld-board em{font-style:normal;font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.ld-board li.me{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* 7 · sign in: the real gate card (moved here by landing.js) */
.ld-signin{aspect-ratio:auto;container-type:normal;display:grid;place-items:center}
.ld-signin .gate-card > h1,.ld-signin .gate-card > p:not(.msg){display:none}

/* ---------- pinned, scrubbed stage ---------- */
html.ld-anim .ld-stage{position:relative;height:100vh;height:100svh;overflow:hidden}
html.ld-anim .ld-top{position:absolute;left:0;right:0;top:0;max-width:none}
html.ld-anim .ld-bar{display:block;position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:2px;background:var(--line);overflow:hidden}
html.ld-anim .ld-bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--prog,0));transform-origin:left}
html.ld-anim .ld-scene{position:absolute;inset:0;padding:96px var(--gut) 24px;grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:16px;pointer-events:none}
html.ld-anim .ld-scene > *{pointer-events:auto}
html.ld-anim .ld-scene:not([data-scene="1"]) > *{visibility:hidden;opacity:0}
html.ld-anim .ld-copy{gap:12px;will-change:transform,opacity}
html.ld-anim .ld-vis,html.ld-anim .ld-board li{will-change:transform,opacity}
html.ld-anim .ld-stage{contain:layout paint}
html.ld-anim .ld h1,html.ld-anim .ld h2{font-size:clamp(32px,min(9.5vw,6.2svh),96px)}
html.ld-anim .ld-vis{aspect-ratio:auto;height:100%;max-width:none;min-height:0}
html.ld-anim .ld-signin{height:auto;align-self:start}
html.ld-anim [data-scene="1"] .ld-card{--p:0}
html.ld-anim .ld-hint{display:block;position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){
  html.ld-anim .ld-scene{max-width:1200px;margin:0 auto;padding:96px var(--gut) 48px;grid-template-rows:none;align-items:center}
  html.ld-anim .ld-vis{height:min(100%,600px);aspect-ratio:1;width:auto;max-width:100%}
  html.ld-anim .ld-signin{height:auto;aspect-ratio:auto;align-self:center}
}