/* ─── THALLYX · coming soon ─── street-protocol design system ─── */
:root{
  --void:#03090c; --void2:#0a0a0f;
  --toxic:#39FF6A; --toxic2:#39ff8e; --green:#16e07a;
  --mint:#b8ffe0; --cyan:#21e6ff; --mag:#ff3fd8;
  --ink:#dfeee6; --dim:#5c7a6b;
  --font-d:'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-b:'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-m:'Share Tech Mono', 'Courier New', monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--void);color:var(--ink)}
body{
  font-family:var(--font-b);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:var(--toxic);color:var(--void)}
a{color:var(--mint);text-decoration:none}
a:focus-visible{outline:2px solid var(--toxic);outline-offset:4px}

/* ── canvases: fixed, full-viewport, behind DOM ── */
#gl,#c2d{
  position:fixed;inset:0;width:100vw;height:100vh;height:100svh;
  z-index:1;display:block;pointer-events:none;
}
#c2d{display:none}
body.fallback #gl{display:none}
body.fallback #c2d{display:block}

/* soft radial core glow behind the mark (fake bloom, cheap) */
.glowcore{
  position:fixed;z-index:0;left:50%;top:42%;width:130vmin;height:80vmin;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(22,224,122,.10) 0%, rgba(22,224,122,.04) 38%, transparent 70%);
  filter:blur(2px);
}

/* ── atmosphere overlays ── */
.grain{
  position:fixed;inset:-60px;z-index:8;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 0.9s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-22px,14px)}
  50%{transform:translate(14px,-20px)}75%{transform:translate(-10px,-12px)}100%{transform:translate(0,0)}
}
.scanlines{
  position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(184,255,224,.5) 2px 3px);
}
.vignette{
  position:fixed;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(2,6,8,.62) 100%);
}

/* ── preloader ── */
#preloader{
  position:fixed;inset:0;z-index:60;background:var(--void);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s;
}
#preloader.done{opacity:0;visibility:hidden}
.pre-box{display:flex;gap:14px;align-items:center;font-family:var(--font-m);font-size:13px;letter-spacing:.35em;color:var(--green)}
.pre-glyph{color:var(--toxic);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

/* ── HUD frame ── */
.hud{position:fixed;inset:0;z-index:9;pointer-events:none;font-family:var(--font-m);font-size:10px;letter-spacing:.28em;color:var(--dim)}
.hud-cell{position:fixed;top:calc(14px + env(safe-area-inset-top))}
.hud-tl{left:20px}
.hud-tr{right:20px}
.hud-live{color:var(--toxic);animation:blink 2.4s steps(2) infinite}
.hud-corner{position:fixed;width:18px;height:18px;border:1px solid rgba(57,255,106,.35)}
.c-tl{top:10px;left:10px;border-right:0;border-bottom:0}
.c-tr{top:10px;right:10px;border-left:0;border-bottom:0}
.c-bl{bottom:10px;left:10px;border-right:0;border-top:0}
.c-br{bottom:10px;right:10px;border-left:0;border-top:0}

/* ── sections ── */
main{position:relative;z-index:2}
.s{
  min-height:100vh;min-height:100svh;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8vh 6vw;pointer-events:none;
}
.s a,.s .btn{pointer-events:auto}

/* hero */
.chip{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:4.5vh;
  font-family:var(--font-m);font-size:11px;letter-spacing:.32em;color:var(--mint);
  border:1px solid rgba(57,255,106,.35);padding:9px 18px;border-radius:2px;
  background:rgba(3,20,12,.45);backdrop-filter:blur(6px);
  box-shadow:0 0 24px rgba(22,224,122,.12), inset 0 0 18px rgba(22,224,122,.06);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--toxic);box-shadow:0 0 12px var(--toxic);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.5}}

.wordmark{line-height:.92;margin:0 0 3.2vh}
.ghost{
  font-family:var(--font-d);font-weight:400;
  font-size:clamp(3.4rem, 13.5vw, 12rem);
  letter-spacing:.06em;
  color:#2af07f;opacity:.11;text-shadow:0 0 26px rgba(57,255,106,.22);
  display:inline-block;transform:translateZ(0);
  user-select:none;
}
body.fallback .ghost, html.no-js .ghost{
  opacity:1;color:var(--toxic2);
  text-shadow:0 0 10px rgba(57,255,142,.8),0 0 34px rgba(57,255,106,.5),0 0 90px rgba(22,224,122,.4);
  animation:neon 3.4s ease-in-out infinite;
}
@keyframes neon{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}

.tagline{
  font-family:var(--font-b);font-weight:500;
  font-size:clamp(1rem, 2.4vw, 1.55rem);
  letter-spacing:.14em;color:var(--ink);
  text-transform:uppercase;
}
.byline{
  margin-top:2vh;font-family:var(--font-m);font-size:clamp(.68rem,1.4vw,.85rem);
  letter-spacing:.26em;color:var(--dim);text-transform:uppercase;
}
.byline-strong{color:var(--mint)}
.sep{color:var(--green);margin:0 .5em}
.gsn-tag{color:var(--toxic);text-shadow:0 0 10px rgba(57,255,106,.5)}

