/* Chthonic Portal — landing page styles
   Theme defaults imported from generated file */
@import './_generated-defaults.css';

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;height:100%;overflow:hidden}
body{font-family:var(--font-serif);background-color:var(--bg);color:var(--fg);height:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── Ambient void: layered drifting gradients ── */
body::before{content:'';position:fixed;inset:-50%;width:200%;height:200%;background:radial-gradient(ellipse 600px 400px at 30% 40%,rgba(18,14,28,.8) 0%,transparent 70%),radial-gradient(ellipse 500px 600px at 70% 60%,rgba(10,20,16,.6) 0%,transparent 70%),radial-gradient(ellipse 800px 300px at 50% 80%,rgba(24,12,18,.4) 0%,transparent 60%);animation:ambientDrift 35s ease-in-out infinite alternate;pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:-50%;width:200%;height:200%;background:radial-gradient(ellipse 400px 500px at 65% 25%,rgba(10,12,24,.7) 0%,transparent 60%),radial-gradient(ellipse 700px 400px at 15% 75%,rgba(16,10,14,.5) 0%,transparent 60%);animation:ambientDrift2 45s ease-in-out infinite alternate;pointer-events:none;z-index:0}
@keyframes ambientDrift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(-3%,2%) scale(1.02)}66%{transform:translate(2%,-1%) scale(.98)}100%{transform:translate(-1%,3%) scale(1.01)}}
@keyframes ambientDrift2{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(2%,-2%) rotate(.8deg) scale(1.03)}100%{transform:translate(-2%,1%) rotate(-.4deg) scale(.99)}}

/* ── Purple ambient glow (WNW light source) ── */
.ambient-glow{position:fixed;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(88,56,120,.06) 0%,rgba(72,44,108,.03) 40%,transparent 75%);pointer-events:none;z-index:1;animation:glowDrift 30s ease-in-out infinite alternate}
@keyframes glowDrift{0%{opacity:.85;transform:translate(0,0) scale(1)}50%{opacity:1;transform:translate(1.5%,-1%) scale(1.04)}100%{opacity:.9;transform:translate(-1%,1.5%) scale(1.02)}}

/* ── Roaming purple accents ── */
/* ROAMING_LIGHTS=3, baked at build time, not runtime-configurable */
.ambient-glow-sweep-0{position:fixed;inset:0;background:radial-gradient(ellipse 25% 21% at 50% 50%,rgba(100,60,140,.13) 0%,rgba(80,48,116,.06) 40%,transparent 70%);pointer-events:none;z-index:1;animation:glowSweep0 50s ease-in-out infinite}
@keyframes glowSweep0{0%{opacity:0.6;transform:translate(-30%,-15%) scale(0.9)}15%{opacity:0.85;transform:translate(-8%,10%) scale(1.05)}35%{opacity:0.7;transform:translate(25%,-5%) scale(0.95)}55%{opacity:0.9;transform:translate(15%,18%) scale(1.08)}75%{opacity:0.65;transform:translate(-18%,5%) scale(1)}100%{opacity:0.6;transform:translate(-30%,-15%) scale(0.9)}}
.ambient-glow-sweep-1{position:fixed;inset:0;background:radial-gradient(ellipse 28% 24% at 50% 50%,rgba(100,60,140,.13) 0%,rgba(80,48,116,.06) 40%,transparent 70%);pointer-events:none;z-index:1;animation:glowSweep1 63s ease-in-out infinite}
@keyframes glowSweep1{0%{opacity:0.6;transform:translate(28%,-18%) scale(0.9)}15%{opacity:0.85;transform:translate(-5%,-12%) scale(1.05)}35%{opacity:0.7;transform:translate(-8%,24%) scale(0.95)}55%{opacity:0.9;transform:translate(-23%,4%) scale(1.08)}75%{opacity:0.65;transform:translate(5%,-18%) scale(1)}100%{opacity:0.6;transform:translate(28%,-18%) scale(0.9)}}
.ambient-glow-sweep-2{position:fixed;inset:0;background:radial-gradient(ellipse 31% 27% at 50% 50%,rgba(100,60,140,.13) 0%,rgba(80,48,116,.06) 40%,transparent 70%);pointer-events:none;z-index:1;animation:glowSweep2 76s ease-in-out infinite}
@keyframes glowSweep2{0%{opacity:0.6;transform:translate(2%,33%) scale(0.9)}15%{opacity:0.85;transform:translate(13%,2%) scale(1.05)}35%{opacity:0.7;transform:translate(-17%,-19%) scale(0.95)}55%{opacity:0.9;transform:translate(8%,-22%) scale(1.08)}75%{opacity:0.65;transform:translate(13%,13%) scale(1)}100%{opacity:0.6;transform:translate(2%,33%) scale(0.9)}}

