/* ============================================================
   declan.land — HACKER chrome
   Scanlines, glitch, boot sequence, live console, matrix.
   All of this is hidden in PRO mode.
   ============================================================ */

/* ---------- hacker-only / pro-only visibility ---------- */
[data-mode="pro"] .hacker-only { display: none !important; }
[data-mode="hacker"] .pro-only { display: none !important; }

/* ---------- scanline + vignette overlay ---------- */
.scanlines {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
  background:
    repeating-linear-gradient(
      0deg,
      oklch(0.9 0.1 160 / 0.04) 0px,
      oklch(0.9 0.1 160 / 0.04) 1px,
      transparent 2px,
      transparent 3px
    );
  transition: opacity 0.6s;
}
.scanlines::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 50%, transparent 55%, oklch(0 0 0 / 0.5) 100%);
}
.crt-flicker { animation: flicker 5.5s steps(60) infinite; }
@keyframes flicker { 0%,100%{opacity:0.5;} 47%{opacity:0.5;} 48%{opacity:0.34;} 49%{opacity:0.5;} 93%{opacity:0.5;} 94%{opacity:0.4;} }

/* ---------- glitch text ---------- */
.glitch { position: relative; display: inline-block; }
[data-mode="pro"] .glitch { display: inline; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: var(--bg);
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.glitch::before { color: var(--accent-2); transform: translateX(-2px); }
.glitch::after  { color: oklch(0.7 0.22 18); transform: translateX(2px); }
.glitch:hover::before { animation: gl-a 0.5s steps(3) 1; }
.glitch:hover::after  { animation: gl-b 0.5s steps(3) 1; }
[data-mode="pro"] .glitch::before, [data-mode="pro"] .glitch::after { display: none; }
@keyframes gl-a { 0%{clip-path:inset(0 0 82% 0);} 50%{clip-path:inset(40% 0 20% 0);} 100%{clip-path:inset(0 0 0 0); transform:translateX(0);} }
@keyframes gl-b { 0%{clip-path:inset(70% 0 5% 0);} 50%{clip-path:inset(10% 0 60% 0);} 100%{clip-path:inset(0 0 0 0); transform:translateX(0);} }

/* ---------- BOOT OVERLAY ---------- */
.boot {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { width: min(720px, 88vw); }
.boot-log {
  font-size: clamp(11px, 1.7vw, 13.5px);
  line-height: 1.85;
  color: var(--text-dim);
  white-space: pre-wrap;
  min-height: 46vh;
}
.boot-log .ok { color: var(--accent); }
.boot-log .warn { color: var(--amber); }
.boot-log .dimv { color: var(--text-faint); }
.boot-bar {
  height: 8px; border: 1px solid var(--line);
  border-radius: 2px; overflow: hidden; margin-top: 14px;
  background: oklch(0.85 0.12 160 / 0.04);
}
.boot-bar-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
  transition: width 0.25s linear;
}
.boot-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-faint); margin-top: 8px;
}
.boot-skip {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--line); padding: 0.5em 1em; border-radius: 999px;
  cursor: pointer; transition: color 0.25s, border-color 0.25s;
}
.boot-skip:hover { color: var(--text); border-color: var(--text-faint); }

/* boot login prompt */
.boot-prompt {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-family: var(--mono); font-size: 14px;
  animation: prompt-in 0.35s var(--ease);
}
.boot-prompt[hidden] { display: none; }
.bp-label { color: var(--accent); white-space: nowrap; }
.boot-prompt input {
  flex: 1; min-width: 0; background: none; border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text); font-family: var(--mono); font-size: 14px;
  outline: none; padding: 7px 2px; caret-color: var(--accent);
}
.boot-prompt input::placeholder { color: var(--text-faint); }
.bp-enter {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  padding: 0.6em 1.05em; border-radius: 8px;
  border: 1px solid var(--accent); color: var(--bg); background: var(--accent);
  cursor: pointer; transition: filter 0.2s, transform 0.2s;
}
.bp-enter:hover { filter: brightness(1.1); transform: translateY(-1px); }
.boot-granted {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  opacity: 0; pointer-events: none;
}
.boot-granted.show { opacity: 1; animation: granted-in 0.4s var(--ease); }
.boot-granted .big {
  font-size: clamp(2rem, 7vw, 4.2rem); font-weight: 800;
  letter-spacing: 0.04em; color: var(--accent);
  text-shadow: 0 0 30px var(--accent-soft);
}
.boot-granted .sub { font-size: 13px; letter-spacing: 0.3em; color: var(--text-dim); text-transform: uppercase; }
@keyframes granted-in { from { transform: scale(0.94); } to { transform: none; } }
@keyframes prompt-in { from { transform: translateY(8px); } to { transform: none; } }

