/* ═══════════════════════════════════════════════════════════════
   WAITLIST GATE + SIGN-IN  (2026-07-05)
   Persistent signed-out surface. Two states inside one overlay:
     • .stz-view--welcome — the waitlist gate (founder's stanzai-gate.html)
     • .stz-view--login   — the sign-in screen (founder's stanzai-login.html)
   The founder's HTML/visual is preserved verbatim; class names are
   `stz-`-namespaced and everything is scoped under #stanzaiGate so the
   generic design classes (.content/.btn/.screen/.field/.foot/.mark) can
   never collide with the app's own CSS. Shared room background lives at
   /img/gate-room.jpg (decoded once from the identical base64 in both
   design files). Outfit + DM Mono are already loaded by 01-tokens.css;
   Abhaya Libre (the display face) is the only extra font pulled here.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;700&display=swap');

#stanzaiGate{
  position:fixed; inset:0; z-index:2147483000;
  background:#02040A;
  display:flex; justify-content:center;
  -webkit-font-smoothing:antialiased;
  /* palette + type — scoped, never leaks to :root */
  --ivory:#F2ECDA; --ivory-hi:#FBF6E7; --ivory-dim:rgba(242,236,218,0.72); --ivory-faint:rgba(242,236,218,0.42);
  --teal:#5FE3DE; --gold:#E4BD6E; --gold-hi:#F1D28A; --ink:#04060B;
  --fd:'Abhaya Libre',serif; --fb:'Outfit',sans-serif; --fm:'DM Mono',monospace;
}
/* id+attr specificity beats the id-only display:flex above */
#stanzaiGate[hidden]{ display:none; }

.stz-gate-screen{
  position:relative; width:100%; max-width:440px;
  min-height:100vh; min-height:100dvh; overflow:hidden;
  background:#04060B url("/img/gate-room.jpg") center top/cover no-repeat;
}

/* view toggle — welcome shown by default, login on demand */
#stanzaiGate .stz-view--login{ display:none; }
#stanzaiGate.stz-show-login .stz-view--welcome{ display:none; }
#stanzaiGate.stz-show-login .stz-view--login{ display:block; }

/* ── scrim: gentle top darken for wordmark, keep the bright middle,
   seat buttons at bottom (from the gate design) */
.stz-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,14,0.34) 0%, rgba(4,7,14,0) 22%, rgba(4,7,14,0) 48%, rgba(4,7,14,0.52) 82%, rgba(4,7,14,0.86) 100%),
    radial-gradient(120% 60% at 50% 42%, transparent 40%, rgba(4,7,14,0.28) 100%);
}
.stz-scrim--login{
  background:linear-gradient(180deg, rgba(4,7,14,0.42) 0%, rgba(4,7,14,0.15) 26%, rgba(4,7,14,0.30) 55%, rgba(4,7,14,0.68) 100%);
}

.stz-content{
  position:relative; z-index:2; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:calc(env(safe-area-inset-top) + 60px) 32px calc(env(safe-area-inset-bottom) + 42px);
}
.stz-content--login{
  align-items:stretch; text-align:left;
  padding:calc(env(safe-area-inset-top) + 58px) 30px calc(env(safe-area-inset-bottom) + 34px);
}

.stz-mark{
  font-family:var(--fd); font-weight:700; font-size:30px; letter-spacing:0.01em;
  color:var(--ivory-hi); text-shadow:0 2px 30px rgba(0,0,0,0.4);
}
.stz-content--login .stz-mark{ font-size:26px; text-shadow:0 2px 26px rgba(0,0,0,0.45); }

/* ── waitlist (welcome) view ── */
.stz-mid{ margin:auto; max-width:23rem; }
.stz-eyebrow{
  font-family:var(--fm); font-size:10px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--teal); margin-bottom:20px; opacity:0.92;
}
.stz-mid h1{
  font-family:var(--fd); font-weight:500; font-size:28px; line-height:1.16; letter-spacing:-0.01em;
  color:var(--ivory-hi); text-shadow:0 2px 26px rgba(0,0,0,0.45);
}
.stz-mid p{
  font-family:var(--fb); font-weight:300; font-size:15.5px; line-height:1.62;
  color:var(--ivory-dim); margin-top:18px; text-shadow:0 1px 18px rgba(0,0,0,0.4);
}
.stz-actions{ width:100%; max-width:22rem; display:flex; flex-direction:column; gap:12px; }

