@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #07080c;
  --ink-blue: #0c1020;
  --paper: #f0f3ec;
  --muted: #a1a9b8;
  --muted-dark: #697383;
  --line: rgba(206, 218, 231, .17);
  --acid: #d9ff54;
  --cyan: #8ff5df;
  --violet: #a891ff;
  --pink: #ff86c8;
  --amber: #ffc870;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); }
a { color: inherit; }

/* A long scroll gives the pinned WebGL scene room to become a portal. */
.journey { height: 210vh; position: relative; background: var(--ink); }
.scene { --journey-progress: 0; background: radial-gradient(ellipse at 76% 45%, #252b4b 0%, #121a2e 30%, #090d16 72%); height: 100svh; min-height: 680px; overflow: hidden; position: sticky; top: 0; isolation: isolate; }
.scene::before { content: ''; position: absolute; width: 72vw; height: 72vw; max-width: 1050px; max-height: 1050px; top: 2%; right: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(161, 134, 255, .16) 0%, rgba(91, 232, 208, .06) 26%, transparent 67%); filter: blur(30px); pointer-events: none; z-index: -2; }
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .23; background-image: radial-gradient(circle at 18% 38%, var(--acid) 0 1px, transparent 2px), radial-gradient(circle at 76% 23%, var(--cyan) 0 1px, transparent 2px), radial-gradient(circle at 63% 74%, var(--pink) 0 1px, transparent 2px), radial-gradient(circle at 91% 88%, var(--violet) 0 1px, transparent 2px); background-size: 190px 220px, 270px 300px, 230px 260px, 310px 240px; z-index: -1; }
#webgl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.scene-wash { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(circle at 74% 48%, transparent 0 16%, rgba(7,8,12,.04) 35%, rgba(7,8,12,.24) 78%); }
.scene-grain { position: absolute; inset: -50%; pointer-events: none; opacity: .06; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); transform: rotate(7deg); }
.topbar, .hero-copy { width: min(100% - 80px, 1400px); margin: 0 auto; position: relative; z-index: 4; transition: opacity .18s linear, transform .18s linear; }
.topbar { height: 92px; align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.brand { align-items: center; display: inline-flex; gap: 13px; text-decoration: none; }
.brand-mark { color: var(--acid); font: 500 25px/1 var(--mono); letter-spacing: -.12em; text-shadow: 0 0 18px rgba(217,255,84,.38); }
.brand-mark span { color: var(--cyan); }
.brand-name { color: var(--muted); font: 10px/1.2 var(--mono); letter-spacing: .13em; }
.scroll-cue { align-items: center; color: var(--muted-dark); display: flex; gap: 9px; font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.cue-dot { background: var(--acid); border-radius: 50%; box-shadow: 0 0 12px var(--acid); height: 6px; width: 6px; }
.hero-copy { padding-top: clamp(80px, 17vh, 175px); }
.eyebrow { color: var(--cyan); margin: 0 0 27px; text-transform: uppercase; font: 10px var(--mono); letter-spacing: .1em; }
h1 { color: var(--paper); font-size: clamp(44px, 5.3vw, 78px); font-weight: 500; letter-spacing: -.085em; line-height: .92; margin: 0; max-width: 620px; position: relative; z-index: 2; }
h1 em { color: var(--acid); font-style: normal; }
.hero-description { color: var(--muted); font-size: 17px; line-height: 1.48; margin: 29px 0 0; max-width: 390px; }
.newsletter-form { background: linear-gradient(135deg, rgba(217,255,84,.1), rgba(13,19,30,.78) 48%, rgba(168,145,255,.12)); border: 1px solid rgba(217,255,84,.36); box-shadow: 0 0 50px rgba(217,255,84,.05), inset 0 1px 0 rgba(255,255,255,.07); margin-top: 28px; padding: 16px 17px 13px; width: min(100%, 500px); backdrop-filter: blur(16px); }
.newsletter-heading { align-items: center; color: var(--acid); display: flex; gap: 9px; text-transform: uppercase; font: 10px var(--mono); letter-spacing: .11em; }
.newsletter-orb { background: var(--acid); border-radius: 50%; box-shadow: 0 0 12px var(--acid); display: inline-block; height: 7px; width: 7px; }
.form-row { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 13px; }
.newsletter-form input[type='email'] { background: rgba(5,8,12,.62); border: 1px solid var(--line); border-radius: 1px; color: var(--paper); font: 12px var(--mono); min-height: 45px; outline: none; padding: 0 12px; transition: border-color .2s ease, box-shadow .2s ease; width: 100%; }
.newsletter-form input[type='email']:focus { border-color: var(--acid); box-shadow: 0 0 0 3px rgba(217,255,84,.1); }
.newsletter-form input::placeholder { color: var(--muted-dark); }
button { background: var(--acid); border: 0; border-radius: 1px; color: var(--ink); cursor: pointer; font: 500 11px var(--mono); min-height: 45px; padding: 0 15px; transition: background .2s ease, transform .2s ease; white-space: nowrap; }
button:hover, button:focus-visible { background: #efff9a; transform: translateY(-2px); }
button:disabled { cursor: wait; opacity: .6; transform: none; }
.consent { align-items: flex-start; color: var(--muted-dark); display: flex; font: 10px/1.4 var(--mono); gap: 7px; margin-top: 10px; }
.consent input { accent-color: var(--acid); margin: 1px 0 0; }
.form-status { color: var(--cyan) !important; font: 10px var(--mono) !important; margin: 8px 0 0 !important; min-height: 15px; }
.form-status.error { color: var(--amber) !important; }
.honey-field { height: 1px; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
.portal-newsletter { left: 50%; opacity: 0; pointer-events: none; position: absolute; text-align: left; top: 50%; transform: translate(-50%, -32%); transition: opacity .12s linear, transform .12s linear; width: min(90vw, 500px); z-index: 4; }
.portal-newsletter h2 { color: var(--paper); font-size: clamp(52px, 7vw, 94px); font-weight: 500; letter-spacing: -.09em; line-height: .87; margin: 0; }
.portal-newsletter > p:not(.portal-kicker) { color: var(--muted); font-size: 16px; line-height: 1.45; margin: 18px 0 0; max-width: 370px; }
.portal-newsletter .newsletter-form { margin-top: 24px; width: 100%; }
.portal-copy { left: 50%; opacity: 0; pointer-events: none; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -32%); transition: opacity .12s linear, transform .12s linear; width: min(90vw, 400px); z-index: 4; }
.portal-kicker { color: var(--cyan); font: 10px var(--mono); letter-spacing: .14em; margin: 0 0 12px; text-transform: uppercase; }
.portal-copy h2 { color: var(--acid); font-size: clamp(56px, 8vw, 110px); font-weight: 500; letter-spacing: -.1em; line-height: .8; margin: 0; }
.portal-copy p:not(.portal-kicker) { color: var(--muted); font-size: 16px; margin: 17px 0 24px; }
.portal-link { border-bottom: 1px solid var(--acid); color: var(--acid); display: inline-flex; font: 11px var(--mono); gap: 12px; padding-bottom: 7px; text-decoration: none; text-transform: uppercase; }
.portal-link span { font-size: 15px; line-height: .7; }
.scroll-progress { bottom: 30px; height: 70px; position: absolute; right: max(25px, calc((100vw - 1400px) / 2)); width: 1px; z-index: 5; background: var(--line); }
.scroll-progress span { background: var(--acid); display: block; height: 100%; transform: scaleY(.015); transform-origin: bottom; width: 1px; }
.sr-only { border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.entering-forum .scene { animation: portalExit .9s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes portalExit { 0% { filter: brightness(1); transform: scale(1); } 55% { filter: brightness(2.4) saturate(1.4); transform: scale(1.04); } 100% { filter: brightness(0); transform: scale(1.14); } }

/* Forum surface */
.forum-page { background: radial-gradient(ellipse at 90% 0%, #171a32, var(--ink) 55%); min-height: 100svh; }
.forum-page .topbar { width: min(100% - 80px, 1400px); }
.forum-shell { margin: 0 auto; width: min(100% - 80px, 1120px); }
.forum-main { padding: 100px 0 120px; }
.forum-kicker { color: var(--cyan); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.forum-main h1 { font-size: clamp(55px, 8vw, 110px); margin-top: 22px; }
.forum-intro { color: var(--muted); font-size: 17px; line-height: 1.5; margin: 28px 0 52px; max-width: 460px; }
.forum-nav { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; gap: 24px; padding: 17px 0; }
.forum-nav a { color: var(--muted-dark); font: 10px var(--mono); text-decoration: none; text-transform: uppercase; }
.forum-nav a:first-child, .forum-nav a:hover { color: var(--acid); }
.topic-list { border-bottom: 1px solid var(--line); }
.topic { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 110px minmax(0, 1fr) 100px; padding: 25px 0; }
.topic:last-child { border-bottom: 0; }
.topic-meta, .topic-stats { color: var(--muted-dark); font: 10px/1.5 var(--mono); text-transform: uppercase; }
.topic-meta span { color: var(--cyan); display: block; margin-bottom: 5px; }
.topic h2 { font-size: 22px; font-weight: 400; letter-spacing: -.04em; margin: 0 0 8px; }
.topic p { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0; max-width: 600px; }
.topic-stats { text-align: right; }
.forum-return { color: var(--acid); display: inline-block; font: 11px var(--mono); margin-top: 37px; text-decoration: none; }
@view-transition { navigation: auto; }

@media (max-width: 900px) {
  .topbar, .hero-copy { width: min(100% - 42px, 1400px); }
  .portal-copy { left: 70%; }
  .forum-page .topbar, .forum-shell { width: min(100% - 42px, 1120px); }
}

@media (max-width: 680px) {
  .journey { height: 190vh; }
  .scene { min-height: 640px; }
  .topbar, .hero-copy { width: min(100% - 30px, 520px); }
  .topbar { height: 74px; }
  .scroll-cue { font-size: 9px; }
  .hero-copy { padding-top: 91px; }
  .eyebrow { line-height: 1.6; margin-bottom: 24px; max-width: 250px; }
  h1 { font-size: clamp(42px, 11vw, 64px); }
  .hero-description { font-size: 15px; margin-top: 23px; max-width: 320px; }
  .newsletter-form { margin-top: 21px; width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  button { width: 100%; }
  .portal-newsletter, .portal-copy { left: 50%; top: 45%; }
  .portal-copy p:not(.portal-kicker) { font-size: 15px; }
  .scroll-progress { bottom: 21px; right: 16px; }
  .forum-page .topbar, .forum-shell { width: min(100% - 30px, 1120px); }
  .forum-main { padding: 75px 0 80px; }
  .forum-main h1 { font-size: clamp(50px, 15vw, 80px); }
  .forum-intro { font-size: 15px; }
  .forum-nav { gap: 15px; overflow-x: auto; }
  .topic { gap: 10px; grid-template-columns: 1fr auto; }
  .topic-meta { grid-column: 1 / -1; }
  .topic-stats { grid-column: 2; grid-row: 2; }
  .topic h2 { font-size: 20px; }
  .topic p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scene { position: relative; }
  .journey { height: 100svh; }
  .hero-copy, .topbar { opacity: 0 !important; pointer-events: none !important; }
  .portal-newsletter { opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%, -50%) !important; }
  .portal-copy { opacity: 0 !important; }
}