/* ═══════════════════════════════════════════════════════════════════
   NATIONAL RIDE NETWORK — the gate
   ═══════════════════════════════════════════════════════════════════
   The front door. For anyone without an invite it is the whole site, so
   it carries the same world as the overhaul — but not the same weight.

   No Three.js and no GSAP here. Six hundred kilobytes of WebGL before a
   visitor can reach a sign-in button is the wrong trade on the one page
   where leaving is easiest, so the wheel is an SVG that draws itself and
   turns on a CSS animation, and the reveal is CSS too. Nothing on this
   page waits for a script to become legible.

   Loaded after gate.html's own <style> so it overrides it. Every id,
   every form field and every line of the sign-in logic is untouched.
   ────────────────────────────────────────────────────────────────── */

:root{
  --void:#050a12;
  --amber:#f5a623;
  --amber2:#ffc04d;
  --text:#eef2f7;
  --muted:#7a9ab8;
  --dim:#4f6b86;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --ease:cubic-bezier(.22,1,.36,1);
}

html,body{
  margin:0;padding:0;min-height:100%;
  background:var(--void);
  background-image:
    radial-gradient(120% 80% at 72% 4%,rgba(13,27,42,.92),transparent 62%),
    radial-gradient(80% 60% at 0% 100%,rgba(13,27,42,.6),transparent 60%);
  -webkit-font-smoothing:antialiased;
}

/* ── The wheel ──────────────────────────────────────────────────────
   Fixed behind everything, off to one side, turning slowly. It draws
   itself once — rim, then spokes — the same opening the site uses. */
/* The hub sits off the right edge, so what crosses the page is an arc of
   rim and a fan of spokes — the mark as a piece of architecture behind
   the type, rather than a logo competing with it. */
.gate-wheel{
  position:fixed;top:46%;left:104%;z-index:0;pointer-events:none;
  width:min(150vh,1500px);height:min(150vh,1500px);
  transform:translate(-50%,-50%);
  opacity:0;animation:gwIn 2.2s var(--ease) .15s forwards
}
.gate-wheel>*{transform-origin:200px 200px}
.gw-tire circle{stroke:rgba(122,154,184,.16);stroke-width:1}
.gw-rim{
  stroke:rgba(245,166,35,.3);stroke-width:1.5;
  stroke-dasharray:1144;stroke-dashoffset:1144;
  animation:gwDraw 2.6s var(--ease) .2s forwards
}
.gw-spokes line{
  stroke:rgba(238,242,247,.085);stroke-width:.7;
  stroke-dasharray:160;stroke-dashoffset:160;
  animation:gwDraw 1.4s var(--ease) forwards
}
.gw-spokes line:nth-child(n+1){animation-delay:.5s}
.gw-spokes line:nth-child(n+9){animation-delay:.72s}
.gw-spokes line:nth-child(n+17){animation-delay:.94s}
.gw-hub{stroke:rgba(245,166,35,.5);stroke-width:1.4}
.gw-core{fill:var(--amber);opacity:.85}
/* The whole mark turns, slowly enough that it reads as alive rather
   than as something spinning. */
.gate-wheel{animation:gwIn 2.2s var(--ease) .15s forwards, gwTurn 210s linear infinite}
@keyframes gwIn{to{opacity:1}}
@keyframes gwDraw{to{stroke-dashoffset:0}}
@keyframes gwTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── The fog ────────────────────────────────────────────────────────
   Smoke rising off the bottom of the page and drifting east, between
   the wheel and the panel: the same marine layer as the launch posts.
   Each bank is a noise tile that repeats seamlessly side to side
   (stitchTiles), painted once as a background and slid one tile width
   on a loop, so the browser only moves a layer and never redraws it. */