/* ── Vignette ── */
.vignette{position:fixed;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 0%,rgba(6,6,8,.7) 100%);pointer-events:none;z-index:1}

/* ── Static glitch canvas ── */
.glitch-canvas{position:fixed;inset:0;pointer-events:none;z-index:2}

/* ── Main container ── */
.container{text-align:center;padding:2rem;max-width:640px;position:relative;z-index:3;animation:fadeIn 2.5s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Logo button ── */
.logo-btn{background:none;border:none;cursor:pointer;padding:0;line-height:0;color:var(--fg);-webkit-tap-highlight-color:transparent;display:inline-block;position:relative}
.logo-btn::before{content:'';position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;transform:translate(-50%,-50%);background:radial-gradient(ellipse 50% 45% at 50% 50%,rgba(88,56,120,.20) 0%,rgba(72,44,108,.11) 25%,rgba(56,32,88,.05) 50%,transparent 75%);pointer-events:none;z-index:-1;animation:glowDrift 30s ease-in-out infinite alternate}
.logo-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:8px;border-radius:2px}

/* ── Sigil SVG ── */
.sigil{width:120px;height:120px;overflow:visible;display:block;margin:0 auto}
.sigil-ring{fill:none;stroke:var(--accent-dim);stroke-width:.5}
.sigil-ring-outer{opacity:.15;animation:sigilBreathe 8s ease-in-out infinite}
.sigil-ring-inner{stroke:var(--accent);stroke-width:.8;opacity:1;animation:sigilBreatheInner 8s ease-in-out infinite;animation-delay:-4s}
.sigil-geometry{fill:none;stroke:var(--accent-dim);stroke-width:.75;opacity:.15;animation:sigilBreathe 8s ease-in-out infinite}
.sigil-rotate-slow{animation:sigilRotate 120s linear infinite;transform-origin:60px 60px}
.sigil-rotate-reverse{animation:sigilRotate 90s linear infinite reverse;transform-origin:60px 60px}
.sigil-letter{fill:var(--fg);font-family:var(--font-serif);font-size:26px;font-weight:normal}
.sigil-letter-knockout{fill:var(--bg);stroke:var(--bg);stroke-width:4px;paint-order:stroke fill}
@keyframes sigilBreathe{0%,100%{opacity:.15}50%{opacity:.35}}
@keyframes sigilBreatheInner{0%,100%{opacity:1}50%{opacity:.75}}
@keyframes sigilRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Typography ── */
h1{font-size:1.75rem;font-weight:normal;letter-spacing:.35em;text-transform:uppercase;color:var(--fg);margin:3rem 0 .5rem;text-shadow:0 0 40px rgba(139,125,107,.08)}
.divider{width:80px;height:3px;margin:2rem auto;position:relative}
.divider svg{width:100%;height:100%}
.divider-line{fill:none;stroke:var(--accent-dim);stroke-width:.5}
.subtitle{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:3rem}
.tagline{font-size:1.05rem;line-height:1.8;color:var(--muted);font-style:italic;max-width:420px;margin:0 auto}

