/**
 * SciprogFi Components — Arwes-Inspired
 * Reusable UI patterns for later-era pages.
 * Neon frames, glow text, scan lines, data badges.
 * All CSS-only — no JS required.
 */

/* ===================================================================
   NEON FRAME — SVG-bordered container
   Inspired by Arwes frame components. Static SVG corners + animated dash.
   Variants: default, alert, intercept, system
   =================================================================== */

.sf-frame {
  position: relative;
  padding: var(--sf-space-lg);
  background: var(--sf-frame-bg);
}

.sf-frame__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Corner clip lines — the Arwes signature */
.sf-frame__border line,
.sf-frame__border polyline {
  stroke: var(--sf-frame-color);
  stroke-width: var(--sf-frame-width);
  fill: none;
}

/* Animated dash on border lines */
.sf-frame__border .sf-frame__dash {
  stroke-dasharray: 8 4;
  animation: sf-frame-dash 20s linear infinite;
}

@keyframes sf-frame-dash {
  to { stroke-dashoffset: -120; }
}

/* Corner accents — small L-shaped marks at each corner */
.sf-frame__corner {
  stroke: var(--sf-frame-color);
  stroke-width: calc(var(--sf-frame-width) + 0.5px);
  fill: none;
  filter: drop-shadow(var(--sf-neon-glow));
}

.sf-frame__content {
  position: relative;
  z-index: 1;
}

/* --- Frame variants --- */

/* Default: neon green (OHC/Open Net) */
.sf-frame--default {
  --sf-frame-color: var(--sf-neon);
  --sf-frame-bg: rgba(0, 255, 100, 0.02);
}

/* Alert: red warning */
.sf-frame--alert {
  --sf-frame-color: #ff4444;
  --sf-frame-bg: rgba(255, 0, 0, 0.03);
}
.sf-frame--alert .sf-frame__corner {
  filter: drop-shadow(0 0 4px #ff4444);
}

/* Intercept: terminal green, darker bg */
.sf-frame--intercept {
  --sf-frame-color: #33ff33;
  --sf-frame-bg: rgba(0, 20, 0, 0.9);
  color: #33ff33;
  font-family: var(--sf-font-mono);
  font-size: 0.9rem;
}

/* System: neon blue (Clean Net / surveillance) */
.sf-frame--system {
  --sf-frame-color: var(--sf-neon-blue);
  --sf-frame-bg: rgba(74, 144, 217, 0.03);
}
.sf-frame--system .sf-frame__corner {
  filter: drop-shadow(0 0 4px var(--sf-neon-blue));
}


/* ===================================================================
   GLOW TEXT — neon text utility classes
   =================================================================== */

.sf-glow {
  text-shadow: var(--sf-neon-glow);
  color: var(--sf-neon);
}

.sf-glow--blue {
  text-shadow: 0 0 4px var(--sf-neon-blue);
  color: var(--sf-neon-blue);
}

.sf-glow-pulse {
  animation: sf-glow-pulse 2s ease-in-out infinite;
}

@keyframes sf-glow-pulse {
  0%, 100% {
    text-shadow: var(--sf-neon-glow);
    opacity: 1;
  }
  50% {
    text-shadow: var(--sf-neon-glow-strong);
    opacity: 0.9;
  }
}

@keyframes sf-glow-pulse-blue {
  0%, 100% {
    text-shadow: 0 0 4px var(--sf-neon-blue);
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 8px var(--sf-neon-blue), 0 0 20px color-mix(in srgb, var(--sf-neon-blue) 40%, transparent);
    opacity: 0.9;
  }
}


/* ===================================================================
   SCAN LINES — CRT overlay effect
   Activated per-era via --sf-scanline-opacity token.
   =================================================================== */

.sf-scanlines {
  position: relative;
}

.sf-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0px,
    transparent 1px,
    var(--sf-scanline-color) 1px,
    var(--sf-scanline-color) var(--sf-scanline-size)
  );
  pointer-events: none;
  opacity: var(--sf-scanline-opacity);
  z-index: 10;
}


/* ===================================================================
   DATA BADGE — enhanced node-type-badge for later eras
   Applied via .sf-data-badge class alongside .node-type-badge
   =================================================================== */

.sf-data-badge {
  font-family: var(--sf-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  border: 1px solid var(--sf-neon);
  color: var(--sf-neon);
  text-shadow: 0 0 2px var(--sf-neon);
  padding: 0.2em 0.7em;
  text-transform: uppercase;
}

.sf-data-badge--blue {
  border-color: var(--sf-neon-blue);
  color: var(--sf-neon-blue);
  text-shadow: 0 0 2px var(--sf-neon-blue);
}


/* ===================================================================
   CIRCUIT TRACE BACKGROUND
   Subtle repeating SVG pattern behind content.
   =================================================================== */

.sf-circuit-bg {
  background-image: var(--sf-circuit);
  background-repeat: repeat;
}


/* ===================================================================
   FRAME ENTRANCE ANIMATION
   Toggled by JS IntersectionObserver adding .sf-frame--visible
   Falls back to visible if JS is disabled (no-JS = always visible).
   =================================================================== */

.sf-frame--animate {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sf-duration-slow) var(--sf-ease),
              transform var(--sf-duration-slow) var(--sf-ease);
}

.sf-frame--animate.sf-frame--visible {
  opacity: 1;
  transform: translateY(0);
}

/* No-JS fallback: show frames immediately */
@media (scripting: none) {
  .sf-frame--animate {
    opacity: 1;
    transform: none;
  }
}


/* ===================================================================
   NEON DIVIDER — horizontal rule with glow
   =================================================================== */

.sf-divider {
  border: none;
  height: 1px;
  background: var(--sf-neon);
  box-shadow: var(--sf-neon-glow);
  margin: var(--sf-space-xl) 0;
  opacity: 0.6;
}

.sf-divider--blue {
  background: var(--sf-neon-blue);
  box-shadow: 0 0 4px var(--sf-neon-blue);
}


/* ===================================================================
   VISITED NODE LINKS — subtle indicator from reading tracker
   =================================================================== */

a.visited {
  opacity: 0.65;
}

a.visited::after {
  content: ' \2713';
  font-size: 0.7em;
  opacity: 0.5;
}


/* ===================================================================
   FOOTER MAP LINK — HUD-style entry point to story map
   =================================================================== */

.footer-map-link {
  display: inline-block;
  font-family: var(--sf-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--sf-neon-green);
  text-decoration: none;
  padding: var(--sf-space-sm) 0;
  margin-bottom: var(--sf-space-sm);
  border-top: 1px solid var(--sf-border);
  padding-top: var(--sf-space-md);
}

.footer-map-link:hover {
  text-shadow: 0 0 4px var(--sf-neon-green);
}

.footer-skim-link {
  display: inline-block;
  font-family: var(--sf-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--sf-neon-green);
  text-decoration: none;
  padding: var(--sf-space-sm) 0;
  margin-left: var(--sf-space-lg);
}

.footer-skim-link:hover {
  text-shadow: 0 0 4px var(--sf-neon-green);
}

.map-glyph {
  font-size: 1.1em;
}

.map-progress {
  font-size: 0.7rem;
  opacity: 0.5;
  margin-left: 0.5em;
}