.gate-fog{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.gate-fog i{
  position:absolute;top:0;bottom:0;left:-1400px;width:calc(100% + 2800px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0026 0.0075' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 .9 0 0 0 1.3 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") repeat-x 0 0/1400px 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 10%,transparent 50%);
  mask-image:linear-gradient(0deg,#000 0%,#000 10%,transparent 50%);
  opacity:0;will-change:transform;
  animation:gfIn 4s var(--ease) .6s forwards, gfDrift 150s linear infinite
}
/* A thinner, quicker bank across the top, so the smoke has depth. */
.gate-fog i+i{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.012' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 .9 0 0 0 1.2 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 38%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 38%);
  --fog:.4;animation:gfIn 4s var(--ease) 1s forwards, gfDrift 95s linear infinite
}
@keyframes gfIn{to{opacity:var(--fog,.6)}}
@keyframes gfDrift{to{transform:translateX(1400px)}}

/* The pixel film grain that sat over everything is gone (Kody, 10/26). */

/* ── The panel ──────────────────────────────────────────────────────
   No blur: there is nothing behind it to blur, and a backdrop-filter
   over flat colour costs a compositing layer to achieve nothing. */
#coming-soon-overlay{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  /* Plain centring here clips the top of a panel taller than the screen
     and leaves it unreachable — the welcome step is exactly that on a
     short window. "safe" falls back to flex-start instead of overflowing
     both ways. */
  justify-content:center;justify-content:safe center;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:clamp(28px,6vh,64px) clamp(20px,5vw,48px);overflow-y:auto;
  text-align:center;
}
#coming-soon-overlay>*{position:relative;z-index:1}

/* The small mark above the wordmark — the one in the markup. */
#coming-soon-overlay>svg:first-of-type{
  width:44px;height:44px;margin-bottom:26px!important;
  opacity:0;animation:gUp .9s var(--ease) .35s forwards
}

#cs-word{
  font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;
  font-size:clamp(2.9rem,9.2vw,7.4rem)!important;
  line-height:.9!important;letter-spacing:.055em!important;
  color:var(--text)!important;text-transform:uppercase;
  margin:0 0 18px!important;max-width:14ch;text-wrap:balance;
  opacity:0;animation:gUp 1s var(--ease) .5s forwards
}

/* "COMING SOON" as the site's eyebrow: a rule, then tracked caps. */
#cs-word + div{
  display:inline-flex!important;align-items:center;gap:14px;
  font-family:'Nunito',sans-serif!important;font-weight:600;
  font-size:.875rem!important;letter-spacing:.1em!important;
  text-transform:uppercase;color:var(--amber)!important;
  margin:0 0 30px!important;
  opacity:0;animation:gUp .9s var(--ease) .66s forwards
}
#cs-word + div::before,#cs-word + div::after{
  content:"";width:30px;height:1px;background:var(--amber);opacity:.65
}

#coming-soon-overlay > p[style]{
  font-family:'Nunito',system-ui,sans-serif!important;
  color:var(--text)!important;font-weight:400!important;
  font-size:clamp(1.02rem,1.9vw,1.24rem)!important;
  line-height:1.6!important;letter-spacing:0!important;
  max-width:44ch!important;margin:0 auto 10px!important;text-wrap:balance;
  opacity:0;animation:gUp .9s var(--ease) .78s forwards
}
#coming-soon-overlay > p[style] + p[style]{
  color:var(--muted)!important;font-size:.98rem!important;
  max-width:50ch!important;margin:0 auto 38px!important;
  animation-delay:.88s
}

@keyframes gUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── Sign in ────────────────────────────────────────────────────── */
.cs-signup{
  width:100%;max-width:360px;margin-top:0;
  opacity:0;animation:gUp .9s var(--ease) 1s forwards
}
.cs-oauth{display:flex;flex-direction:column;gap:10px}

/* Google renders its own button in a cross-origin iframe and it cannot
   be restyled — which is the point of it, so it is left alone. The
   fallback below matches the site. */
.cs-gbtn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  font-family:'Nunito',sans-serif;font-weight:700;
  font-size:.9375rem;letter-spacing:.06em;text-transform:none;text-indent:.16em;
  color:var(--void);background:var(--amber);border:0;border-radius:999px;
  padding:15px 24px;min-height:52px;cursor:pointer;
  transition:background .3s,transform .3s var(--ease)
}
.cs-gbtn:hover{background:var(--amber2);box-shadow:none}
.cs-gbtn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.cs-note{
  font-family:'Nunito',system-ui,sans-serif;font-size:.875rem;line-height:1.6;
  color:var(--muted);margin:14px 0 0;max-width:38ch;margin-inline:auto
}
.cs-status{
  font-family:'Nunito',system-ui,sans-serif;font-size:.9375rem;line-height:1.5;
  margin:12px 0 0;min-height:1em;color:var(--muted)
}
.cs-status[data-tone="error"]{color:#ff8a8d}

/* ── Welcome, after Google signs them in ────────────────────────── */
.cs-welcome{
  margin-top:18px;text-align:left;width:100%;max-width:360px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:8px;
  background:rgba(11,22,34,.55);padding:18px 20px 20px
}
@supports (backdrop-filter:blur(1px)){.cs-welcome{backdrop-filter:blur(14px)}}
.cs-welcome h2{
  font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;margin:0 0 5px;
  /* One line: the whole name fits the card at every width. */
  font-size:clamp(1rem,5.3vw,1.3rem);letter-spacing:.03em;color:var(--text);text-align:center;
  text-transform:uppercase;line-height:1;white-space:nowrap
}
.cs-wel-sub{
  font-family:'Nunito',system-ui,sans-serif;font-size:.9375rem;color:var(--muted);
  margin:0 0 14px;text-align:center
}
.cs-wel-lab{
  display:block;font-family:'Nunito',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;
  color:var(--amber);margin:0 0 8px
}
.cs-wel-in{
  width:100%;font-family:'Nunito',system-ui,sans-serif;font-size:.95rem;
  color:var(--text);background:rgba(255,255,255,.04);
  border:1px solid var(--line2);border-radius:5px;
  padding:11px 13px;min-height:44px;box-sizing:border-box;transition:border-color .25s,background .25s
}
.cs-wel-in:hover{border-color:rgba(255,255,255,.28)}
.cs-wel-in:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.06)}
.cs-wel-in::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}
.cs-wel-hint{
  font-family:'Nunito',system-ui,sans-serif;font-size:.8rem;line-height:1.45;
  color:var(--dim);margin:6px 0 14px
}
.cs-wel-row{display:flex;gap:9px}
.cs-wel-row .cs-wel-in{min-width:0}
.cs-wel-state{flex:0 0 100px}
.cs-wel-go{
  width:100%;margin-top:4px;font-family:'Nunito',sans-serif;
  font-weight:700;text-transform:none;letter-spacing:.06em;text-indent:.18em;
  font-size:.9375rem;color:var(--void);background:var(--amber);
  border:0;border-radius:999px;padding:13px;min-height:48px;cursor:pointer;
  transition:background .3s
}
.cs-wel-go:hover{background:var(--amber2)}
.cs-wel-go:disabled{opacity:.5;cursor:default}
/* The status line takes no room until it has something to say. */
.cs-welcome .cs-status:empty{display:none}
.cs-welcome .cs-status{margin:0 0 10px}
.cs-wel-lab{margin-bottom:6px}

