/* Caleb's War — the login sequence (bible §1) and the title logo. */

/* ------------------------------------------------------------------ logo --- */
.cw-logo { display: inline-flex; flex-direction: column; align-items: center; --lg: calc(132 * var(--px)); }
.cw-logo-row { display: flex; align-items: baseline; gap: calc(0.18 * var(--lg)); line-height: 0.86; }
.cw-logo-word {
  position: relative; display: inline-block; text-shadow: none;
  font-family: "Futura", "Avenir Next Condensed", Impact, sans-serif; font-weight: 800; font-stretch: condensed;
  font-size: var(--lg); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, #f6f9fb 0%, #e9eef2 30%, #b9c3cc 48%, #8c98a3 52%, #aab5bf 70%, #e2e8ed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(1 * var(--px)) 0 #3a434c) drop-shadow(0 calc(3 * var(--px)) 0 #0b0e11) drop-shadow(0 calc(10 * var(--px)) calc(18 * var(--px)) rgba(0, 0, 0, 0.75));
}
/* Brushed-steel grain + a glint that sweeps across once the words lock. */
.cw-logo-word::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 48%, transparent 58%) -150% 0 / 250% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cw-logo-war { color: transparent; }
.cw-logo-bars { position: relative; width: 100%; height: calc(0.06 * var(--lg)); margin-top: calc(0.1 * var(--lg)); }
.cw-logo-bars i { position: absolute; left: 0; height: 36%; width: 100%; transform-origin: left center; }
.cw-logo-bars i.r { top: 0; background: linear-gradient(90deg, transparent, #d7322b 12%, #d7322b 88%, transparent); box-shadow: 0 0 calc(10 * var(--px)) rgba(215, 50, 43, 0.6); }
.cw-logo-bars i.b { bottom: 0; background: linear-gradient(90deg, transparent, #2f6bdb 12%, #2f6bdb 88%, transparent); box-shadow: 0 0 calc(10 * var(--px)) rgba(47, 107, 219, 0.6); }
.cw-logo-tag { margin-top: calc(0.16 * var(--lg)); font: 600 calc(22 * var(--px)) / 1 "Avenir Next Condensed", var(--f-cond); letter-spacing: 0.25em; color: #c9d3db; text-indent: 0.25em; white-space: nowrap; }

/* Compact watermark on the menus. */
.cw-logo-mark { --lg: calc(58 * var(--px)); }
.cw-logo-mark .cw-logo-bars { height: calc(5 * var(--px)); margin-top: calc(7 * var(--px)); }

/* ----------------------------------------------------------------- boot --- */
.cw-boot { background: transparent; }
.cw-boot.phase-a { cursor: none; }
.cw-boot-line { position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: #ffb23f; opacity: 0;
  transform: translateX(-50%) scaleX(0); box-shadow: 0 0 12px #ffb23f; transition: transform 250ms var(--ease-out), opacity 150ms; }
.cw-boot-line.is-on { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
.cw-boot-crt { position: absolute; inset: 0; opacity: 0; transform: scaleY(0.004); pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 178, 63, 0.03) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, rgba(12, 18, 24, 0.35) 0%, rgba(0, 0, 0, 0.55) 85%);
  transition: transform 260ms var(--ease-out), opacity 200ms; }
.cw-boot-crt.is-on { opacity: 1; transform: none; }
.cw-boot-crt.is-on ~ .cw-boot-line { opacity: 0; transition: opacity 400ms 100ms; }
.cw-boot-studio { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font: 500 calc(20 * var(--px)) / 1 Futura, var(--f-ui); letter-spacing: 0.3em; text-indent: 0.3em; color: #fff; opacity: 0; transition: opacity 300ms; }
.cw-boot-studio.is-on { opacity: 1; }

.cw-boot-title { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  transition: left 400ms var(--ease-io), top 400ms var(--ease-io), transform 400ms var(--ease-io), opacity 300ms; }
.cw-boot-title .cw-logo-word { opacity: 0; }
.cw-boot-title.is-in .cw-logo-caleb { animation: cw-slam-left 300ms cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.cw-boot-title.is-in .cw-logo-war { animation: cw-slam-right 300ms cubic-bezier(0.55, 0, 1, 0.45) forwards; }
@keyframes cw-slam-left { from { opacity: 1; transform: translateX(-60vw) skewX(-12deg); filter: blur(6px); } 85% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes cw-slam-right { from { opacity: 1; transform: translateX(60vw) skewX(12deg); } to { opacity: 1; transform: none; } }
.cw-boot-title.is-locked .cw-logo-word { opacity: 1; }
.cw-boot-title.is-locked .cw-logo-word::after { animation: cw-glint 900ms 150ms ease-out forwards; }
@keyframes cw-glint { from { background-position: -150% 0, 0 0; } to { background-position: 250% 0, 0 0; } }
.cw-boot-title .cw-logo-bars i { transform: scaleX(0); }
.cw-boot-title.is-locked .cw-logo-bars i { transform: scaleX(1); transition: transform 350ms var(--ease-out); }
.cw-boot-title.is-locked .cw-logo-bars i.b { transition-delay: 70ms; }
.cw-boot-title .cw-logo-tag { opacity: 0; transition: opacity 500ms; }
.cw-boot-title.is-tag .cw-logo-tag { opacity: 1; }
/* 4.20 — shrink into the corner as a watermark. */
.cw-boot-title.is-corner { left: calc(56 * var(--px)); top: calc(34 * var(--px)); transform: translate(0, 0) scale(0.42); transform-origin: 0 0; }
.cw-boot-title.is-corner .cw-logo-tag { opacity: 0; }
.cw-boot-title.no-anim, .cw-boot-title.no-anim * { animation: none !important; transition: none !important; }
.cw-boot-title.is-gone { opacity: 0; }

.shake { animation: cw-shake 120ms linear; }
@keyframes cw-shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 4px); } 100% { transform: none; } }

.cw-boot-flash { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; background: #fff; }
.cw-boot-flash.white { opacity: 0.25; }
.cw-boot-flash.green { opacity: 0.08; background: #3dff8a; }

/* The terminal (70 % × 60 %, amber border, #05080A fill). */
.cw-term { position: absolute; left: 15%; top: 15%; width: 70%; height: 76%; z-index: 2;
  background: #05080a; border: 1px solid rgba(255, 178, 63, 0.75); box-shadow: 0 0 0 1px #000, 0 0 60px rgba(255, 178, 63, 0.08), inset 0 0 80px rgba(0, 0, 0, 0.9);
  clip-path: inset(0 0 100% 0); transition: clip-path 250ms linear; overflow: hidden; }
.cw-term.is-open { clip-path: inset(0 0 0 0); }
.cw-term.no-anim { transition: none; }
.cw-term.is-flying { transition: transform 450ms var(--ease-io), opacity 450ms, clip-path 0s; }
.cw-term.is-flying > * { opacity: 0; transition: opacity 200ms; }
.cw-term-scan { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.5)); }
.cw-term-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(10 * var(--px)); height: calc(30 * var(--px)); padding: 0 calc(16 * var(--px));
  border-bottom: 1px solid rgba(255, 178, 63, 0.35); background: rgba(255, 178, 63, 0.07); font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.26em; color: #ffd592; }
.cw-term-bar .led { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: #3dff8a; box-shadow: 0 0 calc(6 * var(--px)) #3dff8a; animation: cw-blink 1s steps(1) infinite; }
.cw-term-bar-r { margin-left: auto; color: rgba(255, 178, 63, 0.55); letter-spacing: 0.18em; }
.cw-term-lines { position: relative; z-index: 1; padding: calc(20 * var(--px)) calc(34 * var(--px));
  font: 500 calc(16 * var(--px)) / 1.55 var(--f-mono); color: #ffb23f; white-space: pre; text-shadow: 0 0 calc(6 * var(--px)) rgba(255, 178, 63, 0.55); }
.cw-term-row.is-head { color: #ffd592; margin-bottom: calc(10 * var(--px)); }
.cw-term-dots { color: rgba(255, 178, 63, 0.45); }
.cw-term-status.is-ok { color: #3dff8a; text-shadow: 0 0 calc(8 * var(--px)) rgba(61, 255, 138, 0.6); }
.cw-term-status.is-bad { color: #ff4a3d; text-shadow: 0 0 calc(8 * var(--px)) rgba(255, 74, 61, 0.7); animation: cw-blink2 0.5s steps(1) 4; }
@keyframes cw-blink2 { 50% { opacity: 0; } }
.cw-term-row.is-await { margin-top: calc(12 * var(--px)); color: #ffd592; }

/* Login panel (520 × 300), slides up from the bottom of the terminal. */
.cw-login { position: absolute; left: 50%; bottom: calc(26 * var(--px)); z-index: 4; width: calc(520 * var(--px)); min-height: calc(300 * var(--px));
  transform: translate(-50%, calc(40 * var(--px))); opacity: 0; transition: transform 220ms var(--ease-out), opacity 220ms;
  background: #070b0e; border: 1px solid #ffb23f; box-shadow: 0 0 0 1px #000, 0 0 40px rgba(255, 178, 63, 0.18), 0 20px 60px rgba(0, 0, 0, 0.9);
  font-family: var(--f-mono); color: #ffb23f; cursor: pointer; }
.cw-login.is-up { transform: translate(-50%, 0); opacity: 1; }
.cw-login-title { position: relative; height: calc(38 * var(--px)); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255, 178, 63, 0.4);
  font: 700 calc(14 * var(--px)) var(--f-mono); letter-spacing: 0.24em; color: #ffd592; background: linear-gradient(180deg, rgba(255, 178, 63, 0.14), rgba(255, 178, 63, 0.02)); }
.cw-login-form { padding: calc(24 * var(--px)) calc(30 * var(--px)) calc(8 * var(--px)); display: flex; flex-direction: column; gap: calc(12 * var(--px)); }
.cw-login-field { display: grid; grid-template-columns: calc(130 * var(--px)) 1fr; align-items: center; font-size: calc(15 * var(--px)); }
.cw-login-field .k { color: rgba(255, 178, 63, 0.75); letter-spacing: 0.12em; }
.cw-login-field .v { height: calc(30 * var(--px)); display: flex; align-items: center; padding: 0 calc(12 * var(--px)); border: 1px solid rgba(255, 178, 63, 0.45); background: #020405; color: #3dff8a; letter-spacing: 0.1em; text-shadow: 0 0 6px rgba(61, 255, 138, 0.45); }
.cw-login-dots { letter-spacing: 0.28em; }
.cw-login-actions { display: flex; justify-content: center; padding: calc(16 * var(--px)) 0 calc(6 * var(--px)); }
.cw-login-btn { position: relative; min-width: calc(200 * var(--px)); height: calc(46 * var(--px)); border: 1px solid #ffb23f; background: linear-gradient(180deg, #3a2a0e, #1c1406);
  font: 700 calc(19 * var(--px)) var(--f-mono); letter-spacing: 0.3em; color: #ffd592; animation: cw-login-pulse 1.2s ease-in-out infinite; transition: transform 80ms; }
.cw-login-btn:hover { background: linear-gradient(180deg, #54390f, #2a1d08); color: #fff3dc; }
.cw-login-btn .arrow { color: #3dff8a; }
.cw-login-btn.is-down { transform: translateY(2px); animation: none; box-shadow: 0 0 20px rgba(255, 178, 63, 0.6); }
@keyframes cw-login-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 178, 63, 0); } 50% { box-shadow: 0 0 calc(12 * var(--px)) rgba(255, 178, 63, 0.75); } }
.cw-login-hint { text-align: center; padding-bottom: calc(18 * var(--px)); font-size: calc(12.5 * var(--px)); letter-spacing: 0.16em; color: rgba(255, 178, 63, 0.6); text-transform: uppercase; }
.cw-login-hint.is-nudge { color: #ffd592; animation: cw-blink 1.4s steps(1) infinite; }

/* Verification: ID card with scan bar, % counter, typed lines, the stamp. */
.cw-login.is-verify { cursor: default; }
.cw-verify { display: flex; align-items: center; gap: calc(22 * var(--px)); padding: calc(20 * var(--px)) calc(30 * var(--px)) calc(6 * var(--px)); }
.cw-idcard { position: relative; display: flex; gap: calc(14 * var(--px)); padding: calc(10 * var(--px)); width: calc(330 * var(--px));
  background: linear-gradient(135deg, #1a2026, #0d1115); border: 1px solid #56616c; overflow: hidden; }
.cw-idcard-photo { width: calc(96 * var(--px)); height: calc(112 * var(--px)); overflow: hidden; border: 1px solid #3b444d; flex: none; filter: grayscale(1); }
.cw-idcard-photo svg { width: 100%; height: 100%; }
.cw-idcard-info { display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--px)); font-family: var(--f-mono); }
.cw-idcard-info .n { font: 700 calc(24 * var(--px)) var(--f-din); letter-spacing: 0.1em; color: #e9eef2; }
.cw-idcard-info .r { font-size: calc(13 * var(--px)); letter-spacing: 0.2em; color: #ffb23f; }
.cw-idcard-info .s { font-size: calc(11.5 * var(--px)); letter-spacing: 0.12em; color: #8e9aa6; }
.cw-idcard-scan { position: absolute; left: 0; right: 0; top: 0; height: calc(3 * var(--px)); background: #b9fff0;
  box-shadow: 0 0 calc(14 * var(--px)) calc(4 * var(--px)) rgba(120, 255, 220, 0.6); animation: cw-scanbar 1.2s linear 1 forwards; }
@keyframes cw-scanbar { 0% { top: 0; } 50% { top: calc(100% - 3px); } 100% { top: 0; opacity: 0; } }
.cw-idcard.is-matched { border-color: #3dff8a; box-shadow: 0 0 calc(16 * var(--px)) rgba(61, 255, 138, 0.25); }
.cw-idcard.is-matched .cw-idcard-photo { filter: none; }
.cw-scan-pct { font: 700 calc(34 * var(--px)) var(--f-mono); color: #3dff8a; text-shadow: 0 0 10px rgba(61, 255, 138, 0.6); min-width: calc(96 * var(--px)); text-align: right; }
.cw-verify-lines { padding: calc(10 * var(--px)) calc(30 * var(--px)) calc(22 * var(--px)); min-height: calc(92 * var(--px)); font: 500 calc(15 * var(--px)) / 1.7 var(--f-mono); color: #ffb23f; white-space: pre; }
.cw-login.is-stamped .cw-verify, .cw-login.is-stamped .cw-verify-lines { opacity: 0.4; transition: opacity 120ms; }
.cw-stamp { position: absolute; left: 50%; top: 56%; z-index: 5; padding: calc(10 * var(--px)) calc(18 * var(--px)) calc(6 * var(--px));
  font: 700 calc(44 * var(--px)) / 1 var(--f-din); letter-spacing: 0.04em; color: #3dff8a; white-space: nowrap;
  border: calc(3 * var(--px)) solid #3dff8a; border-radius: calc(6 * var(--px)); background: rgba(3, 20, 10, 0.55);
  text-shadow: 0 0 calc(12 * var(--px)) rgba(61, 255, 138, 0.6); box-shadow: 0 0 calc(24 * var(--px)) rgba(61, 255, 138, 0.35), inset 0 0 calc(18 * var(--px)) rgba(61, 255, 138, 0.2);
  transform: translate(-50%, -50%) rotate(-3deg) scale(1.15); opacity: 0; pointer-events: none;
  -webkit-mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0, 0, 0, 0.82) 2px 3px);
  mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0, 0, 0, 0.82) 2px 3px); }
.cw-stamp.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); transition: transform 90ms cubic-bezier(0.3, 1.6, 0.6, 1), opacity 40ms; }

.cw-boot.is-leaving .cw-boot-crt { opacity: 0; transition: opacity 450ms; }

/* ------------------------------------------------------ quit: offline card --- */
.cw-offline { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--px)); font-family: var(--f-mono); }
.cw-offline-t { font: 700 calc(30 * var(--px)) var(--f-mono); letter-spacing: 0.3em; color: #ffb23f; text-shadow: 0 0 12px rgba(255, 178, 63, 0.5); }
.cw-offline-s { font-size: calc(14 * var(--px)); letter-spacing: 0.12em; color: #8e9aa6; }
/* Fourth of July fireworks behind the title (easter egg #5). */
.cw-fireworks { position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none; }
.cw-fireworks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; color: var(--fc); background: currentColor; opacity: 0;
  box-shadow: 0 -34px 0 currentColor, 24px -24px 0 currentColor, 34px 0 0 currentColor, 24px 24px 0 currentColor, 0 34px 0 currentColor, -24px 24px 0 currentColor, -34px 0 0 currentColor, -24px -24px 0 currentColor;
  animation: cw-burst 1.6s ease-out infinite; }
@keyframes cw-burst { 0% { opacity: 0; transform: scale(0.1); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }