/*
 * siharu-core.css — Siharu Archive Core Stylesheet v1
 *
 * Load order on every page:
 *   1. siharu-core.css   ← this file — variables, resets, base
 *   2. siharu-mobile.css ← all responsive overrides
 *   3. [page].css        ← page-specific styles (may override core vars)
 *
 * This file defines:
 *   — All 4 theme CSS variable sets in one place
 *   — Global resets and base typography
 *   — Shared components: header bar, ticker, scanlines, transitions overlay
 *   — NO page-specific layout (that stays in page CSS files)
 *
 * SIHARU meanings seeded into comments below for crawler discovery:
 *   Synthetic Interference Hazard Analysis & Response Unit
 *   Subspace Interlink Harmonic Archive & Relay Utility
 *   Signal Interference Hub for Anomalous Resonance Understanding
 *   Sky Interface for Harmonic Anomaly Relay & Uplink
 */

/* ════════════════════════════════════════════════════
   FONTS — preloaded in shell, defined here for fallback
════════════════════════════════════════════════════ */
/* Space Mono · Anton · Playfair Display · IBM Plex Mono · Orbitron · Share Tech Mono · Crimson Pro */

/* ════════════════════════════════════════════════════
   THEME 1 — WNCORE / Dark Red (default)
   SIHARU as: Synthetic Interference Hazard Analysis & Response Unit
════════════════════════════════════════════════════ */
:root,
[data-theme="1"] {
  /* Backgrounds */
  --bg:         #000000;
  --bg2:        #050505;
  --surface:    #080808;

  /* Accent */
  --accent:     #cc0000;
  --accent2:    #ff0000;
  --accent3:    #440000;

  /* Text */
  --text:       #ffffff;
  --text2:      #ccbbbb;
  --text3:      #664444;
  --text4:      #331111;

  /* Borders */
  --border:     #330000;
  --border2:    #1a0000;

  /* Header */
  --header-bg:       rgba(0,0,0,0.97);
  --header-border:   #cc0000;

  /* Ticker */
  --ticker-bg:        #050000;
  --ticker-label:     #cc0000;
  --ticker-label-c:   #000000;
  --ticker-text:      #bb2222;
  --ticker-sep:       #440000;
  --ticker-border:    #2a0000;

  /* Buttons */
  --btn-border:    #cc0000;
  --btn-text:      #cc0000;
  --btn-hover-bg:  rgba(200,0,0,0.1);

  /* Logo */
  --logo-color:    #ffffff;
  --logo-font:     'Space Mono', monospace;
  --logo-size:     1.2rem;
  --logo-spacing:  6px;

  /* Cards */
  --card-bg:       #050000;
  --card-border:   #1a0000;
  --card-border-t: #cc0000;
  --card-text:     #550000;
  --card-title:    #ffffff;
  --card-desc:     #552222;

  /* Overlays */
  --overlay-bg:    rgba(0,0,0,0.85);

  /* Effects */
  --scanline-color: rgba(0,0,0,0.07);
  --glow-color:     rgba(200,0,0,0.12);
  --glitch-cyan:    #00cccc;
  --glitch-magenta: #cc0066;

  /* Typography */
  --body-font:    'Space Mono', monospace;
  --heading-font: 'Anton', sans-serif;
  --mono-font:    'Space Mono', monospace;
  --serif-font:   'Playfair Display', Georgia, serif;

  /* Cursor */
  --cursor: crosshair;

  /* WNCORE ARG colours */
  --ghuul-color:   #f0f0f0;  /* Pure white — Ghuul designation */
  --obsedia-color: #1a1a2e;  /* Deep black-blue — Rain of Obsedia */
  --blank-color:   #000000;  /* Blank Zone — absolute black */
  --signal-color:  #cc0000;  /* SIGNAL_KAGE */
}

