/* ============================================================
   AURUM ATELIER — THE THRESHOLD
   A scroll-driven cinematic entrance. You move through an
   architectural void toward a luminous portal; a glass auth
   panel emerges. Azure light · ivory ink · warm brass accent.
   ============================================================ */

:root{
  --bg:        #07090C;
  --ink:       #ECE7DD;
  --ink-soft:  #B4BCC6;
  --ink-dim:   #9AA3AD;
  --ink-faint: #6A7480;
  --azure:        #2E9BD6;
  --azure-bright: #6FCBF5;
  --azure-deep:   #15527A;
  --brass:        #C2A269;
  --brass-bright: #E6CB94;
  --line:        rgba(236,231,221,0.12);
  --line-soft:   rgba(236,231,221,0.06);
  --line-strong: rgba(236,231,221,0.24);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Space Mono", Menlo, monospace;
  --e-out:  cubic-bezier(0.16,1,0.3,1);
  --e-soft: cubic-bezier(0.33,0,0.1,1);
}

html[lang="kn"]{
  --serif: "Noto Serif Kannada", "Cormorant Garamond", Georgia, serif;
  --sans:  "Noto Sans Kannada", "Jost", "Helvetica Neue", Arial, sans-serif;
}
html[lang="hi"]{
  --serif: "Noto Serif Devanagari", "Cormorant Garamond", Georgia, serif;
  --sans:  "Noto Sans Devanagari", "Jost", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (pointer:fine){ html.has-cursor, html.has-cursor *{ cursor:none !important; } }
button{ font-family:inherit; color:inherit; background:none; border:none; }
input{ font-family:inherit; color:inherit; background:none; border:none; outline:none; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(46,155,214,0.25); color:var(--azure-bright); }

/* the tall element that creates scroll distance */
.scroll-track{ height:780vh; position:relative; z-index:0; }

/* ============================================================
   STAGE — fixed cinematic viewport with 3D perspective
   ============================================================ */
.stage{
  position:fixed; inset:0; overflow:hidden; z-index:1;
  perspective:1400px; perspective-origin:50% 46%;
  background:
    radial-gradient(ellipse 120% 100% at 50% 38%, transparent 28%, rgba(0,0,0,0.78) 100%),
    radial-gradient(120% 80% at 50% 38%, #131c26 0%, #0a1017 45%, #07090C 75%);
}
.world{
  position:absolute; inset:0; transform-style:preserve-3d;
  will-change:transform;
}

/* soft luminous bloom behind the portal */
.bloom{
  position:absolute; left:50%; top:46%; width:60vmin; height:60vmin;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(46,155,214,0.32), rgba(46,155,214,0.08) 40%, transparent 70%);
  filter:blur(10px); opacity:0.5;
}

/* god-rays radiating from the portal */
.rays{
  position:absolute; left:50%; top:46%; width:130vmin; height:130vmin;
  transform:translate(-50%,-50%) rotate(0deg); transform-origin:center;
  pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(111,203,245,0.05) 0deg 2.5deg, transparent 2.5deg 11deg);
  -webkit-mask-image:radial-gradient(circle, transparent 8%, #000 22%, transparent 58%);
          mask-image:radial-gradient(circle, transparent 8%, #000 22%, transparent 58%);
  filter:blur(2px);
}

/* corridor walls — flanking planes in 3D (subtle, behind the doorway) */
.wall{
  position:absolute; top:-20%; height:140%; width:46vw;
  background:
    linear-gradient(90deg, rgba(13,18,24,0.15), rgba(20,28,36,0.55)),
    repeating-linear-gradient(0deg, rgba(236,231,221,0.03) 0 1px, transparent 1px 90px);
  box-shadow:inset 0 0 120px rgba(0,0,0,0.5); opacity:0.7;
}
.wall.left{  left:0;  transform-origin:left center;  transform:rotateY(38deg) translateZ(-120px); }
.wall.right{ right:0; transform-origin:right center; transform:rotateY(-38deg) translateZ(-120px); }
.wall .pilaster{
  position:absolute; top:0; bottom:0; width:14%;
  background:linear-gradient(90deg, rgba(236,231,221,0.05), transparent);
  border-left:1px solid var(--line-soft);
}

/* floor plane */
.floor{
  position:absolute; left:-20%; right:-20%; bottom:-10%; height:70%;
  transform-origin:bottom center; transform:rotateX(74deg) translateZ(-40px);
  background:
    linear-gradient(180deg, rgba(46,155,214,0.05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(236,231,221,0.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(236,231,221,0.04) 0 1px, transparent 1px 120px);
  opacity:0.6;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
}

/* the portal — luminous arched interior of the doorway, with a glowing orb */
.portal{
  position:absolute; left:50%; top:50%; width:min(38vmin,360px); height:80vh;
  transform:translate(-50%,-50%);
  border-radius:50% 50% 7px 7px / 30% 30% 5px 5px;
  background:
    radial-gradient(74% 46% at 50% 30%, rgba(178,226,252,0.62), rgba(64,142,196,0.30) 46%, rgba(15,37,57,0.55) 80%),
    linear-gradient(180deg, rgba(120,190,235,0.16), rgba(9,20,32,0.45));
  box-shadow:inset 0 0 120px rgba(13,38,62,0.7), 0 0 130px rgba(46,155,214,0.22);
}
.portal::after{
  content:""; position:absolute; left:50%; top:27%; width:34%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(226,245,255,0.50), rgba(132,206,243,0.34) 48%, transparent 72%);
  filter:blur(5px);
}

/* light beam cast from the portal toward the camera */
.beam{
  position:absolute; left:50%; top:46%; width:30vmin; height:120vh;
  transform:translate(-50%,0) rotateX(78deg) translateZ(-200px);
  transform-origin:top center;
  background:linear-gradient(180deg, rgba(111,203,245,0.30), transparent 70%);
  filter:blur(6px); opacity:0; mix-blend-mode:screen;
}

/* archway frame — the brass doorway, present from the first frame */
.arch{
  position:absolute; left:50%; top:50%; width:min(45vmin,432px); height:88vh;
  transform:translate(-50%,-50%);
  border:1.5px solid rgba(208,172,112,0.9); border-bottom:none;
  border-radius:50% 50% 0 0 / 18% 18% 0 0;
  box-shadow:0 0 70px rgba(198,162,105,0.22), inset 0 0 90px rgba(46,155,214,0.07);
  opacity:1;
}
.arch::before, .arch::after{
  content:""; position:absolute; top:6%; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(240,214,158,1), rgba(208,172,112,0.7) 50%, rgba(198,162,105,0.2));
  box-shadow:0 0 12px rgba(230,203,148,0.5);
}
.arch::before{ left:-2px; }
.arch::after{ right:-2px; }
/* inner brass hairline — the double-frame of the reference */
.arch > i{ display:none; }

/* world stacking + dust */
.world{ z-index:2; }
#dust{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0.4; }

/* volumetric fog — drifting mist around the doorway */
.fog{ position:absolute; inset:-12%; pointer-events:none; overflow:hidden; }
.fog.back{ z-index:1; }
.fog.front{ z-index:3; }
.fog i{
  position:absolute; display:block; border-radius:50%; mix-blend-mode:screen;
  filter:blur(70px); will-change:transform;
  background:radial-gradient(circle, rgba(150,178,206,0.35), rgba(96,126,158,0.15) 55%, transparent 72%);
}
.fog.front i{ background:radial-gradient(circle, rgba(170,196,222,0.24), transparent 68%); filter:blur(54px); }
@keyframes drift1{ 0%{transform:translate(-8%,0)} 50%{transform:translate(8%,-4%)} 100%{transform:translate(-8%,0)} }
@keyframes drift2{ 0%{transform:translate(6%,2%)} 50%{transform:translate(-7%,-3%)} 100%{transform:translate(6%,2%)} }

/* cursor torch glow (scene 1 darkness reveal) */
.torch-glow{
  position:absolute; width:280px; height:280px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:3; mix-blend-mode:screen;
  transition:none;
  background:radial-gradient(circle,
    rgba(150,215,255,0.18) 0%,
    rgba(86,190,240,0.10) 20%,
    rgba(46,155,214,0.04) 44%,
    transparent 64%);
  left:50%; top:50%;
}
/* darkness veil that lifts as you scroll */
.veil{
  position:absolute; inset:0; z-index:2; pointer-events:none; background:#080b0f; opacity:0.46;
}

/* white-out flash — "walking into the light" at the threshold */
.flash{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 46%, rgba(220,242,255,0.95), rgba(111,203,245,0.5) 35%, transparent 72%);
  mix-blend-mode:screen;
}

/* whisper words that surface during the journey */
.whispers{ position:fixed; inset:0; z-index:5; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.whisper{
  position:absolute; text-align:center; opacity:0; will-change:opacity,transform;
  font-family:var(--serif); font-weight:300; color:var(--ink);
  font-size:clamp(40px,7vw,108px); line-height:1; letter-spacing:-0.02em;
}
.whisper em{ font-style:italic; color:var(--azure-bright); }
.whisper .sub{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--azure); margin-top:18px; }

/* ============================================================
   GLASS PANEL — the auth surface that emerges
   ============================================================ */
.panel-anchor{
  position:fixed; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
  pointer-events:none; padding:24px;
}
.panel{
  position:relative; width:min(440px,92vw);
  padding:clamp(30px,4vw,52px);
  background:linear-gradient(180deg, rgba(18,24,31,0.72), rgba(10,14,18,0.82));
  backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,0.6), inset 0 1px 0 rgba(236,231,221,0.06);
  opacity:0; transform:translateY(38px) scale(0.93); filter:blur(16px);
  pointer-events:auto;
}
.panel .tick{ position:absolute; width:12px; height:12px; border:1px solid var(--azure); opacity:0.6; }
.panel .tick.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.panel .tick.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.panel .tick.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.panel .tick.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ============================================================
   AUTH FORM (rendered into #pbody)
   ============================================================ */
.pbody{ position:relative; }
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--azure);
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--azure); }
.eyebrow.brass{ color:var(--brass-bright); }
.eyebrow.brass::before{ background:var(--brass-bright); }