.scroll-hint{
  position:absolute;bottom:calc(7vh + 34px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-m);font-size:9px;letter-spacing:.5em;color:var(--dim);
}
.arrow{width:1px;height:34px;background:linear-gradient(to bottom, transparent, var(--toxic));position:relative;overflow:visible;animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top;opacity:0}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* vision */
.v-eyebrow{margin-bottom:3.4vh;font-size:11px;letter-spacing:.4em;color:var(--green)}
.mono{font-family:var(--font-m)}
.vision{
  max-width:900px;font-weight:300;
  font-size:clamp(1.25rem, 3.4vw, 2.3rem);
  line-height:1.5;letter-spacing:.02em;color:var(--ink);
}
.vision em{font-style:normal;color:var(--toxic2)}
.v-meta{
  display:flex;gap:clamp(16px,4vw,44px);margin-top:5.5vh;flex-wrap:wrap;justify-content:center;
  font-size:10px;letter-spacing:.3em;color:var(--dim);
}
.v-meta span{border-top:1px solid rgba(57,255,106,.25);padding-top:10px}

/* cta */
.coming{font-family:var(--font-d);font-weight:400;line-height:.9;margin-bottom:5vh}
.c-line{
  display:block;font-size:clamp(4rem, 16vw, 13rem);letter-spacing:.02em;
  color:var(--toxic);text-shadow:0 0 26px rgba(57,255,106,.35),0 0 90px rgba(22,224,122,.22);
}
.c-hollow{
  color:transparent;-webkit-text-stroke:2px rgba(184,255,224,.75);
  text-shadow:0 0 40px rgba(22,224,122,.2);
}
.cta-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.btn{
  font-family:var(--font-m);font-size:12px;letter-spacing:.3em;padding:16px 30px;
  border-radius:2px;transition:transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s, background .25s, color .25s;
  will-change:transform;
}
.btn-solid{
  background:var(--toxic);color:var(--void);font-weight:700;
  box-shadow:0 0 30px rgba(57,255,106,.4), inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn-solid:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 6px 44px rgba(57,255,106,.65);background:var(--toxic2)}
.btn-ghost{border:1px solid rgba(57,255,106,.5);color:var(--mint);background:rgba(3,20,12,.4)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--toxic);color:var(--toxic);box-shadow:0 0 30px rgba(57,255,106,.25)}
.b-arr{display:inline-block;transition:transform .25s}
.btn-solid:hover .b-arr{transform:translate(3px,-3px)}

.foot{
  position:absolute;bottom:calc(48px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  width:min(94vw,1100px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  font-size:9px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;
}
.f-sep{color:var(--green)}

/* ── ticker ── */
.ticker{
  position:fixed;left:0;right:0;bottom:0;z-index:9;overflow:hidden;
  border-top:1px solid rgba(57,255,106,.22);
  background:rgba(3,9,12,.72);backdrop-filter:blur(8px);
  padding:7px 0;pointer-events:none;
}
.ticker-track{
  display:inline-flex;white-space:nowrap;font-family:var(--font-m);
  font-size:10px;letter-spacing:.3em;color:var(--green);
  animation:tick 46s linear infinite;will-change:transform;
}
.ticker-track b{color:var(--toxic);font-weight:400}
.ticker-track i{font-style:normal;color:var(--dim)}
.ticker-track span{padding:0 1.6em}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── custom cursor (fine pointers only) ── */
.cursor{display:none}
@media (pointer:fine){
  .cursor{display:block;position:fixed;z-index:50;pointer-events:none;left:0;top:0}
  .cur-dot,.cur-ring{position:fixed;border-radius:50%;transform:translate(-50%,-50%);left:0;top:0}
  .cur-dot{width:6px;height:6px;background:var(--mint);box-shadow:0 0 10px var(--toxic)}
  .cur-ring{width:34px;height:34px;border:1px solid rgba(57,255,106,.5);transition:width .25s,height .25s,border-color .25s}
  .cursor.on-link .cur-ring{width:52px;height:52px;border-color:var(--toxic)}
}

/* ── reveal defaults (GSAP animates in) ── */
html.js .reveal,html.js .tagline,html.js .v-eyebrow,html.js .vision,html.js .v-meta,
html.js .coming,html.js .cta-row,html.js .foot{opacity:0}
html.no-js .s{opacity:1}

/* ── responsive ── */
@media (max-width:820px){
  .hud-tl{left:14px}.hud-tr{right:14px}
  .hud{font-size:8.5px;letter-spacing:.2em}
  .ghost{font-size:clamp(3rem,16.5vw,6rem)}
  .tagline{letter-spacing:.1em}
  .chip{font-size:9.5px;letter-spacing:.22em;padding:8px 14px}
  .glowcore{width:170vmin;height:120vmin;top:44%}
  .ticker-track{font-size:9px}
  .foot{bottom:calc(40px + env(safe-area-inset-bottom));font-size:8px}
  .scroll-hint{bottom:calc(6vh + 30px)}
}
@media (max-height:600px) and (orientation:landscape){
  .chip{margin-bottom:2vh}.wordmark{margin-bottom:1.6vh}
}

/* ── reduced motion ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.arrow,.dot,.hud-live{animation:none}
  .ticker-track{animation-duration:160s}
  .ghost{opacity:.9;color:var(--toxic2);text-shadow:0 0 24px rgba(57,255,106,.45)}
}