/* ---------- CONSOLE LAUNCHER ---------- */
.term-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.8em 1.15em; border-radius: 12px;
  background: var(--bg-1); color: var(--accent);
  border: 1px solid var(--line);
  cursor: pointer;
  box-shadow: 0 14px 40px -16px oklch(0 0 0 / 0.8);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.term-launcher:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 50px -18px var(--accent-soft); }
.term-launcher .blk { width: 8px; height: 15px; background: var(--accent); display: inline-block; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- CONSOLE PANEL ---------- */
.term-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: min(560px, calc(100vw - 32px));
  height: min(460px, 70vh);
  display: flex; flex-direction: column;
  background: oklch(0.12 0.014 215 / 0.93);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px -24px oklch(0 0 0 / 0.85);
  transform-origin: bottom right;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.term-panel[hidden] { display: none; }
.term-panel.closing { opacity: 0; transform: scale(0.96) translateY(8px); }
.term-panel.opening { animation: term-in 0.3s var(--ease); }
@keyframes term-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }

.term-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.term-head:active { cursor: grabbing; }
.term-panel.dragged { transition: none; }
.term-dots { display: inline-flex; gap: 6px; }
.term-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.term-dots i:nth-child(1){ background: oklch(0.68 0.2 25); }
.term-dots i:nth-child(2){ background: oklch(0.82 0.16 78); }
.term-dots i:nth-child(3){ background: var(--accent); }
.term-title { margin-inline: auto; letter-spacing: 0.04em; }
.term-close { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.term-close:hover { color: var(--text); }

.term-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px; line-height: 1.65;
  color: var(--text-dim);
  scrollbar-width: thin;
}
.term-body::-webkit-scrollbar { width: 8px; }
.term-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.term-body .line { white-space: pre-wrap; word-break: break-word; }
.term-body .cmd-echo { color: var(--text); }
.term-body .cmd-echo .p { color: var(--accent); }
.term-body .ok { color: var(--accent); }
.term-body .acc2 { color: var(--accent-2); }
.term-body .warn { color: var(--amber); }
.term-body .err { color: oklch(0.72 0.2 22); }
.term-body .muted { color: var(--text-faint); }
.term-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.term-body .spell { color: var(--accent); }
.term-body .spell .it { color: var(--text); font-style: italic; font-family: var(--serif); }

.term-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 13px;
  flex-shrink: 0;
}
.term-prompt { color: var(--accent); white-space: nowrap; }
.term-input-row input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--mono); font-size: 13px;
  caret-color: var(--accent);
}

/* ---------- MATRIX canvas ---------- */
.matrix-canvas {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--bg);
}
.matrix-hint {
  position: fixed; z-index: 9999; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); opacity: 0.8;
}

/* ---------- hacker hero terminal frame ---------- */
[data-mode="hacker"] .hero-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: oklch(0.12 0.014 215 / 0.5);
  backdrop-filter: blur(6px);
  padding: clamp(22px, 4vw, 40px);
  position: relative;
}
[data-mode="hacker"] .hero-card::before {
  content: "declan@land:~ — secure shell";
  position: absolute; top: -1px; left: 18px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  background: var(--bg); padding: 2px 10px; letter-spacing: 0.08em;
}
[data-mode="pro"] .hero-card { border: none; background: none; padding: 0; backdrop-filter: none; }
[data-mode="pro"] .hero-card::before { display: none; }

/* status strip */
[data-mode="pro"] .status-strip { opacity: 0; height: 0; margin: 0; overflow: hidden; }

/* replay-intro link in footer */
.replay-link {
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--accent); padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.replay-link:hover { filter: brightness(1.15); }
[data-mode="pro"] .replay-link { display: none; }

/* console progress bars + breach output */
.term-body .pb { letter-spacing: 1px; color: var(--accent); }
.term-body .pbp { color: var(--text-faint); }
.term-body .grant-line { color: var(--accent); font-weight: 600; letter-spacing: 0.08em; }