.p-title{
  font-family:var(--serif); font-weight:300; font-size:clamp(34px,4.4vw,52px); line-height:1.0;
  letter-spacing:-0.015em; color:var(--ink);
}
.p-title em{ font-style:italic; color:var(--azure-bright); }
.p-lede{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--ink-soft); margin-top:14px; max-width:36ch; }

.fields{ margin-top:34px; display:flex; flex-direction:column; gap:26px; }
.field{ position:relative; }
.field label{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); transition:color .4s; }
.field input{ width:100%; font-family:var(--serif); font-size:21px; color:var(--ink); padding:9px 0 11px; border-bottom:1px solid var(--line-strong); }
.field input::placeholder{ color:var(--ink-faint); font-style:italic; }
.field .ul{ position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--azure); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-out); }
.field.focus .ul{ transform:scaleX(1); }
.field.focus label{ color:var(--azure); }
.field .toggle{ position:absolute; right:0; top:30px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); transition:color .3s; }
.field .toggle:hover{ color:var(--azure-bright); }
.field .err{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-bright); margin-top:7px; min-height:12px; opacity:0; transition:opacity .3s; }
.field .err.show{ opacity:.9; }

/* progress for multi-step signup */
.steps-head{ display:flex; align-items:center; gap:14px; margin:30px 0 8px; }
.steps-head .ix{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); }
.steps-head .ix b{ color:var(--azure); font-weight:400; }
.steps-track{ flex:1; height:1px; background:var(--line); position:relative; }
.steps-fill{ position:absolute; left:0; top:0; height:1px; background:var(--azure); transition:width .6s var(--e-out); }

