/* ═══════════════════════════════════════════════════════════════════════════
   VISION2 login v3 — "THE GRID" gate.
   Split pane: obsidian form (left) · instanced mining-city canvas (right).
   Same class contract as the page component (pane-form/box/panel/field/…).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Fonts are SELF-HOSTED variable woff2 (/public/fonts) — the old
   fonts.googleapis.com @import was a render-blocking request chain
   (this css → css2 → gstatic woff2). Same block as v3-landing.css. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* NO 'Inter' @font-face here — next/font (app/layout.tsx) already registers
   the family under the literal name 'Inter' on every page; redeclaring it
   shadows that copy and double-downloads the font. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:hsl(30 8% 4.5%);
  --bg2:hsl(30 6% 6%);
  --card:hsl(30 5% 9%);
  --line:hsl(30 5% 16%);
  --line-soft:hsl(30 5% 12%);
  --txt:hsl(40 12% 96%);
  --muted:hsl(35 10% 64%);
  --gold:#f0bb1a;
  --gold-light:#f6cf52;
  --gold-dark:#d9a407;
  --gold-glow:rgba(240,187,26,.35);
  --up:#31c48d;
  --dn:#ff5f57;
  --disp:'Space Grotesk','Inter',system-ui,sans-serif;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  display:flex;background:var(--bg);color:var(--txt);
  font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden;
}
::selection{background:var(--gold);color:#181307}
a{text-decoration:none;color:inherit}
img{display:block}
button{font-family:inherit;cursor:pointer}

/* ── LEFT: the form pane ── */
.pane-form{
  position:relative;flex:0 0 clamp(560px,42vw,760px);display:flex;justify-content:center;
  padding:4.5rem 3.5rem 2.5rem;background:var(--bg);overflow-y:auto;
  /* the pane may scroll on short viewports, but never SHOW a scrollbar track
     wedged between the two panes — that read as broken */
  scrollbar-width:none;
}
.pane-form::-webkit-scrollbar{display:none}
/* vertical centering via auto margins, NOT align-items:center — with a flex
   container that scrolls, centered overflow clips the TOP of the box (exactly
   what happens on short viewports once Turnstile adds height). auto margins
   center when there's room and collapse to 0 when there isn't. */
.pane-form .box{margin-top:auto;margin-bottom:auto}
.pane-form::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 40% at 50% 0%,rgba(240,187,26,.05),transparent 70%)}
/* film grain on the form pane so it never reads flat */
.pane-form::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

.logo{position:absolute;top:2rem;left:3rem;display:inline-flex;align-items:center;gap:.6rem;z-index:2}
/* v2-white.png is 600×421 — height-fit, never square-squished */
.logo img{height:26px;width:auto}
.logo span{font-family:var(--disp);font-weight:700;letter-spacing:.06em;font-size:1.02rem}
.logo span b{color:var(--gold)}

.box{position:relative;width:min(430px,100%);z-index:1;
  animation:box-in .9s var(--ease-out) both .1s}
@keyframes box-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* stacked panels (sign-in / forgot) */
.panel{display:none}
.panel.active{display:block}

.kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:22px;height:1px;background:var(--gold)}
.panel h1{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.15rem);
  letter-spacing:-.025em;line-height:1.08}
.sub{margin:.8rem 0 1.9rem;color:var(--muted);font-size:.92rem;line-height:1.65}

/* alerts */
.alert{display:none;align-items:flex-start;gap:.55rem;border-radius:10px;padding:.7rem .9rem;
  font-size:.8rem;line-height:1.5;margin-bottom:1.1rem}
.alert.show{display:flex}
.alert.err{background:rgba(255,95,87,.09);border:1px solid rgba(255,95,87,.3);color:var(--dn)}
.alert.ok{background:rgba(49,196,141,.09);border:1px solid rgba(49,196,141,.3);color:var(--up)}

/* fields */
.field{margin-bottom:1.15rem;animation:box-in .8s var(--ease-out) both}
.field:nth-of-type(1){animation-delay:.22s}
.field:nth-of-type(2){animation-delay:.3s}
.field label{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.inp{position:relative;display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;
  background:hsl(30 8% 5.5%);transition:border-color .25s,box-shadow .25s}
.inp:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,187,26,.12),0 0 24px rgba(240,187,26,.08)}
.inp input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);
  font-family:var(--font);font-size:.95rem;padding:.95rem 1.05rem;min-width:0}
