/* ============================================================================
   SERFS & FRAUDS // BLACK RAGNAROK ARCHIVE TERMINAL
   "Used future" retro-futurism (Alien: Isolation x Fallout cassette-futurism).
   All visual effects are user-configurable; this sheet provides the machinery,
   the SnfLayout root toggles them via data-attributes / FX components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=VT323&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&display=swap');

/* ---------------------------------------------------------------------------
   ROOT + THEME TOKENS
   --------------------------------------------------------------------------- */
.snf-root {
  /* Industrial surfaces */
  --snf-bg: #060809;
  --snf-bg-2: #0a0e10;
  --snf-panel: #0d1316;
  --snf-panel-2: #111a1d;
  --snf-metal-hi: rgba(255, 255, 255, 0.07);
  --snf-metal-lo: rgba(0, 0, 0, 0.65);
  --snf-line: rgba(255, 255, 255, 0.08);
  --snf-alert: #ff4634; /* oxblood / red-alert constant */
  --snf-alert-rgb: 255, 70, 52;

  /* Phosphor (overridden per CRT theme below) */
  --snf-phos: #ffb000;
  --snf-phos-rgb: 255, 176, 0;
  --snf-ink: #e8d9b0;
  --snf-ink-dim: #9a8a63;

  /* FX intensities (overridden by data-attrs) */
  --snf-scan-opacity: 0.22;
  --snf-scan-size: 3px;
  --snf-grain-opacity: 0.05;

  --snf-screen-glow: rgba(var(--snf-phos-rgb), 0.05);

  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(var(--snf-phos-rgb), 0.04),
      transparent 60%
    ),
    linear-gradient(180deg, var(--snf-bg-2), var(--snf-bg));
  color: var(--snf-ink);
  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.snf-root[data-snf-crt='amber'] {
  --snf-phos: #ffb000;
  --snf-phos-rgb: 255, 176, 0;
  --snf-ink: #ecdcb2;
  --snf-ink-dim: #9c8b62;
}
.snf-root[data-snf-crt='green'] {
  --snf-phos: #54ff95;
  --snf-phos-rgb: 84, 255, 149;
  --snf-ink: #cdeccf;
  --snf-ink-dim: #6f9a78;
}
.snf-root[data-snf-crt='blue'] {
  --snf-phos: #57c9ff;
  --snf-phos-rgb: 87, 201, 255;
  --snf-ink: #cfe6f2;
  --snf-ink-dim: #6f93a6;
}
.snf-root[data-snf-crt='white'] {
  --snf-phos: #e9f2ec;
  --snf-phos-rgb: 233, 242, 236;
  --snf-ink: #dfe8e2;
  --snf-ink-dim: #8a958f;
}