.opts{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px; }
.opt{ text-align:left; padding:13px 15px; border:1px solid var(--line); transition:border-color .35s, background .35s; }
.opt .on{ font-family:var(--serif); font-size:18px; color:var(--ink); display:block; }
.opt .od{ font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:4px; display:block; }
.opt:hover{ border-color:var(--line-strong); background:rgba(236,231,221,0.03); }
.opt.sel{ border-color:var(--azure); background:rgba(46,155,214,0.12); }
.opt.sel .on{ color:var(--azure-bright); }

.cta-row{ margin-top:36px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px; white-space:nowrap;
  padding:16px 26px; font-family:var(--sans); font-weight:500; font-size:11.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); border:1px solid var(--line-strong); overflow:hidden;
  transition:color .5s var(--e-out), border-color .5s;
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-101%);
  background:linear-gradient(120deg, var(--azure-deep), var(--azure), var(--azure-bright)); transition:transform .6s var(--e-out); }
.btn:hover{ color:#04222f; border-color:var(--azure); }
.btn:hover::before{ transform:translateX(0); }
.btn .arw{ transition:transform .5s var(--e-out); }
.btn:hover .arw{ transform:translateX(6px); }
.btn.solid{ background:var(--azure); color:#04222f; border-color:var(--azure); }
.btn.solid::before{ background:linear-gradient(120deg,var(--azure-bright),var(--azure)); }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn .prog{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--azure-bright); }
.btn.loading .prog{ animation:sweep 1.5s var(--e-soft) forwards; }
@keyframes sweep{ to{ width:100%; } }

.linkbtn{ position:relative; font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); padding-bottom:3px; transition:color .4s; }
.linkbtn::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--azure); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e-out); }
.linkbtn:hover{ color:var(--ink); }
.linkbtn:hover::after{ transform:scaleX(1); transform-origin:left; }
.back-mini{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); display:inline-flex; gap:8px; transition:color .3s, gap .4s; }
.back-mini:hover{ color:var(--ink); gap:13px; }

.alt-line{ margin-top:34px; padding-top:20px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-dim); }

.seal{ width:50px; height:50px; margin-bottom:22px; }