.inp input::placeholder{color:hsl(35 8% 38%)}
/* Chrome/Edge autofill would otherwise paint a white/pale-blue box inside the
   dark shell — force the dark surface + light text through the UA styles. */
.inp input:-webkit-autofill,
.inp input:-webkit-autofill:hover,
.inp input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px hsl(30 8% 5.5%) inset;
  -webkit-text-fill-color:hsl(40 12% 96%);
  caret-color:hsl(40 12% 96%);
  transition:background-color 99999s ease-in-out 0s}
.inp .eye{display:flex;align-items:center;justify-content:center;background:transparent;border:none;
  color:var(--muted);padding:0 .95rem;transition:color .2s}
.inp .eye:hover{color:var(--gold)}

.row-between{display:flex;justify-content:space-between;align-items:center;margin:-.2rem 0 1.3rem}
.link{background:none;border:none;color:var(--muted);font-size:.78rem;transition:color .2s;padding:.2rem 0}
.link:hover{color:var(--gold)}
.back{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.6rem;transition:color .2s;padding:0}
.back:hover{color:var(--gold)}

/* the button — gold slab with a sweep fill */
.btn{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  border:none;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));color:#181307;
  font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  padding:1.05rem 1.2rem;margin-top:.4rem;
  box-shadow:0 10px 34px rgba(240,187,26,.22),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .2s var(--ease-out),box-shadow .25s,opacity .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 44px rgba(240,187,26,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn .b-fill{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:220% 100%;background-position:120% 0;transition:background-position .01s}
.btn:hover .b-fill{animation:btn-sheen 1.1s ease forwards}
@keyframes btn-sheen{to{background-position:-120% 0}}
.btn .arr{transition:transform .25s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn .spinner{display:none;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(24,19,7,.3);border-top-color:#181307;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.loading .spinner{display:inline-block}
.btn.loading .arr{display:none}

/* trust foot */
.foot{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.22em;color:hsl(35 8% 55%)}
.foot span{display:inline-flex;align-items:center;gap:.5rem}
.foot i{font-style:normal;color:var(--gold);font-size:.5rem;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Turnstile container spacing (when enabled) */
.box iframe{margin-bottom:.6rem}

/* ── RIGHT: the 3D pane ── */
.pane-3d{position:relative;flex:1;min-width:0;background:var(--bg2);overflow:hidden;
  border-left:1px solid var(--line-soft)}
.pane-3d #webgl{position:absolute;inset:0;width:100%;height:100%;display:block}
.p3-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(240,187,26,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,187,26,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 60%,#000 25%,transparent 80%);
  mask-image:radial-gradient(75% 60% at 50% 60%,#000 25%,transparent 80%)}
.p3-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 42% at 50% 68%,rgba(240,187,26,.13),transparent 72%),
    linear-gradient(180deg,rgba(11,10,8,.65),transparent 30%,transparent 70%,rgba(11,10,8,.75))}
.p3-badge{position:absolute;top:2rem;left:2.2rem;z-index:3;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  background:rgba(14,13,10,.6);border:1px solid var(--line-soft);border-radius:999px;padding:.55rem 1rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.p3-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--up);
  box-shadow:0 0 10px rgba(49,196,141,.6);animation:pulse 2.2s ease-in-out infinite}

/* floating stat chips over the city */
.p3-chip{position:absolute;z-index:3;display:flex;flex-direction:column;gap:.25rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--muted);
  background:rgba(17,15,12,.78);border:1px solid var(--line-soft);border-radius:12px;padding:.7rem 1rem;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:chip-float 5.5s ease-in-out infinite}
.p3-chip b{color:var(--gold-light);letter-spacing:.12em;font-weight:600;font-size:.72rem}
.p3-chip.a{right:9%;top:24%;animation-delay:.6s}
.p3-chip.b{left:8%;bottom:20%;animation-duration:6.5s}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.p3-quote{position:absolute;left:2.2rem;right:2.2rem;bottom:2rem;z-index:3;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:hsl(35 8% 46%);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.p3-quote b{color:var(--muted);font-weight:500}

/* ── responsive ── */
@media(max-width:979px){
  body{overflow:auto}
  .pane-3d{display:none}
  .pane-form{flex:1 1 100%;padding:6rem 1.6rem 3rem}
  .logo{left:1.6rem}
}
@media (prefers-reduced-motion: reduce){
  .box,.field{animation:none!important;opacity:1!important;transform:none!important}
  .btn:hover .b-fill{animation:none}
  .foot i,.p3-badge .dot,.p3-chip{animation:none}
}