/* ============================================================
   GATE
   ============================================================ */
html.is-locked body { overflow: hidden !important; }
html.is-locked main { display: none !important; }
html.is-locked footer { display: none !important; }

.gate {
  position:fixed; inset:0; z-index:9000;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
.gate.hide { opacity:0; visibility:hidden; pointer-events:none; }
.gate-inner {
  display:flex; flex-direction:column; align-items:center;
  gap:20px; width:100%; max-width:420px; padding:0 32px;
}
.gate-logo { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:12px; }
.gate-logo svg { width:72px; }
.gate-mark {
  font-family:var(--serif); font-size:32px; font-weight:400;
  letter-spacing:0.35em; color:var(--gold);
}
.gate-rule { width:100%; height:1px; background:var(--gold-bd); margin:12px 0; }
.gate-eyebrow {
  font-size:9px; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--white);
}
.gate-field {
  width:100%; display:flex; border:1px solid var(--gold-bd2);
  position: relative;
}
.gate-field input {
  flex:1; background:transparent; border:none; outline:none;
  font-family:var(--sans); font-size:16px; font-weight:300; letter-spacing:0.08em;
  color:var(--cream); padding:15px 20px;
}
.gate-field input::placeholder { color:var(--white); }
.gate-field button#gate-btn {
  background:var(--gold); border:none; cursor:pointer;
  font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--black); padding:15px 22px;
  transition:background 0.3s;
}
.gate-field button#gate-btn:hover { background:var(--gold-lt); }

.gate-toggle {
  position: absolute;
  right: 80px; /* Position it before the Enter button */
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  color: var(--gold);
  transition: opacity 0.2s;
  height: 100%;
  width: auto !important;
}
.gate-toggle:hover { opacity: 0.7; }
.gate-toggle svg { width: 18px; height: 18px; fill: currentColor; }

.gate-err  { font-size:11px; color:#b03030; letter-spacing:0.05em; min-height:16px; }
.gate-foot { font-size:11px; color:var(--white); text-align:center; }
.gate-foot a { color:var(--gold); border-bottom:1px solid var(--gold-bd); }

.shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}