/* Scanline intensity steps */
.snf-root[data-snf-scan='low'] {
  --snf-scan-opacity: 0.12;
  --snf-scan-size: 4px;
}
.snf-root[data-snf-scan='med'] {
  --snf-scan-opacity: 0.22;
  --snf-scan-size: 3px;
}
.snf-root[data-snf-scan='high'] {
  --snf-scan-opacity: 0.34;
  --snf-scan-size: 2px;
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY HELPERS
   --------------------------------------------------------------------------- */
.snf-display {
  font-family: 'Chakra Petch', 'Space Mono', sans-serif;
  letter-spacing: -0.01em;
}
.snf-vt {
  font-family: 'VT323', 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
}
.snf-mono {
  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
}
.snf-serif {
  font-family: 'Fraunces', 'Times New Roman', serif;
}

.snf-phos-text {
  color: var(--snf-phos);
}
.snf-dim {
  color: var(--snf-ink-dim);
}

/* Phosphor glow (only when enabled) */
.snf-root[data-snf-glow='1'] .snf-glow {
  text-shadow:
    0 0 1px rgba(var(--snf-phos-rgb), 0.95),
    0 0 9px rgba(var(--snf-phos-rgb), 0.65),
    0 0 24px rgba(var(--snf-phos-rgb), 0.5),
    0 0 52px rgba(var(--snf-phos-rgb), 0.32);
}
.snf-root[data-snf-glow='1'] .snf-glow-soft {
  text-shadow:
    0 0 1px rgba(var(--snf-phos-rgb), 0.7),
    0 0 12px rgba(var(--snf-phos-rgb), 0.4),
    0 0 28px rgba(var(--snf-phos-rgb), 0.22);
}
/* When glow is OFF, flatten everything so the difference is obvious. */
.snf-root[data-snf-glow='0'] .snf-glow,
.snf-root[data-snf-glow='0'] .snf-glow-soft {
  text-shadow: none;
}
.snf-root[data-snf-glow='1'] .snf-box-glow {
  box-shadow:
    0 0 0 1px rgba(var(--snf-phos-rgb), 0.25),
    0 0 22px -6px rgba(var(--snf-phos-rgb), 0.4);
}

/* Chromatic aberration on key screen text */
.snf-root[data-snf-aberration='1'] .snf-glow,
.snf-root[data-snf-aberration='1'] .snf-aberrate {
  text-shadow:
    -1.8px 0 0 rgba(255, 30, 80, 0.6),
    1.8px 0 0 rgba(0, 225, 255, 0.55);
}
/* Aberration + glow together (higher specificity wins over either alone) */
.snf-root[data-snf-glow='1'][data-snf-aberration='1'] .snf-glow,
.snf-root[data-snf-glow='1'][data-snf-aberration='1'] .snf-aberrate {
  text-shadow:
    -1.8px 0 0 rgba(255, 30, 80, 0.6),
    1.8px 0 0 rgba(0, 225, 255, 0.55),
    0 0 20px rgba(var(--snf-phos-rgb), 0.5);
}

/* ---------------------------------------------------------------------------
   CRT HOUSING / BEZEL (SnfLayout)
   --------------------------------------------------------------------------- */
.snf-housing {
  position: relative;
  height: 100vh;
  background:
    linear-gradient(145deg, #14191b, #0a0e0f 60%),
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.12) 0 2px,
      transparent 2px 6px
    );
  padding: clamp(6px, 1.4vw, 22px);
}
.snf-screen {
  position: relative;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  transform-origin: center;
  background:
    radial-gradient(
      ellipse at 50% 38%,
      rgba(var(--snf-phos-rgb), 0.05),
      transparent 70%
    ),
    var(--snf-bg);
  box-shadow:
    inset 0 0 0 1px rgba(var(--snf-phos-rgb), 0.12),
    inset 0 0 120px rgba(0, 0, 0, 0.85),
    0 30px 80px -20px rgba(0, 0, 0, 0.9);
}
/* Curvature: bowed-glass framing — strong corner vignette + top glare */
.snf-root[data-snf-curve='1'] .snf-screen {
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 1px rgba(var(--snf-phos-rgb), 0.16),
    inset 0 0 220px rgba(0, 0, 0, 0.95),
    inset 0 0 70px rgba(0, 0, 0, 0.82),
    0 30px 80px -20px rgba(0, 0, 0, 0.9);
}
.snf-root[data-snf-curve='1'] .snf-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  border-radius: inherit;
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(70% 45% at 50% 6%, rgba(255, 255, 255, 0.06), transparent 70%);
}
/* Corner screws on the housing */
.snf-screw {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a4347, #0c1011 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 40;
}
.snf-screw::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(45deg, transparent 45%, #555 45% 55%, transparent 55%);
}
.snf-screw.tl { top: 9px; left: 9px; }
.snf-screw.tr { top: 9px; right: 9px; }
.snf-screw.bl { bottom: 9px; left: 9px; }
.snf-screw.br { bottom: 9px; right: 9px; }

/* ---------------------------------------------------------------------------
   FX OVERLAYS
   --------------------------------------------------------------------------- */
