/* ============================================================
   AltHub — Mission Control
   A cinematic, scroll-driven WebGL experience.
   One fixed 3D world; the page scrolls the camera through it.
   ============================================================ */
:root{
  --ink:        #07080b;
  --graphite:   #0c0e14;
  --graphite-2: #12151d;
  --steel:      #1b1f2a;
  --accent:     #ff4632;   /* signal red */
  --accent-2:   #ff8a3d;   /* warm amber */
  --accent-deep:#c81f12;
  --text:       #f3efe6;
  --muted:      rgba(243,239,230,.62);
  --dim:        rgba(243,239,230,.40);
  --line:       rgba(255,120,80,.26);

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:  'Instrument Serif', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:7rem;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--ink); color:var(--text);
  font-family:var(--font-display); font-weight:300; line-height:1.7;
  letter-spacing:.01em; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; height:100vh; }

::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:300;
  background:var(--accent); color:#fff; padding:.6rem 1.2rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  transition:top .3s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* ---------- fixed world + atmosphere ---------- */
#webgl{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 42%, transparent 52%, rgba(2,3,6,.62) 100%);
}
.grain{
  position:fixed; inset:-100%; z-index:3; pointer-events:none;
  width:300%; height:300%; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-8%)} 20%{transform:translate(-13%,3%)}
  30%{transform:translate(6%,-10%)} 40%{transform:translate(-5%,12%)} 50%{transform:translate(-12%,8%)}
  60%{transform:translate(12%,2%)} 70%{transform:translate(2%,12%)} 80%{transform:translate(-8%,2%)} 90%{transform:translate(8%,-8%)}
}

/* ---------- content flow ---------- */
main{ position:relative; z-index:10; }
section{ position:relative; }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  transition:opacity 1s var(--ease-out), visibility 1s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader-core{
  width:16px; height:16px; border-radius:5px;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  box-shadow:0 0 24px 6px rgba(255,70,50,.5), 0 0 70px 26px rgba(255,70,50,.18);
  animation:corePulse 1.4s var(--ease-out) infinite;
}
@keyframes corePulse{ 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(90deg) scale(1.18)} }
.loader-text{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:250; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
.cursor-dot{ width:5px; height:5px; background:var(--accent); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(255,120,80,.5); transition:width .35s var(--ease-out), height .35s var(--ease-out), border-color .35s, background .35s; }
.cursor-ring.is-hover{ width:60px; height:60px; border-color:var(--accent); background:rgba(255,70,50,.07); }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }
@media (hover:hover) and (pointer:fine){ body,a,button,[data-cursor]{ cursor:none; } }

/* ---------- progress rail ---------- */
.rail{ position:fixed; left:1.6rem; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; align-items:center; gap:.9rem; opacity:0; transition:opacity 1s 1s; }
body.is-ready .rail{ opacity:1; }
.rail-line{ width:1px; height:130px; background:rgba(255,120,80,.18); position:relative; overflow:hidden; }
.rail-line::after{ content:''; position:absolute; left:0; top:0; width:100%; height:calc(var(--p,0)*100%); background:linear-gradient(var(--accent),var(--accent-2)); }
.rail-chapter{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; color:var(--accent-2); writing-mode:vertical-rl; text-orientation:mixed; }
@media (max-width:820px){ .rail{ display:none; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; padding:1.3rem 2.2rem;
  opacity:0; transform:translateY(-12px);
  transition:opacity 1s var(--ease-out) .7s, transform 1s var(--ease-out) .7s, background .5s, backdrop-filter .5s;
}
body.is-ready .nav{ opacity:1; transform:none; }
.nav.is-scrolled{ background:linear-gradient(rgba(7,8,11,.78),transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.nav-mark{ font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.16em; display:flex; align-items:baseline; gap:.55rem; }
.nav-mark em{ font-style:normal; color:var(--accent); }
.nav-mark small{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.24em; color:var(--muted); }
.nav-links{ display:flex; gap:2rem; position:absolute; left:50%; transform:translateX(-50%); }
.nav-links a{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); position:relative; padding:.3rem 0; transition:color .4s; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out); }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:960px){ .nav-links{ display:none; } }
.nav-right{ display:flex; align-items:center; gap:1.1rem; }
.nav-cta{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; color:var(--accent-2); padding:.7rem 1.3rem; border:1px solid var(--line); border-radius:100px; position:relative; overflow:hidden; transition:color .4s, border-color .4s; }
.nav-cta::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,var(--accent-2),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); z-index:-1; }
.nav-cta:hover{ color:#1a0a08; border-color:transparent; }
.nav-cta:hover::before{ transform:scaleX(1); }
@media (max-width:560px){ .nav-cta{ display:none; } }
.nav-menu-btn{ display:none; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text); }
.nav-menu-btn .bars{ display:flex; flex-direction:column; gap:5px; width:20px; }
.nav-menu-btn .bars span{ height:1.5px; background:var(--accent); display:block; transition:transform .4s var(--ease-out), width .4s; }
.nav-menu-btn .bars span:last-child{ width:60%; align-self:flex-end; }
@media (max-width:960px){ .nav-menu-btn{ display:flex; } }

