/* ───── 로그인 = 보안 격리 연구시설의 출입 통제 구역 (login.html 전용) ─────
   처음엔 단말기만 보이고, 비밀번호가 맞으면 출입증이 떠오르며 "환영합니다" 장면 → 문이 닫히고 연구실로.
   장면 시간표(초)는 login.html의 WELCOME_TIMELINE과 맞춘다: 출입증 0.35 · 도장 1.4 · 환영 1.7 · 문 3.0 */
.login-page {
  --caution: #e3b341;
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 84px 16px;
}
/* 밝은 분위기에선 노란 글씨가 흰 바탕에 묻혀서 더 진하게 */
[data-skin="daylight"] .login-page { --caution: #9a6700; }
.login-page > :is(.gate, .welcome) { grid-area: 1 / 1; position: relative; z-index: 1; }

/* ── 배경: 경고 띠 · 구역 표지판 · 큰 문장 · 감시 카메라(오른쪽 위) ── */
.facility { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; font-family: var(--font-display); color: var(--text-muted); }
.facility::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgb(0 0 0 / 0.5)),
    repeating-linear-gradient(90deg, transparent 0 159px, color-mix(in srgb, var(--text) 6%, transparent) 159px 160px),
    repeating-linear-gradient(0deg, transparent 0 239px, color-mix(in srgb, var(--text) 4%, transparent) 239px 240px);
}
/* 감시 화면처럼 밝은 띠가 천천히 위에서 아래로 훑고 지나감 */
.facility::after {
  content: ""; position: absolute; left: 0; right: 0; top: -160px; height: 160px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--text) 5%, transparent), transparent);
  animation: facility-sweep 9s linear infinite;
}
@keyframes facility-sweep { to { transform: translateY(calc(100vh + 160px)); } }