.snf-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}
/* Scanlines */
.snf-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--snf-scan-opacity)) 0,
    rgba(0, 0, 0, var(--snf-scan-opacity)) 1px,
    transparent 1px,
    transparent var(--snf-scan-size)
  );
  mix-blend-mode: multiply;
}
.snf-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--snf-phos-rgb), 0.03),
    transparent 8%,
    transparent 92%,
    rgba(var(--snf-phos-rgb), 0.03)
  );
}
/* Rolling refresh bar */
.snf-rollbar {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--snf-phos-rgb), 0.06) 48%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 52%
  );
  height: 28%;
  width: 100%;
  position: absolute;
  left: 0;
  top: -30%;
  animation: snf-roll 7s linear infinite;
}
/* Grain / grime — fine film grain (explicit small tile so it isn't upscaled) */
.snf-grain {
  inset: -80px; /* oversize so the translate animation never reveals an edge */
  opacity: var(--snf-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.7' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  animation: snf-grain-shift 0.5s steps(6) infinite;
}
/* Flicker — periodic CRT brightness dips (black overlay) */
.snf-flicker {
  background: #000;
  opacity: 0;
  animation: snf-flicker 5s infinite;
}
/* Vignette */
.snf-vignette {
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* ---------------------------------------------------------------------------
   CHROME: top bar + status bar
   --------------------------------------------------------------------------- */
.snf-bar {
  background:
    linear-gradient(180deg, var(--snf-panel-2), var(--snf-panel)),
    var(--snf-bg);
  border-bottom: 1px solid var(--snf-line);
  box-shadow:
    inset 0 1px 0 var(--snf-metal-hi),
    inset 0 -1px 0 var(--snf-metal-lo);
}
.snf-statusbar {
  background: linear-gradient(0deg, var(--snf-panel-2), var(--snf-panel));
  border-top: 1px solid var(--snf-line);
  box-shadow: inset 0 1px 0 var(--snf-metal-hi);
}
.snf-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--snf-phos);
  box-shadow: 0 0 8px rgba(var(--snf-phos-rgb), 0.8);
}
.snf-root[data-snf-flicker='1'] .snf-led-blink {
  animation: snf-blink 1.6s steps(1) infinite;
}
.snf-rec {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--snf-alert);
  box-shadow: 0 0 8px rgba(var(--snf-alert-rgb), 0.8);
  animation: snf-blink 1.1s steps(1) infinite;
}

/* ---------------------------------------------------------------------------
   PANELS / CARDS / BUTTONS
   --------------------------------------------------------------------------- */
.snf-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    var(--snf-panel);
  border: 1px solid var(--snf-line);
  box-shadow:
    inset 0 1px 0 var(--snf-metal-hi),
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 10px 30px -18px rgba(0, 0, 0, 0.9);
}
.snf-panel-bracket::before,
.snf-panel-bracket::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(var(--snf-phos-rgb), 0.55);
  pointer-events: none;
}
.snf-panel-bracket::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}
.snf-panel-bracket::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.snf-btn {
  position: relative;
  font-family: 'Chakra Petch', monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--snf-ink);
  background: linear-gradient(180deg, var(--snf-panel-2), var(--snf-panel));
  border: 1px solid rgba(var(--snf-phos-rgb), 0.3);
  box-shadow:
    inset 0 1px 0 var(--snf-metal-hi),
    inset 0 -2px 6px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.12s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.snf-btn:hover {
  color: var(--snf-phos);
  border-color: rgba(var(--snf-phos-rgb), 0.7);
  box-shadow:
    inset 0 1px 0 var(--snf-metal-hi),
    0 0 18px -4px rgba(var(--snf-phos-rgb), 0.5);
}
.snf-btn:active {
  transform: translateY(1px);
}
.snf-btn:focus-visible {
  outline: 2px solid var(--snf-phos);
  outline-offset: 2px;
}
.snf-btn-primary {
  color: #05080a;
  background: linear-gradient(180deg, var(--snf-phos), rgba(var(--snf-phos-rgb), 0.7));
  border-color: var(--snf-phos);
  font-weight: 700;
}
.snf-btn-primary:hover {
  color: #05080a;
  box-shadow: 0 0 26px -4px rgba(var(--snf-phos-rgb), 0.7);
}

