/* ============================================================
   VAANI · AUTH  — sign in & begin
   Tokens lifted verbatim from the Vaani design system.
   Imported from the Vaani Design project (Vaani Auth/vaani-auth.css)
   and extended with a guest-first entry + an honest OAuth/email
   scaffold state, per the product's guest-first, no-login-wall vow.
   ============================================================ */
:root {
  --void:#050407; --void-2:#0a0810; --ink:#f4ecdc; --ink-soft:#cdc3ad; --ink-faint:#8b8270;
  --gold:#d9b25a; --gold-lit:#f0d68a; --gold-deep:#9a7b34; --gold-glow:rgba(217,178,90,.5);
  --line:rgba(217,178,90,.16); --line-soft:rgba(217,178,90,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Cormorant Garamond",Georgia,serif; --body:"Spectral",Georgia,serif;
  --display:"Fraunces","Cormorant Garamond",Georgia,serif;
  --label:"Cinzel","Cormorant Garamond",serif; --deva:"Tiro Devanagari Sanskrit",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void); color:var(--ink); font-family:var(--body);
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--gold-lit); text-decoration:none}

.auth{ display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; }

/* ---------------- ceremonial panel ---------------- */
.rite{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; padding:48px 56px;
  border-right:1px solid var(--line-soft);
}
.rite::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 30% 8%, rgba(176,138,64,.22), transparent 55%),
    radial-gradient(90% 70% at 90% 108%, rgba(120,62,34,.16), transparent 60%),
    linear-gradient(180deg,var(--void),var(--void-2) 55%,#030205);
}
#stars{ position:absolute; inset:0; z-index:0; }
.rite > *{ position:relative; z-index:1; }

.rite-brand{ display:flex; align-items:center; gap:13px; }
.rite-brand .seal{ width:38px; height:38px; overflow:visible; }
.rite-brand b{ font-family:var(--display); font-weight:600; font-size:21px; line-height:1; }
.rite-brand small{ font-family:var(--label); font-size:8.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-top:5px; }

.rite-heart{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:34px; }
.orb-box{ position:relative; display:grid; place-items:center; width:150px; height:150px; }
.orb-core{
  width:150px; height:150px; border-radius:50%; position:relative; z-index:2;
  background:radial-gradient(circle at 42% 36%,#fff6dd 0%,#f0d68a 42%,#b9923f 78%,#6d531f 100%);
  box-shadow:inset -8px -10px 26px rgba(60,40,10,.6), inset 8px 8px 26px rgba(255,246,221,.55), 0 0 60px -6px var(--gold-glow);
  animation:breathe 7s var(--ease) infinite;
}
.orb-halo{ position:absolute; inset:-22%; border-radius:50%; z-index:1;
  background:radial-gradient(circle,var(--gold-glow),transparent 62%); filter:blur(12px); animation:halo 7s ease-in-out infinite; }
.orb-ring{ position:absolute; inset:-42%; border-radius:50%; z-index:0; border:1px solid var(--line); animation:spin 38s linear infinite; }
.orb-ring::after{ content:""; position:absolute; inset:14%; border-radius:50%; border:1px solid var(--line-soft); }
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes halo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
.seal-hero{ position:relative; z-index:2; width:132px; height:132px; overflow:visible;
  filter:drop-shadow(0 6px 34px rgba(217,178,90,.32)); animation:breathe 7s var(--ease) infinite; }
@keyframes binduPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.7}}

.verse{ max-width:420px; }
.verse .deva{ font-family:var(--deva); font-size:27px; line-height:1.85; color:var(--gold-lit); }
.verse .tr{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-soft); margin-top:16px; }
.verse .src{ font-family:var(--label); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-top:16px; }
.verse-fade{ transition:opacity 1s var(--ease); }

.rite-foot{ font-family:var(--serif); font-style:italic; color:var(--ink-faint); font-size:15px; display:flex; align-items:center; gap:14px; }
.rite-foot span{ height:1px; width:38px; background:linear-gradient(90deg,var(--line),transparent); }

/* ---------------- form panel ---------------- */
.gate{ display:flex; align-items:center; justify-content:center; padding:56px 40px; position:relative; }
.gate-inner{ width:100%; max-width:400px; }