/* ── Access gate ── */
.access-gate{margin-top:3rem;text-align:center;min-height:110px;display:grid;grid-template-rows:1fr auto;align-items:end;justify-items:center;gap:0}
.access-label{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-bottom:1.4rem;align-self:end}
.access-form{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;clip-path:circle(0% at 12.5% 50%);will-change:clip-path;z-index:2;pointer-events:none;background:var(--bg);border-radius:var(--radius)}
.access-form.active{pointer-events:auto}

/* Split layer */
.split-layer{position:absolute;inset:0;display:flex;align-items:stretch;border-radius:var(--radius);overflow:hidden;background:rgba(10,10,12,.85);border:1px solid var(--accent-dim);box-shadow:0 0 0 1px rgba(92,82,68,.08),0 0 30px rgba(92,82,68,.04),inset 0 1px 4px rgba(0,0,0,.4);cursor:pointer;z-index:1}
.split-layer.hidden{pointer-events:none}
.split-half{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;background:none;border:none;cursor:pointer;font-family:var(--font-serif);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .25s ease,background .25s ease;padding:0 .5rem}
.split-half:hover{color:var(--fg);background:rgba(139,125,107,.08)}
.split-half:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.split-half svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.6}
.split-divider{width:1px;align-self:center;height:22px;background:var(--accent-dim);flex-shrink:0}

/* Back button */
.back-btn{position:absolute;left:8px;background:none;border:none;cursor:pointer;padding:.3rem;display:flex;align-items:center;justify-content:center;opacity:.3;transition:opacity .3s ease}
.back-btn:hover{opacity:.7}
.back-btn svg{width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.access-input-wrap{position:relative;display:inline-flex;align-items:center}
.access-input{font-family:var(--font-serif);font-size:.85rem;letter-spacing:.15em;color:var(--fg);background:rgba(10,10,12,.85);border:1px solid var(--accent-dim);border-radius:var(--radius);padding:.7rem 3rem .7rem 2.6rem;width:320px;outline:none;transition:border-color .5s ease,box-shadow .5s ease,background .5s ease;box-shadow:0 0 0 1px rgba(92,82,68,.08),0 0 30px rgba(92,82,68,.04),inset 0 1px 4px rgba(0,0,0,.4)}
.access-input::placeholder{color:var(--muted);opacity:.35;letter-spacing:.12em;font-style:italic}
.access-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px rgba(139,125,107,.15),0 0 40px rgba(139,125,107,.06),0 0 80px rgba(92,82,68,.03),inset 0 1px 4px rgba(0,0,0,.4);background:rgba(14,14,18,.95)}
.access-input:disabled{opacity:.4;cursor:not-allowed}
.access-submit{position:absolute;right:6px;background:none;border:none;cursor:pointer;padding:.4rem;display:flex;align-items:center;justify-content:center;opacity:.3;transition:opacity .4s ease,transform .3s ease}
.access-submit:hover{opacity:.7;transform:scale(1.1)}
.access-submit svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Wipe container: hosts both input layer and device login layer ── */
.wipe-container{position:relative;width:320px;height:42px}
.device-login-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;clip-path:circle(0% at 87.5% 50%);pointer-events:none;will-change:clip-path;background:var(--bg);border-radius:var(--radius);z-index:2}
.device-login-layer.active{pointer-events:auto}
.device-login-btn{display:inline-block;position:relative;width:320px;padding:.7rem 1.4rem;font-family:var(--font-serif);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--bg);background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease,border-color .15s ease}
.device-login-btn:hover,.device-login-btn:focus-visible{background:var(--accent-dim);border-color:var(--accent-dim);outline:none}
.device-login-btn svg.chevron-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.device-login-btn .back-btn{position:absolute;left:8px;top:50%;transform:translateY(-50%)}
.device-login-btn .back-btn svg{stroke:var(--bg)}