.hazard-band {
  position: absolute; left: 0; right: 0; height: 14px; opacity: 0.6;
  background: repeating-linear-gradient(-45deg, var(--caution) 0 14px, #141414 14px 28px);
  transition: opacity 0.3s;
}
.hazard-band.is-top { top: 0; }
.hazard-band.is-bottom { bottom: 0; }
.login-page[data-state="denied"] .hazard-band {
  background: repeating-linear-gradient(-45deg, var(--danger) 0 14px, #141414 14px 28px);
  animation: hazard-alarm 0.5s steps(1) 3;
}
@keyframes hazard-alarm { 50% { opacity: 0.15; } }

.facility-sign { position: absolute; top: 32px; left: 24px; display: grid; gap: 2px; font-size: 11px; letter-spacing: 0.14em; }
.facility-sign strong { font-size: 26px; letter-spacing: 0.24em; color: var(--text); opacity: 0.85; }

.facility-emblem {
  position: absolute; left: 50%; top: 50%; width: min(680px, 140vw); height: auto;
  transform: translate(-50%, -50%); color: var(--hud, var(--accent)); opacity: 0.08;
}
.emblem-ring { transform-origin: 100px 100px; animation: emblem-turn 90s linear infinite; }
@keyframes emblem-turn { to { transform: rotate(360deg); } }


.facility-cam { position: absolute; top: 34px; right: 24px; margin: 0; display: grid; gap: 2px; text-align: right; font-size: 12px; letter-spacing: 0.08em; }
.cam-dot { color: #ff3b3b; animation: cam-blink 1.4s steps(1) infinite; }
@keyframes cam-blink { 50% { opacity: 0; } }

@media (max-width: 760px) {
  .facility-sign { top: 26px; left: 16px; }
  .facility-sign strong { font-size: 18px; }
  .facility-cam { top: 28px; right: 16px; font-size: 11px; }
}

/* ── 출입 통제 단말기 (비밀번호 칸) ── */
.gate { width: min(400px, 100%); display: grid; gap: 12px; transition: opacity 0.4s, transform 0.4s; }
.gate-status {
  margin: 0; justify-self: center; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; color: var(--text-muted);
}
.gate-lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--caution); box-shadow: 0 0 10px var(--caution); }
.gate-status[data-state="checking"] .gate-lamp { animation: beacon 0.6s ease-in-out infinite; }
.gate-status[data-state="denied"] { color: var(--danger); }
.gate-status[data-state="denied"] .gate-lamp { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
.gate-status[data-state="open"] { color: var(--accent); }
.gate-status[data-state="open"] .gate-lamp { background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.gate-note { margin: 0; text-align: center; font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }

.login-card { position: relative; overflow: hidden; width: 100%; display: grid; gap: 14px; padding: 28px; }
.login-card .hub-title { margin: 0; }
.login-card .hub-greeting { margin: -8px 0 4px; }
.login-card .primary-button { width: 100%; padding: 12px; }
.terminal-label { margin: 0 0 -6px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; color: var(--caution); }
.login-error { margin: 0; color: var(--danger); font-size: 14px; }
.login-error[hidden] { display: none; }
.reader-slot { justify-self: center; width: 46%; height: 6px; margin: -14px 0 4px; border-radius: 3px; background: var(--surface-muted); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35); transition: background 0.3s, box-shadow 0.3s; }

/* 신원 확인 중: 단말기 위를 빛줄기가 오르내림 */
.login-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0;
  background: var(--caution); box-shadow: 0 0 14px var(--caution); pointer-events: none;
}
.gate[data-state="checking"] .login-card::after { opacity: 0.8; animation: terminal-scan 1.1s ease-in-out infinite alternate; }
@keyframes terminal-scan { to { top: calc(100% - 3px); } }
.gate[data-state="checking"] .reader-slot { background: var(--caution); box-shadow: 0 0 10px var(--caution); animation: beacon 0.6s ease-in-out infinite; }
.gate[data-state="denied"] .reader-slot { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
.gate[data-state="denied"] .login-card { animation: card-shake 0.4s ease-in-out; }
@keyframes card-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.gate[data-state="open"] .reader-slot { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.gate[data-state="open"] { opacity: 0; transform: scale(0.94); pointer-events: none; transition-delay: 0.1s; }

/* 들어올 때 양쪽 문이 열리는 장면 (연구선·단말기·해커만) */
.gate-doors { display: none; }
:is([data-skin="vessel"], [data-skin="terminal"], [data-skin="hacker"]) .gate-doors { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.gate-doors span {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--hud) 12%, transparent) 46px 48px),
    var(--surface);
  animation: door-open 1.1s 0.25s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.gate-doors span:first-child { left: 0; border-right: 2px solid var(--hud); --door-to: -101%; }
.gate-doors span:last-child { right: 0; border-left: 2px solid var(--hud); --door-to: 101%; }
@keyframes door-open { to { transform: translateX(var(--door-to)); } }

/* ── 환영 장면: 출입증이 떠오르고 → 훑어 읽히고 → 도장 → "환영합니다" ── */
.welcome { width: min(400px, 100%); display: grid; justify-items: center; gap: 14px; text-align: center; perspective: 900px; }
.welcome[hidden] { display: none; }
.welcome-code {
  margin: 0; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.3em; color: var(--accent);
  animation: welcome-fade 0.4s 0.15s both, welcome-spread 1.2s 0.15s ease-out both;
}
.welcome-title { margin: 6px 0 0; font-size: clamp(24px, 6vw, 32px); color: var(--text); animation: welcome-rise 0.6s 1.7s both; }
.welcome-note { margin: -6px 0 0; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em; color: var(--text-muted); animation: welcome-fade 0.5s 2.1s both; }
@keyframes welcome-fade { from { opacity: 0; } }
@keyframes welcome-spread { from { letter-spacing: 0.05em; } }
@keyframes welcome-rise { from { opacity: 0; transform: translateY(12px); } }

.badge {
  position: relative; overflow: hidden; width: min(300px, 86vw);
  display: grid; gap: 10px; padding: 22px 18px 14px; text-align: left;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%);
  border: 1px solid var(--accent); border-radius: 14px;
  box-shadow: var(--shadow), 0 0 28px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: badge-arrive 0.8s 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
@keyframes badge-arrive { from { opacity: 0; transform: translateY(70px) rotateX(65deg) scale(0.9); } }
/* 출입증을 읽는 빛이 왼쪽에서 오른쪽으로 한 번 훑음 */
.badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  opacity: 0; animation: badge-read 0.6s 0.95s ease-in-out both;
}
@keyframes badge-read { 0% { opacity: 1; } 100% { opacity: 1; transform: translateX(470%); } }
.badge-hole { position: absolute; top: 8px; left: 50%; width: 38px; height: 6px; margin-left: -19px; border-radius: 3px; background: var(--border); }
.badge-org { margin: 0; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; color: var(--text-muted); }
.badge-body { display: flex; align-items: center; gap: 14px; }
.badge-photo { display: grid; place-items: center; width: 58px; height: 68px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-muted); }
.badge-info { display: grid; gap: 2px; font-size: 13px; color: var(--text-muted); }
.badge-info strong { font-size: 18px; color: var(--text); }
.badge-number { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.06em; }
.badge-barcode { height: 22px; opacity: 0.7; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 4px, var(--text) 4px 5px, transparent 5px 8px, var(--text) 8px 11px, transparent 11px 13px); }
.badge-stamp {
  position: absolute; right: 14px; bottom: 8px; padding: 4px 10px;
  border: 2px solid var(--accent); border-radius: 6px; color: var(--accent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.1em;
  pointer-events: none;
  animation: badge-stamp 0.35s 1.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes badge-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } to { opacity: 0.9; transform: rotate(-12deg) scale(1); } }

/* 움직임 줄이기: 장면 없이 바로 보여 줌 */
@media (prefers-reduced-motion: reduce) {
  .facility::after, .emblem-ring, .cam-dot, .gate-lamp, .reader-slot { animation: none !important; }
  .gate-doors { display: none !important; }
  .gate, .login-card, .login-card::after { transition: none; animation: none !important; }
  .welcome *, .welcome *::after { animation: none !important; }
  .badge-stamp { opacity: 0.9; transform: rotate(-12deg); }
}