/* view fade */
.view{ animation:viewIn .6s var(--e-out) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ============================================================
   CHROME — fixed UI over the scene
   ============================================================ */
.chrome{ position:fixed; inset:0; z-index:7; pointer-events:none; }
.chrome a, .chrome button{ pointer-events:auto; }
.topbar{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:28px clamp(24px,5vw,64px); }
.brand{ display:flex; align-items:center; gap:13px; }
.brand .mark{ width:34px; height:34px; }
.brand .word{ font-family:var(--sans); font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink); }
.brand .word b{ font-weight:500; color:var(--azure-bright); }
.loc{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); text-align:right; line-height:1.9; }
.loc span{ color:var(--azure); }

/* hero text — centered inside the doorway */
.hero{ position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); text-align:center; width:min(42vmin,400px); transition:opacity .6s var(--e-out); will-change:transform,opacity; }
.hero.lift.hide{ opacity:0; }
.hero .ey{ font-family:var(--mono); font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--azure); margin-bottom:22px; }
.hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,5.6vw,74px); line-height:1.0; letter-spacing:-0.015em; }
.hero h1 em{ font-style:italic; color:var(--ink); }
.hero .sub{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-soft); margin-top:20px; line-height:1.5; }
/* row-reveal */
.rw{ display:block; overflow:hidden; }
.rw > span, .rw > *{ display:block; transform:translateY(110%); animation:rwUp 1s var(--e-out) both; }
.hero .ey.rw > span{ animation-delay:.1s; }
@keyframes rwUp{ to{ transform:translateY(0); } }

.corner{ position:absolute; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.corner.bl{ left:clamp(24px,5vw,64px); bottom:18px; }
.corner.br{ right:clamp(24px,5vw,64px); bottom:18px; color:var(--azure); }

/* scroll cue */
.cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; transition:opacity .5s; }
.cue span{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.cue .rail{ width:1px; height:46px; background:var(--line); position:relative; overflow:hidden; }
.cue .rail::after{ content:""; position:absolute; inset:0; background:var(--azure); transform:translateY(-100%); animation:railMove 2.2s var(--e-soft) infinite; }
@keyframes railMove{ 0%{transform:translateY(-100%)} 55%{transform:translateY(100%)} 100%{transform:translateY(100%)} }
.cue.hide{ opacity:0; }

/* preload */
.preload{ position:fixed; inset:0; z-index:50; background:#05070A; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transition:opacity .8s var(--e-out); }
.preload.done{ opacity:0; pointer-events:none; }
.preload .line{ width:0; height:1px; background:var(--azure); animation:plLine 1.6s var(--e-soft) forwards; }
@keyframes plLine{ to{ width:180px; } }
.preload .pct{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--ink-dim); }

/* custom cursor */
.cur-ring,.cur-dot{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:99; transform:translate(-50%,-50%); box-sizing:border-box; }
.cur-dot{ width:5px; height:5px; background:var(--ink); mix-blend-mode:difference; }
.cur-ring{ width:34px; height:34px; border:1px solid rgba(236,231,221,0.5); transition:width .4s var(--e-out), height .4s var(--e-out), border-color .4s, background .4s; }
.cur-ring.hover{ width:60px; height:60px; border-color:var(--azure); background:rgba(46,155,214,0.1); }
@media (pointer:coarse){ .cur-ring,.cur-dot,.torch-glow{ display:none; } }

/* reduced motion / no-js safety: reveal the panel */
@media (prefers-reduced-motion:reduce){
  .hero .rw > span, .hero .rw > *{ animation:none; transform:none; }
}
html:not(.has-js) .panel{ opacity:1; transform:none; }
html:not(.has-js) .veil{ opacity:0.3; }
html:not(.has-js) .scroll-track{ height:auto; }

@media (max-width: 880px) {
  .scroll-track { height: 0; overflow: hidden; }
  .panel-anchor { display: none; }
  .cue { display: none; }
  .corner.bl { display: none; }
  .torch-glow { width: 200px; height: 200px; }
  .arch { width: min(58vmin, 320px); height: 76vh; }
  .portal { width: min(50vmin, 280px); height: 70vh; }
  .whisper { font-size: clamp(28px, 6vw, 56px); padding: 0 24px; }
  .whisper .sub { font-size: 10px; }
  .stage { background-size: cover; }
}

@media (max-width: 520px) {
  .torch-glow { width: 150px; height: 150px; }
  .arch { width: min(70vmin, 260px); height: 68vh; }
  .portal { width: min(60vmin, 220px); height: 62vh; }
  .whisper { font-size: clamp(24px, 7vw, 40px); }
  .cur-ring, .cur-dot, .torch-glow { display: none; }
}

@media (max-width:720px){
  .hero h1{ font-size:clamp(38px,11vw,60px); }
  .loc{ display:none; }
}