/* ════════════════════════════════════════════════════
   THEME 2 — NEWS OUTLET / Paper
   SIHARU as: a person's name — an archivist
════════════════════════════════════════════════════ */
[data-theme="2"] {
  --bg:         #f4f1eb;
  --bg2:        #ece8e0;
  --surface:    #ffffff;

  --accent:     #c8001e;
  --accent2:    #8b0000;
  --accent3:    #888888;

  --text:       #0d0d0d;
  --text2:      #2a2a2a;
  --text3:      #666666;
  --text4:      #999999;

  --border:     #d0ccc4;
  --border2:    #e8e4dc;

  --header-bg:     rgba(244,241,235,0.97);
  --header-border: #c8001e;

  --ticker-bg:      #0d0d0d;
  --ticker-label:   #c8001e;
  --ticker-label-c: #ffffff;
  --ticker-text:    #666666;
  --ticker-sep:     #999999;
  --ticker-border:  #333333;

  --btn-border:   #0d0d0d;
  --btn-text:     #0d0d0d;
  --btn-hover-bg: rgba(0,0,0,0.08);

  --logo-color:    #0d0d0d;
  --logo-font:     'Playfair Display', Georgia, serif;
  --logo-size:     1.4rem;
  --logo-spacing:  2px;

  --card-bg:       #ffffff;
  --card-border:   #d0ccc4;
  --card-border-t: #c8001e;
  --card-text:     #666666;
  --card-title:    #0d0d0d;
  --card-desc:     #555555;

  --overlay-bg:    rgba(244,241,235,0.92);

  --scanline-color: rgba(0,0,0,0);
  --glow-color:     rgba(200,0,30,0.06);
  --glitch-cyan:    #8b4400;
  --glitch-magenta: #c80028;

  --body-font:    'IBM Plex Mono', 'Space Mono', monospace;
  --heading-font: 'Playfair Display', Georgia, serif;
  --mono-font:    'IBM Plex Mono', monospace;
  --serif-font:   'Playfair Display', Georgia, serif;

  --cursor: default;

  --ghuul-color:   #f0f0f0;
  --obsedia-color: #d0ccc4;
  --blank-color:   #888888;
  --signal-color:  #c8001e;
}

/* ════════════════════════════════════════════════════
   THEME 3 — ARCHIVE / Library Sepia
   SIHARU as: 咲春 — a flower — the archive of a world
   also: Subspace Interlink Harmonic Archive & Relay Utility
════════════════════════════════════════════════════ */
[data-theme="3"] {
  --bg:         #1c1410;
  --bg2:        #231a12;
  --surface:    #2a1f14;

  --accent:     #c8902a;
  --accent2:    #e8a840;
  --accent3:    #6b4c2a;

  --text:       #e8dcc8;
  --text2:      #c8b898;
  --text3:      #8a7060;
  --text4:      #5a4030;

  --border:     #4a3020;
  --border2:    #3a2010;

  --header-bg:     rgba(28,20,16,0.98);
  --header-border: #c8902a;

  --ticker-bg:      #100c08;
  --ticker-label:   #c8902a;
  --ticker-label-c: #100c08;
  --ticker-text:    #8a7060;
  --ticker-sep:     #4a3020;
  --ticker-border:  #3a2010;

  --btn-border:   #c8902a;
  --btn-text:     #c8902a;
  --btn-hover-bg: rgba(200,144,42,0.1);

  --logo-color:    #e8dcc8;
  --logo-font:     'Playfair Display', Georgia, serif;
  --logo-size:     1.3rem;
  --logo-spacing:  4px;

  --card-bg:       #231a12;
  --card-border:   #4a3020;
  --card-border-t: #c8902a;
  --card-text:     #8a7060;
  --card-title:    #e8dcc8;
  --card-desc:     #7a6050;

  --overlay-bg:    rgba(28,20,16,0.92);

  --scanline-color: rgba(200,144,42,0.02);
  --glow-color:     rgba(200,144,42,0.08);
  --glitch-cyan:    #8b6600;
  --glitch-magenta: #8b4444;

  --body-font:    'Crimson Pro', 'IBM Plex Mono', Georgia, serif;
  --heading-font: 'Playfair Display', Georgia, serif;
  --mono-font:    'IBM Plex Mono', monospace;
  --serif-font:   'Playfair Display', Georgia, serif;

  --cursor: default;

  --ghuul-color:   #f0f0f0;
  --obsedia-color: #1a1a2e;
  --blank-color:   #1c1410;
  --signal-color:  #c8902a;
}