/* ── Done ───────────────────────────────────────────────────────── */
.cs-done{
  display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px;
  animation:gUp .9s var(--ease) forwards
}
.cs-done-mark{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(245,166,35,.45);background:rgba(245,166,35,.08);
  display:flex;align-items:center;justify-content:center;color:var(--amber)
}
.cs-done .cs-badge{
  font-family:'Nunito',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);margin:0
}
.cs-done .cs-num{
  font-family:'Bebas Neue',Impact,sans-serif;font-size:4rem;line-height:.88;
  letter-spacing:.02em;color:var(--text);margin:0;font-variant-numeric:tabular-nums
}
.cs-done h2{
  font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;margin:0;
  font-size:2rem;letter-spacing:.05em;color:var(--text);text-transform:uppercase;line-height:1
}
.cs-done p{
  font-family:'Nunito',system-ui,sans-serif;font-size:.92rem;line-height:1.65;
  color:var(--muted);margin:0;max-width:34ch
}

/* After the confirmation: the countdown, the share, the follow. */
.cs-next{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.cs-done .cs-count{
  font-family:'Nunito',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin:0
}
.cs-share{
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.95rem;
  background:var(--amber);color:#14100a;border:0;border-radius:999px;
  padding:13px 24px;min-height:46px;cursor:pointer
}
.cs-share:hover{background:var(--amber2)}
.cs-share:focus-visible,.cs-ig:focus-visible,.cs-switch:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.cs-done .cs-share-note{font-family:'Nunito',sans-serif;font-size:.82rem;color:var(--muted);margin:0;min-height:1.2em;max-width:34ch;word-break:break-word}
.cs-share-note:empty{display:none}
.cs-ig{font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cs-ig:hover{color:var(--text)}
.cs-switch{
  margin-top:8px;background:none;border:0;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:.8rem;color:var(--dim);text-decoration:underline;text-underline-offset:3px
}
.cs-switch:hover{color:var(--muted)}

/* ── Reduced motion and small screens ───────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .gate-wheel,#coming-soon-overlay>svg:first-of-type,#cs-word,#cs-word + div,
  #coming-soon-overlay > p[style],.cs-signup,.cs-done{animation:none!important;opacity:1!important;transform:translate(-50%,-50%)}
  #coming-soon-overlay>svg:first-of-type,#cs-word,#cs-word + div,
  #coming-soon-overlay > p[style],.cs-signup,.cs-done{transform:none}
  .gw-rim,.gw-spokes line{stroke-dashoffset:0!important;animation:none!important}
  .gate-fog i{animation:none!important;opacity:.6}
  .gate-fog i+i{opacity:.4}
}
@media (max-width:900px){
  .gate-wheel{top:38%;left:112%;width:min(128vh,1100px);height:min(128vh,1100px)}
}
@media (max-width:520px){
  .gate-wheel{top:30%;left:118%;width:min(112vh,900px);height:min(112vh,900px)}
  #cs-word{letter-spacing:.04em!important}
  .cs-welcome{padding:16px 16px 18px}
}