/* ============================================================
   Secret access terminal — the "top secret" hacker gate that
   shows before the hub each session. Green phosphor CRT that
   blooms into the neon arcade once Max types the password.
   ============================================================ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: #010604;
  color: #33ff66;
  font-family: "VT323", "Courier New", ui-monospace, monospace;
  overflow: hidden;
  cursor: text;
  transition: opacity 0.55s ease;
}
.gate[hidden] { display: none; }
.gate.gone { opacity: 0; pointer-events: none; }

/* subtle CRT curvature glow + vignette */
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 3;
}
/* scanlines + a faint rolling bar */
.gate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.32) 2px 4px);
  mix-blend-mode: multiply;
  animation: gateFlicker 5s steps(60) infinite;
}
@keyframes gateFlicker {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.7; }
  47% { opacity: 0.4; }
}

.gate-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gate.matrix-on .gate-matrix { opacity: 0.55; }

.gate-screen {
  position: relative;
  z-index: 2;
  width: min(720px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  padding: clamp(18px, 4vw, 34px) clamp(20px, 4.5vw, 40px);
  border: 1px solid rgba(51, 255, 102, 0.28);
  border-radius: 10px;
  background: rgba(4, 18, 9, 0.55);
  box-shadow: 0 0 0 1px rgba(51, 255, 102, 0.08), 0 0 48px rgba(20, 120, 50, 0.35),
    inset 0 0 60px rgba(10, 60, 25, 0.4);
  text-shadow: 0 0 6px rgba(51, 255, 102, 0.75);
}
.gate.shake .gate-screen { animation: gateShake 0.42s ease; }
@keyframes gateShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-7px, 3px); }
  30% { transform: translate(6px, -4px); }
  45% { transform: translate(-6px, 4px); }
  60% { transform: translate(5px, 2px); }
  75% { transform: translate(-3px, -2px); }
}

.gate-content {
  position: relative;
  z-index: 2;
  font-size: clamp(17px, 3.6vw, 23px);
  line-height: 1.28;
  letter-spacing: 0.5px;
}
.gate-out {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}
.gate-out .ok { color: #b9ffcf; }
.gate-out .warn { color: #ffd23c; text-shadow: 0 0 8px rgba(255, 210, 60, 0.7); }
.gate-out .secret { color: #ff5bb0; text-shadow: 0 0 8px rgba(255, 91, 176, 0.7); }

.gate-standby { white-space: pre-line; }
.gate-blink { display: inline-block; margin-top: 0.6em; color: #b9ffcf; animation: gateBlink 1s steps(1) infinite; }
@keyframes gateBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* password line */
.gate-prompt {
  position: relative;
  margin-top: 0.7em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.gate-prompt[hidden] { display: none; }
.gate-arrow { color: #ffd23c; margin-right: 0.5ch; text-shadow: 0 0 8px rgba(255, 210, 60, 0.6); }
.gate-echo { color: #d9ffe6; white-space: pre; }
.gate-caret {
  color: #b9ffcf;
  animation: gateBlink 1s steps(1) infinite;
  margin-left: 1px;
}
/* the real input captures keystrokes but stays invisible (echo shows text) */
.gate-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: transparent;
  caret-color: transparent;
  outline: none;
}

.gate-msg {
  margin-top: 0.7em;
  min-height: 1.3em;
  font-size: clamp(20px, 4.6vw, 30px);
  letter-spacing: 1px;
}
.gate-msg.denied {
  color: #ff3b3b;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.85);
  animation: gateGlitch 0.32s steps(2) 2;
}
.gate-msg.granted {
  color: #7dff9e;
  text-shadow: 0 0 14px rgba(80, 255, 130, 0.9);
}
@keyframes gateGlitch {
  0% { transform: translate(0, 0); text-shadow: 2px 0 #00e5ff, -2px 0 #ff3b3b; }
  50% { transform: translate(-3px, 1px); text-shadow: -2px 0 #00e5ff, 2px 0 #ff3b3b; }
  100% { transform: translate(2px, -1px); text-shadow: 2px 0 #00e5ff, -2px 0 #ff3b3b; }
}
.gate-hint { margin-top: 0.35em; min-height: 1.2em; color: #ffd23c; opacity: 0.85; font-size: clamp(15px, 3vw, 19px); }
.gate-welcome { margin-top: 0.3em; color: #b9ffcf; }

/* red alert border while denied */
.gate.alert { box-shadow: inset 0 0 0 4px rgba(255, 59, 59, 0.55); }

.gate-flash {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: #eafff2;
  opacity: 0;
  pointer-events: none;
}
.gate-flash.on { animation: gateFlash 0.55s ease-out forwards; }
@keyframes gateFlash {
  0% { opacity: 0; }
  20% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* The hub "powers on" (a quick CRT flicker) as the terminal clears.
   Animate ONLY the .cabinet container — the .marquee title box lives
   inside it, so animating both would fade the title in twice. */
body.powering-on .cabinet {
  animation: hubPowerOn 0.9s ease-out;
}
@keyframes hubPowerOn {
  0% { opacity: 0; filter: brightness(3.5); transform: scaleY(0.7); }
  10% { opacity: 1; }
  13% { opacity: 0.25; }
  18% { opacity: 1; transform: scaleY(1); }
  32% { opacity: 0.55; }
  36% { opacity: 1; }
  100% { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gate::after,
  .gate-blink,
  .gate-caret,
  .gate.shake .gate-screen,
  .gate-msg.denied,
  body.powering-on .cabinet {
    animation: none;
  }
}