/* ── gold-frame button (shared by both views) ── */
.stz-btn{
  height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer;
  font-family:var(--fb); font-weight:500; font-size:15px; letter-spacing:0.005em;
  transition:transform .16s ease, box-shadow .3s ease;
}
.stz-btn:active{ transform:scale(.985); }
.stz-btn-primary{
  position:relative; border:none; overflow:hidden; color:#E7CB92;
  background:linear-gradient(to right,#5E410A,#EACB84,#8A6A22,#5E410A,#EACB84,#5E410A);
  background-size:250% 100%; background-position:left center;
  box-shadow:0 12px 30px -16px rgba(0,0,0,0.7);
  transition:background-position 1.1s ease;
}
.stz-btn-primary::before{
  content:""; position:absolute; inset:1.6px; border-radius:13px; z-index:0;
  background:linear-gradient(180deg,rgba(13,17,25,0.93),rgba(5,8,14,0.96));
}
.stz-btn-primary span{
  position:relative; z-index:1; letter-spacing:0.03em;
  background:linear-gradient(180deg,#F2DEB0,#D6B56E);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stz-btn-primary:hover{ background-position:right center; }
.stz-content--login .stz-btn{ width:100%; }
#authSubmitBtn:disabled{ opacity:.8; pointer-events:none; }

.stz-foot{
  margin-top:22px; text-align:center;
  font-family:var(--fm); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ivory-dim); text-shadow:0 1px 12px rgba(0,0,0,0.4);
}
.stz-foot a{ color:var(--gold); text-decoration:none; cursor:pointer; }
.stz-foot a:hover{ color:var(--gold-hi); }
.stz-content--login .stz-foot{ margin-top:24px; letter-spacing:0.14em; color:var(--ivory-faint); }

/* ── sign-in (login) view ── */
.stz-back{
  position:absolute; top:calc(env(safe-area-inset-top) + 20px); left:24px;
  width:42px; height:42px; border-radius:50%; z-index:3;
  display:flex; align-items:center; justify-content:center;
  color:var(--ivory-dim); text-decoration:none; cursor:pointer;
  border:1px solid rgba(242,236,218,0.16); background:rgba(255,255,255,0.05);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .25s,border-color .25s;
}
.stz-back:hover{ color:var(--ivory); border-color:rgba(242,236,218,0.35); }
.stz-head{ text-align:center; margin-top:8px; }
.stz-head h1{
  font-family:var(--fd); font-weight:500; font-size:27px; line-height:1.1;
  color:var(--ivory-hi); margin-top:30px; letter-spacing:-0.01em; text-shadow:0 2px 24px rgba(0,0,0,0.5);
}
.stz-sub{
  font-family:var(--fb); font-weight:300; font-size:14.5px; color:var(--ivory-dim);
  margin-top:9px; text-shadow:0 1px 16px rgba(0,0,0,0.4);
}
.stz-form{ margin:auto 0; width:100%; max-width:23rem; align-self:center; padding-top:30px; }

/* #authError is written to (textContent + inline color) by the existing
   handleAuth()/handleForgotPassword() — keep it visible-when-nonempty
   rather than the design's display:none/.show toggle. */
#authError{
  color:#F0A9A9; font-family:var(--fb); font-size:13px; line-height:1.4;
  margin-bottom:14px; text-align:center;
}
#authError:empty{ margin-bottom:0; }

.stz-field{ position:relative; margin-bottom:13px; }
.stz-field input{
  width:100%; height:55px; background:rgba(10,14,22,0.55);
  border:1px solid rgba(242,236,218,0.16); border-radius:13px;
  padding:0 16px; color:var(--ivory); font-family:var(--fb); font-size:15px; outline:none;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .3s,background .3s;
}
.stz-field input::placeholder{ color:var(--ivory-faint); }
.stz-field input:focus{ border-color:rgba(95,227,222,0.5); background:rgba(10,14,22,0.72); }
.stz-field.stz-pw input{ padding-right:50px; }
.stz-pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--ivory-faint); cursor:pointer; padding:10px; display:flex;
}
.stz-pw-toggle:hover{ color:var(--ivory-dim); }
.stz-row-forgot{ display:flex; justify-content:flex-end; margin:2px 2px 20px; }
.stz-link-sm{
  font-family:var(--fm); font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--teal); text-decoration:none; opacity:.9; cursor:pointer;
  background:none; border:0; padding:0;
}
.stz-link-sm:hover{ opacity:1; }

@media (max-height:720px){
  .stz-mark{ font-size:26px; }
  .stz-mid h1{ font-size:24px; }
  .stz-btn{ height:52px; }
  .stz-head h1{ font-size:24px; margin-top:22px; }
  .stz-form{ padding-top:20px; }
}

/* ── Desktop (≥1024px): full-screen gate ─────────────────────────
   The phone-width room-photo card becomes a full-viewport surface.
   The animated Grainient gradient (grainient-bg.js, mounted on
   #stanzaiGate by _v9SyncGateGrainient in engine.js, canvas z-index:0)
   replaces the room photo; the screen goes transparent and sits at
   z-index:1 so the same centered content reads over the gradient. */
@media (min-width:1024px){
  #stanzaiGate .stz-gate-screen{
    max-width:none;
    background:transparent;
    z-index:1;
  }
  /* gentler vignette — the gradient carries its own depth full-bleed */
  #stanzaiGate .stz-scrim{
    background:
      linear-gradient(180deg, rgba(4,7,14,0.22) 0%, rgba(4,7,14,0) 24%, rgba(4,7,14,0) 55%, rgba(4,7,14,0.38) 100%);
  }
  #stanzaiGate .stz-scrim--login{
    background:linear-gradient(180deg, rgba(4,7,14,0.26) 0%, rgba(4,7,14,0.08) 30%, rgba(4,7,14,0.16) 60%, rgba(4,7,14,0.42) 100%);
  }
  /* let the layout breathe at desktop scale */
  #stanzaiGate .stz-mark{ font-size:34px; }
  #stanzaiGate .stz-mid{ max-width:27rem; }
  #stanzaiGate .stz-mid h1{ font-size:34px; }
  #stanzaiGate .stz-mid p{ font-size:16.5px; }
  #stanzaiGate .stz-actions{ max-width:23rem; }
  #stanzaiGate .stz-content--login .stz-mark{ font-size:28px; }
  #stanzaiGate .stz-head h1{ font-size:30px; }
  #stanzaiGate .stz-form{ max-width:24rem; }
  #stanzaiGate .stz-back{ top:28px; left:28px; }
}