/* Interactive list row (terminal menu) */
.snf-row {
  position: relative;
  border: 1px solid var(--snf-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.12s ease;
}
.snf-row:hover {
  border-color: rgba(var(--snf-phos-rgb), 0.55);
  background: rgba(var(--snf-phos-rgb), 0.06);
}
.snf-row:hover .snf-row-arrow {
  transform: translateX(4px);
  color: var(--snf-phos);
}
.snf-row-arrow {
  transition:
    transform 0.18s ease,
    color 0.2s ease;
}

/* Toggle switch */
.snf-toggle {
  width: 46px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid var(--snf-line);
  background: #05080a;
  position: relative;
  cursor: pointer;
  flex: none;
  transition: border-color 0.2s ease;
}
.snf-toggle[data-on='1'] {
  border-color: rgba(var(--snf-phos-rgb), 0.7);
  background: rgba(var(--snf-phos-rgb), 0.12);
}
.snf-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #4a5358;
  border-radius: 1px;
  transition:
    transform 0.18s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.snf-toggle[data-on='1'] .snf-toggle-knob {
  transform: translateX(24px);
  background: var(--snf-phos);
  box-shadow: 0 0 10px rgba(var(--snf-phos-rgb), 0.8);
}

/* Native-ish select styled */
.snf-select {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--snf-phos);
  background: #05080a;
  border: 1px solid rgba(var(--snf-phos-rgb), 0.4);
  padding: 6px 10px;
  cursor: pointer;
}
.snf-select:focus-visible {
  outline: 2px solid var(--snf-phos);
  outline-offset: 1px;
}

/* Range input */
.snf-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(var(--snf-phos-rgb), 0.25);
  border-radius: 2px;
  outline: none;
}
.snf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 18px;
  background: var(--snf-phos);
  box-shadow: 0 0 10px rgba(var(--snf-phos-rgb), 0.7);
  cursor: pointer;
  border-radius: 1px;
}
.snf-range::-moz-range-thumb {
  width: 14px;
  height: 18px;
  border: none;
  background: var(--snf-phos);
  cursor: pointer;
  border-radius: 1px;
}

/* Input */
.snf-input {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--snf-ink);
  background: #05080a;
  border: 1px solid var(--snf-line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.snf-input::placeholder {
  color: var(--snf-ink-dim);
}
.snf-input:focus {
  outline: none;
  border-color: rgba(var(--snf-phos-rgb), 0.7);
  box-shadow: 0 0 18px -6px rgba(var(--snf-phos-rgb), 0.6);
}

/* Status pills */
.snf-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.snf-pill-ok { color: var(--snf-phos); }
.snf-pill-warn { color: #ffb454; }
.snf-pill-dead { color: var(--snf-alert); }

/* Dashed data divider */
.snf-divider {
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(var(--snf-phos-rgb), 0.4) 0 8px,
    transparent 8px 14px
  );
  background-size: 14px 1px;
}

/* ---------------------------------------------------------------------------
   READING (Field Report)
   --------------------------------------------------------------------------- */
.snf-reading {
  color: var(--snf-ink);
  line-height: 1.85;
}
.snf-reading[data-font='document'] {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-size: 1.18rem;
}
.snf-reading[data-font='terminal'] {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.02rem;
  line-height: 1.95;
}
.snf-reading[data-size='sm'] { font-size: 0.98rem; }
.snf-reading[data-size='lg'] { font-size: 1.4rem; }
.snf-reading p { margin: 0 0 1.25em; }
.snf-reading strong {
  color: var(--snf-phos);
  font-weight: 600;
}
.snf-reading em {
  color: var(--snf-ink);
  font-style: italic;
  opacity: 0.92;
}
.snf-reading h1,
.snf-reading h2,
.snf-reading h3 {
  font-family: 'Chakra Petch', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--snf-phos);
  margin: 1.6em 0 0.6em;
}
.snf-reading blockquote {
  border-left: 2px solid rgba(var(--snf-phos-rgb), 0.5);
  padding-left: 1.2em;
  color: var(--snf-ink-dim);
  font-style: italic;
}
.snf-reading a {
  color: var(--snf-phos);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.snf-reading hr {
  border: none;
  height: 1px;
  background: rgba(var(--snf-phos-rgb), 0.25);
  margin: 2em 0;
}
/* Drop cap on first paragraph (document mode only) */
.snf-reading[data-font='document'] > p:first-of-type::first-letter {
  font-family: 'Chakra Petch', sans-serif;
  float: left;
  font-size: 3.4em;
  line-height: 0.8;
  padding: 0.05em 0.12em 0 0;
  color: var(--snf-phos);
  text-shadow: 0 0 18px rgba(var(--snf-phos-rgb), 0.4);
}

/* ---------------------------------------------------------------------------
   FIELD REPORT — continuous-feed printout reader
   --------------------------------------------------------------------------- */
.snf-progress-track {
  height: 3px;
  background: rgba(var(--snf-phos-rgb), 0.12);
}
.snf-progress-fill {
  height: 100%;
  background: var(--snf-phos);
  box-shadow: 0 0 10px rgba(var(--snf-phos-rgb), 0.7);
  transition: width 0.1s linear;
}

.snf-printout {
  position: relative;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 27px,
      rgba(var(--snf-phos-rgb), 0.022) 27px 28px
    ),
    #070b0c;
  border: 1px solid var(--snf-line);
  box-shadow:
    inset 0 1px 0 var(--snf-metal-hi),
    0 18px 48px -24px rgba(0, 0, 0, 0.9);
}
/* sprocket-hole feed rails */
.snf-printout::before,
.snf-printout::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  background-color: rgba(0, 0, 0, 0.35);
  background-image: radial-gradient(
    circle,
    #04070800 0 2.5px,
    #02050699 3px 4px,
    transparent 4.5px
  );
  background-size: 24px 28px;
  background-position: center 12px;
}
.snf-printout::before {
  left: 0;
  border-right: 1px solid var(--snf-line);
}
.snf-printout::after {
  right: 0;
  border-left: 1px solid var(--snf-line);
}