/* ---------- mobile menu ---------- */
.menu{ position:fixed; inset:0; z-index:160; background:radial-gradient(ellipse 80% 60% at 75% 85%, rgba(255,70,50,.12), transparent), var(--ink); clip-path:inset(0 0 100% 0); visibility:hidden; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(2rem,10vw,8rem); }
.menu.is-open{ visibility:visible; }
.menu-close{ position:absolute; top:1.6rem; right:2rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.menu-links{ display:flex; flex-direction:column; gap:.3rem; }
.menu-links a{ display:flex; align-items:baseline; gap:1.4rem; font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,8vw,3.6rem); color:var(--text); line-height:1.3; overflow:hidden; padding:.15rem 0; transition:color .4s; }
.menu-links a:hover{ color:var(--accent); }
.menu-links a small{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); min-width:1.6rem; }
.menu-links .mi{ display:inline-block; }
.menu-foot{ margin-top:3rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* ---------- shared text ---------- */
.overline{ font-family:var(--font-mono); font-weight:400; font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:1rem; }
.overline::before{ content:''; width:30px; height:1px; background:var(--line); }
.overline.is-centered{ justify-content:center; }
.overline.is-centered::after{ content:''; width:30px; height:1px; background:var(--line); }
.chapter-num{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.02em; color:var(--text); }
h2 em{ font-family:var(--font-accent); font-style:italic; color:var(--accent-2); }
.lede{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.7; color:var(--muted); }
.lede strong{ color:var(--text); font-weight:500; }
.lore-rule{ width:60px; height:1px; background:var(--accent); transform-origin:left; }

/* ---------- hero ---------- */
.hero{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 1.5rem; }
.hero-overline{ margin-bottom:var(--s3); opacity:0; }
.hero-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(3.6rem,17vw,14rem); line-height:.92; letter-spacing:.02em;
  color:var(--text); text-shadow:0 0 80px rgba(255,70,50,.22);
  display:flex; justify-content:center; perspective:600px;
}
.hero-title .lt{ display:inline-block; opacity:0; transform:translateY(60px) rotateX(45deg); filter:blur(8px); }
.hero-numeral{ display:flex; align-items:center; gap:1.3rem; margin-top:var(--s3); opacity:0; }
.hero-numeral::before,.hero-numeral::after{ content:''; width:clamp(40px,8vw,110px); height:1px; background:linear-gradient(90deg,transparent,var(--accent)); }
.hero-numeral::after{ background:linear-gradient(90deg,var(--accent),transparent); }
.hero-numeral span{ font-family:var(--font-mono); font-weight:500; font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:.4em; text-indent:.4em; color:var(--accent-2); }
.hero-sub{ max-width:36rem; margin-top:var(--s4); font-family:var(--font-accent); font-style:italic; font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.6; color:var(--muted); opacity:0; }
.hero .scroll-cue{ opacity:0; }

.scroll-cue{ position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.scroll-cue span{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }
.scroll-cue .cue-line{ width:1px; height:52px; overflow:hidden; position:relative; background:rgba(243,239,230,.12); }
.scroll-cue .cue-line::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:linear-gradient(transparent,var(--accent)); animation:cue 2.2s var(--ease-out) infinite; }
@keyframes cue{ 0%{top:-100%} 60%,100%{top:100%} }

/* ---------- lore / the pit ---------- */
.lore{ padding:34vh 0; }
.lore-block{ min-height:86vh; display:flex; align-items:center; padding:0 clamp(1.5rem,8vw,9rem); }
.lore-block:nth-child(even){ justify-content:flex-end; }
.lore-card{ max-width:32rem; display:flex; flex-direction:column; gap:var(--s3); }
.lore-card h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); }

