/* ===========================================================
   Ajitanatha · Sacred Access Gate
   =========================================================== */

:root{
  --ivory:#FBF8F1;
  --ivory-2:#F4EEDF;
  --sand:#E8DCC4;
  --gold:#B8893B;
  --gold-deep:#8C6420;
  --gold-soft:#D9B872;
  --maroon:#5A1622;
  --maroon-deep:#3D0E16;
  --saffron:#D9722E;
  --emerald:#2C5F4A;
  --ink:#22130F;
  --muted:#6B5A48;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }
body{
  font-family:'Inter', system-ui, sans-serif;
  background:var(--ivory);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Gate frame */
.gate{
  position:relative;
  width:100%;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(ellipse at 50% 0%, #FBEFD0 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, #F0E1B8 0%, transparent 60%),
    linear-gradient(180deg, #FBF8F1 0%, #F2E8D2 100%);
  isolation:isolate;
  overflow:hidden;
}

.gate::before{
  content:"";
  position:absolute; inset:24px;
  border:1px solid rgba(140,100,32,0.18);
  pointer-events:none;
  z-index:3;
}
.gate::after{
  content:"";
  position:absolute; inset:34px;
  border:1px dashed rgba(140,100,32,0.10);
  pointer-events:none;
  z-index:3;
}

/* Aura backdrop */
.aura-stage{
  position:absolute; inset:0;
  z-index:1;
  color:rgba(140,100,32,0.22);
  pointer-events:none;
}
.aura-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.55;
  animation:floatOrb 14s ease-in-out infinite alternate;
}
.aura-orb--lg{ width:520px; height:520px; left:-120px; top:-120px;
  background:radial-gradient(circle, #F3D58A 0%, transparent 70%); }
.aura-orb--md{ width:420px; height:420px; right:-80px; top:30%;
  background:radial-gradient(circle, #E9B66A 0%, transparent 70%); animation-delay:-4s; }
.aura-orb--sm{ width:340px; height:340px; left:30%; bottom:-100px;
  background:radial-gradient(circle, #F4DDA4 0%, transparent 70%); animation-delay:-8s; }

@keyframes floatOrb{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(30px,-20px) scale(1.08); }
}

.mandala{
  position:absolute;
  width:min(90vmin, 820px);
  height:min(90vmin, 820px);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:0.5;
  animation:rotateSlow 90s linear infinite;
}
.mandala--two{
  width:min(60vmin, 540px);
  height:min(60vmin, 540px);
  opacity:0.45;
  animation:rotateSlowR 60s linear infinite;
}
@keyframes rotateSlow{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes rotateSlowR{ to{ transform:translate(-50%,-50%) rotate(-360deg);} }

.dust{
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 18% 22%, rgba(184,137,59,0.55) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(184,137,59,0.45) 0%, transparent 60%),
    radial-gradient(1px 1px at 30% 70%, rgba(184,137,59,0.4) 0%, transparent 60%),
    radial-gradient(2px 2px at 82% 78%, rgba(184,137,59,0.5) 0%, transparent 60%),
    radial-gradient(1px 1px at 56% 44%, rgba(184,137,59,0.35) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 88%, rgba(184,137,59,0.5) 0%, transparent 60%);
  animation:dustDrift 18s ease-in-out infinite alternate;
}
@keyframes dustDrift{ to{ transform:translateY(-22px);} }

/* Stage card */
.gate-stage{
  position:relative;
  z-index:4;
  width:min(540px, 92vw);
  padding:54px 46px 44px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,253,247,0.92) 0%, rgba(248,239,217,0.86) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(184,137,59,0.35);
  box-shadow:
    0 40px 80px -30px rgba(90,22,34,0.25),
    0 0 0 1px rgba(255,255,255,0.5) inset,
    0 0 60px rgba(184,137,59,0.12);
  border-radius:2px;
  animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.gate-stage::before, .gate-stage::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  border:1.4px solid var(--gold);
}
.gate-stage::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.gate-stage::after{ bottom:14px; right:14px; border-left:none; border-top:none; }

@keyframes rise{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:translateY(0); }
}

.gate-mark{
  display:inline-flex;
  width:64px; height:64px;
  align-items:center; justify-content:center;
  color:var(--gold-deep);
  margin-bottom:22px;
  animation:pulseMark 4s ease-in-out infinite;
}
.gate-mark svg{ width:100%; height:100%; }
@keyframes pulseMark{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.06); opacity:0.85; }
}

.gate-eyebrow{
  font-family:'Inter';
  font-size:11px;
  font-weight:500;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:14px;
}

.gate-title{
  font-family:'Cinzel', serif;
  font-weight:500;
  color:var(--maroon-deep);
  line-height:1.05;
  margin-bottom:10px;
}
.gate-title span{
  display:block;
  font-size:clamp(28px, 4.5vw, 40px);
  letter-spacing:0.1em;
}
.gate-title em{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px, 3.2vw, 26px);
  color:var(--gold-deep);
  letter-spacing:0.05em;
}

.gate-sub{
  font-family:'Cormorant Garamond', serif;
  font-size:15px;
  font-style:italic;
  color:var(--muted);
  margin-bottom:36px;
  letter-spacing:0.04em;
}

/* Form */
.gate-form{
  position:relative;
}
.gate-label{
  display:block;
  font-size:10.5px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:500;
  margin-bottom:14px;
}
.gate-field{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(140,100,32,0.4);
  border-radius:2px;
  transition:border-color .3s, box-shadow .3s;
}
.gate-field:focus-within{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 4px rgba(184,137,59,0.12);
}
#accessCode{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:18px 22px;
  font-family:'Inter';
  font-size:15px;
  letter-spacing:0.4em;
  color:var(--maroon-deep);
}
#accessCode::placeholder{ color:rgba(90,22,34,0.3); letter-spacing:0.3em; }

.gate-submit{
  appearance:none;
  border:none;
  background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color:var(--ivory);
  width:54px; height:54px;
  margin:4px;
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius:1px;
  transition:transform .3s, box-shadow .3s;
}
.gate-submit svg{ width:20px; height:20px; }
.gate-submit:hover{
  transform:translateX(2px);
  box-shadow:0 12px 24px -8px rgba(90,22,34,0.5);
}

.gate-error{
  margin-top:14px;
  font-size:12.5px;
  color:#A02438;
  letter-spacing:0.04em;
  font-style:italic;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .4s, transform .4s;
  min-height:18px;
}
.gate-error.show{ opacity:1; transform:translateY(0); }

.gate.shake .gate-stage{
  animation:shake .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake{
  10%, 90%{ transform:translateX(-2px); }
  20%, 80%{ transform:translateX(4px); }
  30%, 50%, 70%{ transform:translateX(-7px); }
  40%, 60%{ transform:translateX(7px); }
}

.gate-hint{
  margin-top:22px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:400;
}

.gate-foot{
  margin-top:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.gate-foot p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:12.5px;
  color:var(--muted);
  letter-spacing:0.05em;
}
.gate-foot .line{
  display:block;
  width:36px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}

/* Veil for transition */
.gate-veil{
  position:fixed; inset:0;
  background:radial-gradient(circle at center, #FFF6DE 0%, var(--ivory) 60%, var(--sand) 100%);
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.1s ease;
}
.gate-veil.active{ opacity:1; }

/* Responsive */
@media (max-width:520px){
  .gate-stage{ padding:42px 26px 32px; }
  .gate-meta{ margin-bottom:20px; }
  #accessCode{ padding:14px 16px; font-size:13.5px; }
  .gate-submit{ width:46px; height:46px; }
}