.tabs{ display:flex; gap:6px; padding:5px; border:1px solid var(--line-soft); border-radius:999px; margin-bottom:40px; position:relative; background:rgba(11,10,20,.4); }
.tabs button{ flex:1; font-family:var(--label); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); background:none; border:none; cursor:pointer; padding:12px 0; border-radius:999px; position:relative; z-index:1; transition:color .5s var(--ease); }
.tabs button.on{ color:#1a1407; }
.tab-glide{ position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:linear-gradient(135deg,var(--gold-lit),var(--gold) 55%,var(--gold-deep)); box-shadow:0 8px 26px -12px var(--gold-glow); transition:transform .55s var(--ease); z-index:0; }
.auth[data-mode="begin"] .tab-glide{ transform:translateX(100%); }

.gate h1{ font-family:var(--display); font-weight:500; font-size:34px; line-height:1.12; letter-spacing:-.01em; margin-bottom:8px; }
.gate .dek{ font-family:var(--serif); font-style:italic; color:var(--gold-lit); font-size:18px; margin-bottom:34px; }

.oauth{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.btn-oauth{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:14px; border-radius:12px; border:1px solid var(--line); background:rgba(244,236,220,.02); color:var(--ink); font-family:var(--body); font-size:15px; cursor:pointer; transition:all .4s var(--ease); }
.btn-oauth:hover{ border-color:var(--gold); background:rgba(217,178,90,.05); }
.btn-oauth svg{ width:18px; height:18px; flex:none; }

.sep{ display:flex; align-items:center; gap:16px; margin:26px 0; color:var(--ink-faint); font-family:var(--label); font-size:10px; letter-spacing:.24em; text-transform:uppercase; }
.sep::before,.sep::after{ content:""; height:1px; flex:1; background:var(--line-soft); }

.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--label); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
.field .wrap{ position:relative; }
.field input{ width:100%; background:rgba(11,10,20,.6); border:1px solid var(--line); border-radius:12px; padding:15px 16px; color:var(--ink); font-family:var(--body); font-size:16px; outline:none; transition:border-color .4s,box-shadow .4s; }
.field input::placeholder{ color:var(--ink-faint); }
.field input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,178,90,.09); }
.field .peek{ position:absolute; right:13px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--ink-faint); cursor:pointer; font-family:var(--label); font-size:9px; letter-spacing:.14em; text-transform:uppercase; transition:color .3s; }
.field .peek:hover{ color:var(--gold-lit); }

.row-between{ display:flex; align-items:center; justify-content:space-between; margin:-4px 0 26px; }
.remember{ display:flex; align-items:center; gap:9px; cursor:pointer; color:var(--ink-soft); font-size:14px; }
.remember input{ position:absolute; opacity:0; pointer-events:none; }
.box{ width:17px; height:17px; border:1px solid var(--line); border-radius:5px; display:grid; place-items:center; transition:all .3s; }
.remember input:checked + .box{ background:linear-gradient(135deg,var(--gold-lit),var(--gold)); border-color:var(--gold-lit); }
.box svg{ width:11px; height:11px; opacity:0; transition:opacity .2s; }
.remember input:checked + .box svg{ opacity:1; }
.forgot{ font-family:var(--label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.forgot:hover{ color:var(--gold-lit); }

.btn-submit{ width:100%; padding:16px; border-radius:12px; border:none; cursor:pointer; font-family:var(--label); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#1a1407; background:linear-gradient(135deg,var(--gold-lit),var(--gold) 55%,var(--gold-deep)); box-shadow:0 0 0 1px rgba(240,214,138,.4),0 16px 44px -18px var(--gold-glow); display:inline-flex; align-items:center; justify-content:center; gap:11px; transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.btn-submit:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--gold-lit),0 22px 54px -16px var(--gold-glow); }
.btn-submit .arrow{ transition:transform .4s var(--ease); }
.btn-submit:hover .arrow{ transform:translateX(4px); }

.begin-only{ max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease),opacity .45s; }
.auth[data-mode="begin"] .begin-only{ max-height:120px; opacity:1; }
.enter-only{ max-height:120px; opacity:1; overflow:hidden; transition:max-height .55s var(--ease),opacity .45s; }
.auth[data-mode="begin"] .enter-only{ max-height:0; opacity:0; }

.fine{ text-align:center; color:var(--ink-faint); font-size:13px; margin-top:26px; line-height:1.6; }
.fine a{ border-bottom:1px solid var(--line); }
.swap{ text-align:center; margin-top:22px; color:var(--ink-soft); font-size:15px; }
.swap button{ background:none; border:none; color:var(--gold-lit); font-family:var(--serif); font-style:italic; font-size:16px; cursor:pointer; }
.swap button:hover{ color:var(--gold); }

.gate-mark{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--deva); font-size:13px; letter-spacing:.1em; color:var(--ink-faint); opacity:.5; }

/* ---------------- guest-first entry (added) ----------------
   The whole experience must work with no account and no login
   wall — so an always-present, unmissable way straight into the
   Chamber sits beneath the ceremony, never behind it. */
.guest{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft); text-align:center; }
.guest a{ display:inline-flex; align-items:center; gap:9px; font-family:var(--label); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:12px 24px; transition:all .4s var(--ease); }
.guest a:hover{ border-color:var(--gold); color:var(--gold-lit); background:rgba(217,178,90,.05); }
.guest a .arrow{ transition:transform .4s var(--ease); }
.guest a:hover .arrow{ transform:translateX(4px); }
.guest .note{ display:block; margin-top:12px; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-faint); }

/* Honest scaffold state: accounts/OAuth aren't live yet, so say so
   plainly and hand the seeker straight to the guest path rather than
   failing silently. */
.scaffold-note{ max-height:0; opacity:0; overflow:hidden; margin-top:0;
  border:1px solid var(--line-soft); border-radius:12px; background:rgba(217,178,90,.03);
  font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.55; color:var(--ink-soft);
  transition:max-height .5s var(--ease),opacity .4s,margin-top .5s var(--ease); }
.scaffold-note.show{ max-height:200px; opacity:1; margin-top:20px; padding:16px 18px; }
.scaffold-note a{ border-bottom:1px solid var(--line); }

@media (prefers-reduced-motion:reduce){ *{animation:none!important} }
@media (max-width:900px){
  .auth{ grid-template-columns:1fr; }
  .rite{ display:none; }
  .gate{ min-height:100vh; }
}