/* ── Processing / denied input states ── */
.access-input.processing{border-color:var(--accent);animation:inputPulse 1.2s ease-in-out infinite}
.access-input.denied{border-color:#6b3a3a;box-shadow:0 0 0 1px rgba(107,58,58,.2),0 0 40px rgba(107,58,58,.08),inset 0 1px 4px rgba(0,0,0,.4);animation:inputDenied .4s ease}
@keyframes inputPulse{0%,100%{box-shadow:0 0 0 1px rgba(139,125,107,.15),0 0 30px rgba(139,125,107,.04),inset 0 1px 4px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 1px rgba(139,125,107,.3),0 0 50px rgba(139,125,107,.1),inset 0 1px 4px rgba(0,0,0,.4)}}
@keyframes inputDenied{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}100%{transform:translateX(0)}}

/* ── Status area (inline messages) ── */
.status-area{min-height:1.125rem;font-size:.75rem;color:var(--muted);margin-top:.75rem;letter-spacing:.04em;transition:color .15s ease;text-align:center}
.status-area[data-error="true"]{color:var(--fg)}

/* ── Denied overlay pill ── */
.denied-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .6s ease}
.denied-overlay.visible{opacity:1}
.denied-overlay-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(40,8,8,.5) 0%,rgba(6,6,8,.7) 100%)}
.denied-pill{position:relative;font-family:var(--font-serif);font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;color:#a85454;background:rgba(14,8,8,.92);border:1px solid rgba(107,58,58,.4);border-radius:var(--radius);padding:.85rem 2.8rem;box-shadow:0 0 0 1px rgba(107,58,58,.1),0 0 60px rgba(107,58,58,.12),0 0 120px rgba(80,20,20,.06),inset 0 1px 6px rgba(0,0,0,.5);transform:scale(.92);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.denied-overlay.visible .denied-pill{transform:scale(1)}
.denied-overlay.fade-out{opacity:0;transition:opacity 1.2s ease}
.denied-overlay.fade-out .denied-pill{transform:scale(1.04);transition:transform 1.2s ease,opacity 1.2s ease}

/* ── Footer ── */
footer{position:fixed;bottom:0;width:100%;text-align:center;padding:1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom,0px));z-index:3}
.legal{font-size:.7rem;letter-spacing:.1em;color:var(--muted);opacity:.5}

/* ── Antechamber state ── */
.antechamber-text{font-size:.95rem;line-height:1.8;color:var(--muted);max-width:420px;margin:0 auto;margin-bottom:1.4rem;text-align:center;align-self:end;opacity:0;transform:translateY(6px);transition:opacity .6s ease .1s,transform .6s ease .1s}
.proceed-btn{display:inline-block;width:320px;padding:.7rem 1.4rem;font-family:var(--font-serif);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--fg);background:linear-gradient(to right,var(--accent-dim) var(--fill,0%),transparent var(--fill,0%));border:1px solid var(--accent-dim);border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;opacity:0;transform:translateY(6px);transition:opacity .6s ease .2s,transform .6s ease .2s,border-color .3s ease,color .3s ease}
.proceed-btn:hover,.proceed-btn:focus-visible{border-color:var(--accent);color:var(--accent-bright);outline:none}
.proceed-btn.activated{pointer-events:none;opacity:.7;border-color:var(--accent)}
.access-gate.resolved .antechamber-text{opacity:1;transform:translateY(0)}
.access-gate.resolved .proceed-btn{opacity:1;transform:translateY(0)}

/* ── Responsive ── */
@media(max-width:480px){h1{font-size:1.25rem;letter-spacing:.25em}.sigil{width:90px;height:90px}.tagline{font-size:.95rem}.access-input{width:260px;font-size:.8rem;padding:.6rem 2.8rem .6rem 1.2rem}.proceed-btn{width:260px;font-size:.8rem;padding:.6rem 1.2rem}.wipe-container{width:260px}.device-login-btn{width:260px;font-size:.8rem;padding:.6rem 1.2rem}}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}.access-form,.device-login-layer{clip-path:none!important;pointer-events:auto!important}.split-layer{display:none!important}}