/* ---------- toolkit (horizontal) ---------- */
.classes{ overflow:hidden; }
.classes-track{ display:flex; align-items:center; gap:clamp(2rem,4vw,4rem); height:100vh; height:100svh; padding:0 clamp(1.5rem,6vw,7rem); width:max-content; }
.classes-intro{ flex-shrink:0; width:min(34rem,80vw); display:flex; flex-direction:column; gap:var(--s3); }
.classes-hint{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-top:.5rem; }
.fcard{
  flex-shrink:0; width:min(420px,84vw); padding:1.4rem;
  background:linear-gradient(160deg, rgba(20,23,32,.86), rgba(10,12,18,.9));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; position:relative;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:box-shadow .5s var(--ease-out), border-color .5s;
  transform-style:preserve-3d; will-change:transform;
}
.fcard:hover{ border-color:var(--line); box-shadow:0 28px 80px -24px rgba(0,0,0,.8), 0 0 60px -16px rgba(255,70,50,.3); }
.fcard .corner{ position:absolute; width:12px; height:12px; pointer-events:none; border-color:var(--accent); border-style:solid; opacity:.7; }
.corner.tl{ top:7px; left:7px; border-width:1px 0 0 1px; } .corner.tr{ top:7px; right:7px; border-width:1px 1px 0 0; }
.corner.bl{ bottom:7px; left:7px; border-width:0 0 1px 1px; } .corner.br{ bottom:7px; right:7px; border-width:0 1px 1px 0; }
.fcard-shot{ border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); aspect-ratio:16/10; background:var(--graphite); margin-bottom:1.1rem; }
.fcard-shot img{ width:100%; height:100%; object-fit:cover; object-position:top left; }
.fcard-idx{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; color:var(--accent); }
.fcard h3{ font-family:var(--font-display); font-weight:600; font-size:1.45rem; letter-spacing:-.01em; color:var(--text); margin-top:.2rem; }
.fcard-copy{ margin-top:.5rem; font-size:.92rem; color:var(--muted); line-height:1.6; }
.meter{ margin-top:1.2rem; display:grid; grid-template-columns:5.4rem 1fr; align-items:center; gap:.8rem; }
.meter-label{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.stat-bar{ height:3px; background:rgba(255,255,255,.1); position:relative; overflow:hidden; border-radius:2px; }
.stat-fill{ position:absolute; inset:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); transform-origin:left; border-radius:2px; }

/* ---------- features ---------- */
.features{ padding:22vh clamp(1.5rem,8vw,9rem); display:flex; flex-direction:column; gap:24vh; }
.features-head{ max-width:40rem; display:flex; flex-direction:column; gap:var(--s3); }
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.feature:nth-of-type(even) .feature-prop{ order:-1; }
.feature-text{ display:flex; flex-direction:column; gap:var(--s3); max-width:30rem; }
.feature-prop{ display:flex; align-items:center; justify-content:center; min-height:300px; }
@media (max-width:760px){ .feature{ grid-template-columns:1fr; } .feature:nth-of-type(even) .feature-prop{ order:0; } }