/* per-paragraph line numbers in the gutter */
.snf-printout-body {
  counter-reset: snfln;
}
.snf-printout-body p {
  position: relative;
}
.snf-printout-body p::before {
  counter-increment: snfln;
  content: counter(snfln, decimal-leading-zero);
  position: absolute;
  left: -3rem;
  top: 0.35em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--snf-ink-dim);
  opacity: 0.55;
  user-select: none;
}
@media (max-width: 860px) {
  .snf-printout::before,
  .snf-printout::after {
    width: 14px;
  }
  .snf-printout-body p::before {
    display: none;
  }
}

/* CLASSIFIED stamp */
.snf-stamp {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--snf-alert);
  border: 2px solid var(--snf-alert);
  padding: 3px 10px;
  border-radius: 3px;
  transform: rotate(-7deg);
  opacity: 0.7;
  text-transform: uppercase;
}

/* Decrypt / typewriter cursor */
.snf-cursor::after {
  content: '▌';
  color: var(--snf-phos);
  animation: snf-blink 1s steps(1) infinite;
  margin-left: 2px;
}
.snf-redact {
  background: rgba(var(--snf-phos-rgb), 0.18);
  color: transparent;
  border-radius: 1px;
  user-select: none;
}

/* ---------------------------------------------------------------------------
   BOOT SEQUENCE
   --------------------------------------------------------------------------- */