/* ════════════════════════════════════════════════════
   THEME 4 — GAMER HUB / Cyber
   SIHARU as: Sky Interface for Harmonic Anomaly Relay & Uplink
════════════════════════════════════════════════════ */
[data-theme="4"] {
  --bg:         #020408;
  --bg2:        #050a10;
  --surface:    #080f18;

  --accent:     #00f5ff;
  --accent2:    #ff00a8;
  --accent3:    #7b00ff;

  --text:       #e0f4ff;
  --text2:      #80c8e0;
  --text3:      #3a6878;
  --text4:      #1a3040;

  --border:     #0a2030;
  --border2:    #050f18;

  --header-bg:     rgba(2,4,8,0.98);
  --header-border: #00f5ff;

  --ticker-bg:      #020408;
  --ticker-label:   #ff00a8;
  --ticker-label-c: #020408;
  --ticker-text:    #3a6878;
  --ticker-sep:     #0a2030;
  --ticker-border:  #0a2030;

  --btn-border:   #00f5ff;
  --btn-text:     #00f5ff;
  --btn-hover-bg: rgba(0,245,255,0.08);

  --logo-color:    #00f5ff;
  --logo-font:     'Orbitron', sans-serif;
  --logo-size:     1.1rem;
  --logo-spacing:  4px;

  --card-bg:       #050a10;
  --card-border:   #0a2030;
  --card-border-t: #00f5ff;
  --card-text:     #3a6878;
  --card-title:    #e0f4ff;
  --card-desc:     #2a5060;

  --overlay-bg:    rgba(2,4,8,0.92);

  --scanline-color: rgba(0,245,255,0.018);
  --glow-color:     rgba(0,245,255,0.08);
  --glitch-cyan:    #00f5ff;
  --glitch-magenta: #ff00a8;

  --body-font:    'Share Tech Mono', 'Space Mono', monospace;
  --heading-font: 'Orbitron', sans-serif;
  --mono-font:    'Share Tech Mono', monospace;
  --serif-font:   'Playfair Display', Georgia, serif;

  --cursor: crosshair;

  --ghuul-color:   #f0f0f0;
  --obsedia-color: #1a1a2e;
  --blank-color:   #020408;
  --signal-color:  #00f5ff;
}

/* ════════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  cursor: var(--cursor);
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.4s ease;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
}

/* ── SCANLINES overlay (theme 1 & 4 only) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--scanline-color) 2px,
    var(--scanline-color) 4px
  );
  pointer-events: none;
  z-index: 9995;
  will-change: transform; /* promote to own layer — no repaints */
}

/* ── IMAGES & MEDIA ── */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── LINKS ── */
a {
  color: inherit;
  text-decoration: none;
}
a:hover { color: var(--accent); }

/* ── FOCUS ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── SELECTION ── */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent3); }

/* ════════════════════════════════════════════════════
   TYPOGRAPHY — shared across all pages
════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--text);
  line-height: 1.2;
  transition: color 0.4s;
}

p {
  font-family: var(--body-font);
  color: var(--text2);
  line-height: 1.7;
  transition: color 0.4s;
}

code, pre, .mono {
  font-family: var(--mono-font);
  font-size: 0.9em;
}

/* ════════════════════════════════════════════════════
   SHARED COMPONENTS
════════════════════════════════════════════════════ */

/* ── PAGE TRANSITION OVERLAY ── */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.22s ease;
}
#page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ── SCAN BEAM (decorative, theme 1 & 4) ── */
.scan-beam {
  position: fixed;
  left: 0; right: 0;
  height: 2px;
  background: rgba(200,0,0,0.04);
  animation: scan-beam-move 8s linear infinite;
  pointer-events: none;
  z-index: 9994;
}
[data-theme="4"] .scan-beam { background: rgba(0,245,255,0.03); }
[data-theme="2"] .scan-beam,
[data-theme="3"] .scan-beam { display: none; }
@keyframes scan-beam-move {
  0%   { transform: translateY(-2px); }
  100% { transform: translateY(100vh); }
}

