/* ============================================
   GATE — Premium Passcode Entry
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:#020812;color:#fff;font-family:'Inter','Helvetica Neue',Arial,sans-serif}

.gate{
  position:relative;min-height:100vh;width:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.gate__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(80,140,255,.18), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(160,90,255,.18), transparent 60%),
    linear-gradient(180deg, #020a18 0%, #04101f 50%, #050a16 100%);
  z-index:0;
}
.gate__aurora{
  position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 60% 30% at 50% 20%, rgba(78,255,200,.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 25% at 30% 35%, rgba(120,180,255,.16) 0%, transparent 60%),
    radial-gradient(ellipse 70% 30% at 70% 25%, rgba(180,120,255,.14) 0%, transparent 60%);
  filter:blur(32px);
  opacity:.7;
  animation:auroraFloat 14s ease-in-out infinite alternate;
  z-index:0;
}
.gate__mountains{
  position:absolute;left:0;right:0;bottom:0;height:55%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(2,8,18,.4) 30%, rgba(2,8,18,.92) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'><defs><linearGradient id='m' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%231a2c45'/><stop offset='1' stop-color='%23070d18'/></linearGradient><linearGradient id='m2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%230f1d33'/><stop offset='1' stop-color='%23040912'/></linearGradient></defs><polygon fill='url(%23m)' points='0,600 0,400 90,330 180,420 280,310 380,400 470,330 580,440 680,360 800,470 920,360 1030,440 1140,340 1260,420 1370,330 1480,440 1600,360 1600,600'/><polygon fill='url(%23m2)' points='0,600 0,470 120,420 240,490 360,440 480,500 600,450 720,510 840,460 960,520 1080,470 1200,510 1320,460 1440,510 1600,460 1600,600'/></svg>") center bottom / cover no-repeat;
  z-index:1;opacity:.95;
}
.gate__stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 18%, #fff 99%, transparent),
    radial-gradient(1px 1px at 70% 12%, #fff 99%, transparent),
    radial-gradient(1px 1px at 35% 28%, #cfe1ff 99%, transparent),
    radial-gradient(1.2px 1.2px at 85% 35%, #ffffff 99%, transparent),
    radial-gradient(.8px .8px at 50% 8%, #fff 99%, transparent),
    radial-gradient(.8px .8px at 12% 42%, #fff 99%, transparent),
    radial-gradient(1.4px 1.4px at 62% 18%, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 90% 22%, #cfe1ff 99%, transparent);
  background-repeat:no-repeat;
  z-index:0;opacity:.85;
  animation:twinkle 6s ease-in-out infinite alternate;
}
.gate__noise{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index:2;mix-blend-mode:overlay;opacity:.6;pointer-events:none;
}

@keyframes auroraFloat{
  0%{transform:translate(-2%,-2%) rotate(-1deg)}
  50%{transform:translate(2%,1%) rotate(1deg)}
  100%{transform:translate(-1%,2%) rotate(-1deg)}
}
@keyframes twinkle{
  from{opacity:.5}
  to{opacity:.95}
}

/* ---------- Top Bar ---------- */
.gate__topbar{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(20px,4vw,52px);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.gate__topbar .seal{
  display:flex;align-items:center;gap:14px;
}
.gate__topbar .seal i{
  width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #1f3a60, #061121);
  display:grid;place-items:center;color:#F0E7CF;
  font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;
  border:1px solid rgba(255,255,255,.12);
}
.gate__topbar .right{display:flex;align-items:center;gap:18px}
.gate__topbar .right span.dot{width:6px;height:6px;background:#BA0C2F;border-radius:50%;animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:.4}50%{opacity:1}}

/* ---------- Card ---------- */
.gate__card{
  position:relative;z-index:5;
  width:min(560px, calc(100% - 48px));
  padding:46px 44px 38px;
  background:rgba(10,18,32,.55);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
  text-align:center;
  animation:cardIn 1.2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(20px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.gate__crest{
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #2c4a72, #07101e);
  margin:0 auto 22px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px -10px rgba(50,100,200,.35);
}
.gate__crest span{
  font-family:'Cormorant Garamond',serif;
  font-size:30px;font-style:italic;
  color:#F0E7CF;letter-spacing:.02em;
}
.gate__eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  display:inline-flex;align-items:center;gap:12px;
  margin-bottom:14px;
}
.gate__eyebrow::before,.gate__eyebrow::after{content:"";width:24px;height:1px;background:rgba(255,255,255,.3)}
.gate__title{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;font-size:42px;line-height:1.05;
  letter-spacing:-.012em;color:#fff;margin-bottom:10px;
}
.gate__title em{font-style:italic;color:#E5C77B}
.gate__sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:16px;line-height:1.5;color:rgba(255,255,255,.7);
  max-width:420px;margin:0 auto 30px;
}
.gate__form{display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:left}
.gate__label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.gate__inputwrap{
  position:relative;display:flex;align-items:center;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.gate__inputwrap:focus-within{border-color:#E5C77B;box-shadow:0 0 0 4px rgba(229,199,123,.12)}
.gate__inputwrap.error{border-color:#FF5C73;box-shadow:0 0 0 4px rgba(255,92,115,.16);animation:shake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(4px)}
}
.gate__inputwrap svg{width:16px;height:16px;color:rgba(255,255,255,.5);margin-left:16px}
.gate__input{
  flex:1;background:transparent;border:0;outline:none;
  padding:18px 16px;color:#fff;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:15px;letter-spacing:.18em;
}
.gate__input::placeholder{color:rgba(255,255,255,.3);letter-spacing:.18em}
.gate__toggle{
  background:none;border:0;color:rgba(255,255,255,.6);padding:0 18px 0 12px;cursor:pointer;
  display:grid;place-items:center;height:100%;
}
.gate__toggle svg{width:16px;height:16px;color:inherit;margin:0}
.gate__toggle:hover{color:#fff}

.gate__btn{
  margin-top:6px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 24px;border-radius:12px;
  background:linear-gradient(180deg, #E5C77B 0%, #C09D52 100%);
  color:#0a1726;font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.06em;font-size:13px;
  text-transform:uppercase;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 12px 30px -10px rgba(229,199,123,.55);
  border:0;cursor:pointer;
}
.gate__btn:hover{transform:translateY(-1px);box-shadow:0 18px 36px -12px rgba(229,199,123,.7)}
.gate__btn:active{transform:translateY(0)}
.gate__btn svg{width:14px;height:14px}

.gate__error{
  margin-top:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#FF8095;opacity:0;transform:translateY(-4px);
  transition:opacity .35s ease, transform .35s ease;
  text-align:center;
}
.gate__error.show{opacity:1;transform:translateY(0)}

.gate__foot{
  margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.gate__foot .lock{display:inline-flex;align-items:center;gap:8px}
.gate__foot .lock svg{width:12px;height:12px}

/* Bottom strip */
.gate__strip{
  position:absolute;bottom:0;left:0;right:0;z-index:6;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px clamp(20px,4vw,52px);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(2,8,18,.45);backdrop-filter:blur(8px);
}
.gate__strip a{color:rgba(255,255,255,.85)}
.gate__strip a:hover{color:#E5C77B}

/* Success Transition */
.gate__veil{
  position:fixed;inset:0;background:#020812;z-index:50;
  opacity:0;pointer-events:none;transition:opacity .8s ease;
}
.gate__veil.show{opacity:1;pointer-events:auto}

@media (max-width:560px){
  .gate__card{padding:36px 26px 28px}
  .gate__title{font-size:34px}
  .gate__topbar .right span:not(.dot){display:none}
  .gate__strip{font-size:9px;letter-spacing:.18em}
}