.snf-boot {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--snf-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.snf-boot-bar {
  height: 8px;
  background: rgba(var(--snf-phos-rgb), 0.15);
  border: 1px solid rgba(var(--snf-phos-rgb), 0.4);
  overflow: hidden;
}
.snf-boot-bar > span {
  display: block;
  height: 100%;
  background: var(--snf-phos);
  box-shadow: 0 0 12px rgba(var(--snf-phos-rgb), 0.8);
  animation: snf-boot-fill 1.8s ease forwards;
}

/* ---------------------------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------------------------- */
@keyframes snf-roll {
  0% { transform: translateY(0); }
  100% { transform: translateY(460%); }
}
@keyframes snf-grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-32px, 20px); }
  40% { transform: translate(26px, -28px); }
  60% { transform: translate(-20px, 32px); }
  80% { transform: translate(30px, 14px); }
  100% { transform: translate(0, 0); }
}
@keyframes snf-flicker {
  0%, 100% { opacity: 0; }
  2% { opacity: 0.1; }
  3% { opacity: 0.02; }
  4% { opacity: 0.08; }
  39% { opacity: 0; }
  40% { opacity: 0.24; }
  41% { opacity: 0.05; }
  42% { opacity: 0.3; }
  43% { opacity: 0.06; }
  68% { opacity: 0; }
  69% { opacity: 0.18; }
  70% { opacity: 0.03; }
  71% { opacity: 0.2; }
  72% { opacity: 0.04; }
}
@keyframes snf-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
@keyframes snf-boot-fill {
  from { width: 0%; }
  to { width: 100%; }
}
@keyframes snf-scan-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes snf-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes snf-pulse-border {
  0%, 100% { border-color: rgba(var(--snf-phos-rgb), 0.3); }
  50% { border-color: rgba(var(--snf-phos-rgb), 0.7); }
}

.snf-anim-up {
  animation: snf-fade-up 0.6s ease both;
}
.snf-anim-scan {
  animation: snf-scan-in 0.7s ease both;
}

/* ---------------------------------------------------------------------------
   SCREEN SHAKE — camera jitter with rotation, intensity-scaled
   --------------------------------------------------------------------------- */
.snf-root[data-snf-shake='low'] .snf-screen {
  animation: snf-shake-low 0.5s ease-in-out infinite;
  will-change: transform;
}
.snf-root[data-snf-shake='med'] .snf-screen {
  animation: snf-shake-med 0.34s ease-in-out infinite;
  will-change: transform;
}
.snf-root[data-snf-shake='high'] .snf-screen {
  animation: snf-shake-high 0.22s linear infinite;
  will-change: transform;
}
@keyframes snf-shake-low {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(0.6px, -0.5px) rotate(0.08deg); }
  40% { transform: translate(-0.5px, 0.6px) rotate(-0.1deg); }
  60% { transform: translate(0.5px, 0.4px) rotate(0.07deg); }
  80% { transform: translate(-0.4px, -0.5px) rotate(-0.06deg); }
}
@keyframes snf-shake-med {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(1.4px, -1.1px) rotate(0.22deg); }
  40% { transform: translate(-1.2px, 1.3px) rotate(-0.26deg); }
  60% { transform: translate(1.1px, 1px) rotate(0.18deg); }
  80% { transform: translate(-1px, -1.2px) rotate(-0.16deg); }
}
@keyframes snf-shake-high {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(2.6px, -2.2px) rotate(0.5deg); }
  30% { transform: translate(-2.8px, 2px) rotate(-0.55deg); }
  45% { transform: translate(2.2px, 2.6px) rotate(0.45deg); }
  60% { transform: translate(-2.4px, -1.8px) rotate(-0.5deg); }
  75% { transform: translate(2px, -2.4px) rotate(0.4deg); }
  90% { transform: translate(-2.2px, 2.2px) rotate(-0.42deg); }
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION — kill all the moving parts
   --------------------------------------------------------------------------- */
.snf-root[data-snf-rm='1'] * {
  animation: none !important;
  transition: none !important;
}
.snf-root[data-snf-rm='1'] .snf-rollbar {
  display: none;
}

/* ---------------------------------------------------------------------------
   MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .snf-housing {
    padding: 4px;
  }
  .snf-screen {
    border-radius: 8px;
  }
  /* lighter scanlines + grain on small screens for perf/legibility */
  .snf-root {
    --snf-scan-opacity: 0.12;
    --snf-grain-opacity: 0.035;
  }
  .snf-reading[data-font='document'] {
    font-size: 1.06rem;
  }
}

/* Custom scrollbar inside the terminal */
.snf-root ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.snf-root ::-webkit-scrollbar-track {
  background: #05080a;
}
.snf-root ::-webkit-scrollbar-thumb {
  background: rgba(var(--snf-phos-rgb), 0.35);
  border: 2px solid #05080a;
}
.snf-root ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--snf-phos-rgb), 0.6);
}