/* token (git) */
.coin-scene{ perspective:900px; }
.coin{ width:190px; height:190px; position:relative; transform-style:preserve-3d; }
.coin-face{ position:absolute; inset:0; border-radius:24px; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; border:1px solid var(--line); }
.coin-face svg{ width:50%; height:50%; }
.coin-front{ background:radial-gradient(circle at 35% 30%, #20232e, var(--graphite)); color:var(--accent-2); box-shadow:0 0 60px -8px rgba(255,70,50,.35), inset 0 0 30px rgba(255,70,50,.12); }
.coin-back{ transform:rotateY(180deg); background:radial-gradient(circle at 35% 30%, #2a1410, #160a08); color:var(--accent); }
.coin-mono{ font-family:var(--font-mono); font-size:2.4rem; letter-spacing:.1em; color:var(--accent-2); }
.coin-rim{ position:absolute; inset:0; border-radius:24px; transform:translateZ(-5px); background:#0a0b12; }

/* orbit (ai) */
.orbit{ width:230px; height:230px; position:relative; display:flex; align-items:center; justify-content:center; }
.orbit-core{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--accent-2),var(--accent)); box-shadow:0 0 28px 8px rgba(255,70,50,.5), 0 0 90px 30px rgba(255,70,50,.18); animation:corePulse 2.6s var(--ease-out) infinite; }
.orbit-ring{ position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(255,120,80,.28); animation:spin 24s linear infinite; }
.orbit-ring.r2{ inset:34px; animation-duration:16s; animation-direction:reverse; border-style:solid; border-color:rgba(255,120,80,.14); }
.orbit-node{ position:absolute; top:50%; left:50%; width:9px; height:9px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 12px rgba(255,138,61,.8); transform:translate(-50%,-50%) rotate(var(--a)) translateY(-115px); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* podium (rankings) */
.podium{ display:flex; align-items:flex-end; gap:.8rem; height:200px; }
.podium-bar{ width:64px; border-radius:8px 8px 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:.6rem; border:1px solid var(--line); border-bottom:none; background:linear-gradient(var(--graphite-2),var(--graphite)); position:relative; }
.podium-bar b{ font-family:var(--font-mono); font-size:1.1rem; color:var(--accent-2); }
.podium-bar.p1{ height:180px; background:linear-gradient(rgba(255,70,50,.22),var(--graphite)); box-shadow:0 0 50px -12px rgba(255,70,50,.45); }
.podium-bar.p2{ height:130px; }
.podium-bar.p3{ height:96px; }

.stat-row{ display:flex; gap:clamp(1.4rem,4vw,3rem); margin-top:var(--s3); flex-wrap:wrap; }
.bigstat{ display:flex; flex-direction:column; gap:.3rem; }
.bigstat-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--text); line-height:1; }
.bigstat-label{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }

/* ---------- CTA ---------- */
.cta{ min-height:108vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18vh 1.5rem; position:relative; }
#embers{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cta-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--s3); max-width:46rem; }
.crest{ width:clamp(96px,14vw,140px); height:auto; color:var(--accent); overflow:visible; filter:drop-shadow(0 0 16px rgba(255,70,50,.35)); }
.crest .draw{ stroke:currentColor; fill:none; stroke-width:1.8; }
.cta h2{ font-size:clamp(2.4rem,6vw,4.4rem); }
.cta .lede{ max-width:34rem; }
.cta-buttons{ display:flex; gap:1.1rem; margin-top:var(--s2); flex-wrap:wrap; justify-content:center; }
.cta-targets{ display:flex; gap:1rem; margin-top:var(--s2); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; color:var(--muted); flex-wrap:wrap; justify-content:center; }
.cta-targets a{ transition:color .3s; }
.cta-targets a:hover{ color:var(--accent); }
.cta-note{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-top:var(--s3); }
.cta-note code{ text-transform:none; background:var(--steel); padding:.1em .4em; border-radius:4px; color:var(--muted); }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em; padding:1.05rem 2.2rem; border-radius:100px; transition:transform .3s var(--ease-out); will-change:transform; overflow:hidden; }
.btn-gold{ color:#1a0a08; background:linear-gradient(120deg,var(--accent-2),var(--accent)); box-shadow:0 0 0 1px rgba(255,138,61,.4), 0 16px 48px -10px rgba(255,70,50,.5); }
.btn-gold::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); background-size:240% 100%; background-position:120% 0; transition:background-position .9s var(--ease-out); }
.btn-gold:hover::after{ background-position:-120% 0; }
.btn-ghost{ color:var(--text); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-2); }

/* ---------- footer ---------- */
footer{ position:relative; z-index:10; padding:16vh 2rem 3rem; overflow:hidden; background:linear-gradient(transparent, rgba(5,6,10,.9) 40%); text-align:center; }
.footer-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2rem; }
.footer-word{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem,14vw,10rem); letter-spacing:.06em; color:rgba(243,239,230,.05); line-height:1; user-select:none; }
.footer-links{ display:flex; gap:2.2rem; flex-wrap:wrap; justify-content:center; }
.footer-links a{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); position:relative; padding-bottom:.3rem; }
.footer-links a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out); }
.footer-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.footer-fine{ max-width:38rem; font-size:.78rem; line-height:1.9; color:var(--dim); }
.footer-fine .bot{ cursor:pointer; display:inline-block; transition:transform .3s var(--ease-out); }
.footer-fine .bot:hover{ transform:scale(1.3) rotate(-8deg); }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:2.2rem; left:50%; z-index:120; transform:translate(-50%, calc(100% + 2.6rem)); visibility:hidden; background:var(--text); color:var(--ink); font-family:var(--font-accent); font-style:italic; font-size:1.05rem; padding:.9rem 1.8rem; border-radius:6px; box-shadow:0 18px 50px -12px rgba(0,0,0,.6); transition:transform .6s var(--ease-out), visibility .6s; pointer-events:none; text-align:center; max-width:90vw; }
.toast.is-shown{ transform:translate(-50%,0); visibility:visible; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .grain{ animation:none; } .scroll-cue .cue-line::after{ animation:none; top:0; }
  .hero-title .lt{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero-overline,.hero-numeral,.hero-sub,.scroll-cue{ opacity:1 !important; }
}
@media (max-width:820px){
  .nav{ padding:1.1rem 1.3rem; } .nav-mark small{ display:none; }
  .lore-block{ min-height:auto; padding:10vh clamp(1.4rem,8vw,9rem); }
  .features{ gap:16vh; }
  /* gallery falls back to a stacked column (no horizontal pin) */
  .classes-track{ flex-direction:column; height:auto; width:auto; padding:12vh 1.5rem; align-items:center; gap:2.4rem; }
  .classes-intro,.fcard{ width:min(440px,90vw); }
  .classes-hint{ display:none; }
}