/* ── BUTTONS — base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono-font);
  font-size: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--btn-text);
  background: transparent;
  border: 1px solid var(--btn-border);
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  background: var(--btn-hover-bg);
  box-shadow: 0 0 10px var(--glow-color);
}

/* ── CARDS — base ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--card-border-t);
  padding: 20px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.card:hover {
  border-color: var(--accent3);
  box-shadow: 0 0 20px var(--glow-color);
}
.card-label {
  font-family: var(--mono-font);
  font-size: 0.38rem;
  letter-spacing: 2px;
  color: var(--card-text);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card-title {
  font-family: var(--heading-font);
  font-size: 1.1rem;
  color: var(--card-title);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.card-desc {
  font-family: var(--body-font);
  font-size: 0.5rem;
  color: var(--card-desc);
  line-height: 1.6;
  letter-spacing: 0.5px;
}

/* ── REDACTED TEXT ── */
.redacted {
  background: var(--text3);
  color: transparent;
  user-select: none;
  border-radius: 1px;
  transition: background 0.3s;
}
.redacted:hover {
  background: var(--accent3);
}

/* ── LOGO ANIMATIONS per theme ── */
[data-theme="1"] .logo-siharu,
[data-theme="1"] #sh-logo-word {
  animation: logo-glitch-1 8s steps(1) infinite;
}
[data-theme="2"] .logo-siharu,
[data-theme="2"] #sh-logo-word {
  font-style: italic;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: none;
  animation: none;
}
[data-theme="3"] .logo-siharu,
[data-theme="3"] #sh-logo-word {
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 0 20px rgba(200,144,42,0.35);
  animation: none;
}
[data-theme="4"] .logo-siharu,
[data-theme="4"] #sh-logo-word {
  text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent2);
  animation: logo-glitch-4 4s steps(1) infinite;
}

@keyframes logo-glitch-1 {
  0%,92%,100% { text-shadow: none; filter: none; }
  93% { text-shadow: -2px 0 #00cccc, 2px 0 #cc0066; filter: brightness(1.2); }
  95% { text-shadow: 2px 0 #00cccc, -2px 0 #cc0066; }
  97% { text-shadow: none; filter: brightness(2); }
  99% { text-shadow: -1px 0 #ff0000; }
}
@keyframes logo-glitch-4 {
  0%,88%,100% { text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent2); filter: none; }
  89% { text-shadow: -3px 0 #ff00a8, 3px 0 #00f5ff; filter: hue-rotate(20deg); }
  91% { text-shadow: 3px 0 #ff00a8, -3px 0 #00f5ff; }
  93% { text-shadow: none; filter: brightness(3); }
  95% { text-shadow: 0 0 20px var(--accent); }
}

/* ── CLEARANCE TOAST (used by clearance.js) ── */
.clr-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-top: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono-font);
  font-size: 0.42rem;
  padding: 10px 20px;
  z-index: 99998;
  letter-spacing: 2px;
  box-shadow: 0 0 20px var(--glow-color);
  text-align: center;
  max-width: 90vw;
  white-space: nowrap;
  transition: opacity 0.5s;
}

/* ── WNCORE SIGNAL ORIGIN — special treatment ── */
/* Applied to body when player arrived from WNCORE */
body.wncore-origin::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  z-index: 9996;
  animation: signal-sweep 3s ease-in-out 1 forwards;
  opacity: 0;
}
@keyframes signal-sweep {
  0%   { opacity: 0; transform: scaleX(0); }
  40%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; }
}

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════
   ARCHIVE GRID — shared across index + other pages
════════════════════════════════════════════════════ */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.archive-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--card-border-t);
  padding: 20px;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.archive-card:hover {
  border-color: var(--accent3);
  box-shadow: 0 0 20px var(--glow-color);
  transform: translateY(-1px);
}
.archive-card-label {
  font-family: var(--mono-font);
  font-size: 0.38rem;
  letter-spacing: 2px;
  color: var(--card-text);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.archive-card-title {
  font-family: var(--heading-font);
  font-size: 1rem;
  color: var(--card-title);
  margin-bottom: 8px;
  transition: color 0.3s;
}
.archive-card:hover .archive-card-title {
  color: var(--accent);
}
.archive-card-desc {
  font-family: var(--body-font);
  font-size: 0.5rem;
  color: var(--card-desc);
  line-height: 1.6;
  letter-spacing: 0.3px;
}