/* --- NEON CYBERPUNK VIBES --- */

:root {
  --color-bg-dark: #0d0d0d;
  --color-bg-mid: #1a1a1a;
  --color-text-light: #f0f0f0;
  --color-accent-cyan: #00ffe0;
  --color-accent-pink: #ff00c8;
  --color-accent-green: #39ff14;
  --color-accent-yellow: #fffc00;
  --color-glitch-red: red;
  --color-glitch-blue: blue;
  --font-main: 'Orbitron', 'Courier New', monospace;
}

body {
  background-color: var(--color-bg-dark);
  background-image: radial-gradient(circle at center, var(--color-bg-mid) 0%, #000 100%);
  color: var(--color-text-light);
  font-family: var(--font-main);
  padding: 2em;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

/* CRT Scanline Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  z-index: 999;
  mix-blend-mode: overlay;
}

/* Typography Headers */
header h1, header h2 {
  text-shadow: 0 0 5px, 0 0 20px, 0 0 40px;
}

header h1 {
  font-size: 2.8em;
  color: var(--color-accent-cyan);
  text-shadow: 0 0 5px var(--color-accent-cyan), 0 0 20px var(--color-accent-cyan), 0 0 40px var(--color-accent-cyan);
  animation: flicker 2s infinite alternate;
}

header h2 {
  color: var(--color-accent-pink);
  text-shadow: 0 0 5px var(--color-accent-pink), 0 0 10px var(--color-accent-pink);
  animation: glitch-flicker 3s infinite;
}

/* Anchor Styling */
a {
  color: var(--color-accent-green);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
a:hover {
  color: var(--color-accent-yellow);
  text-shadow: 0 0 5px var(--color-accent-yellow), 0 0 10px var(--color-accent-yellow);
  transform: scale(1.05);
}

/* Glitch-style link effect */
.glitch-link {
  position: relative;
  display: inline-block;
}
.glitch-link::before {
  content: attr(data-text);
  position: absolute;
  left: 2px; top: 0;
  z-index: -1;
  opacity: 0.6;
  color: #fff;
  text-shadow: -1px 0 var(--color-glitch-red), 1px 0 var(--color-glitch-blue);
}
.glitch-link:hover {
  transform: scale(1.05) skewX(-1deg);
  filter: brightness(1.3) contrast(1.5);
}

/* Keyframes */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.85; }
  46% { opacity: 0.5; }
  47% { opacity: 0.9; }
  48% { opacity: 0.4; }
  49% { opacity: 1; }
}
@keyframes glitch-flicker {
  0%, 40%, 100% { opacity: 1; }
  20% { opacity: 0.8; transform: translateX(0); }
  21% { transform: translateX(-2px); }
  22% { transform: translateX(2px); }
  23% { transform: translateX(0); }
}
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes fadeInLine {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* TOC List */
ul#toc-list {
  list-style-type: square;
  padding-left: 1.5em;
  border-left: 2px solid var(--color-accent-pink);
  padding-top: 1em;
  animation: flicker 4s infinite alternate;
}
ul#toc-list li {
  margin: 0.5em 0;
  font-size: 1.2em;
  text-shadow: 0 0 3px var(--color-accent-cyan);
}

/* Footer and Navigation */
nav, footer {
  margin-top: 2em;
  font-size: 0.9em;
  color: #888;
  border-top: 1px solid var(--color-accent-green);
  padding-top: 1em;
  text-shadow: 0 0 2px var(--color-accent-green);
}

/* Panel Content Styling */
section {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-accent-pink);
  border-radius: 10px;
  padding: 1.5em;
  box-shadow: 0 0 10px var(--color-accent-pink), 0 0 25px var(--color-accent-cyan);
  margin-top: 2em;
}
.scene-meta {
  font-size: 0.95em;
  color: #ff6ec7;
  text-shadow: 0 0 5px #ff6ec7;
  margin-bottom: 1em;
  font-style: italic;
}

.scene-block {
  background-color: rgba(0, 0, 0, 0.4);
  border-left: 4px solid var(--color-accent-cyan);
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 0 10px var(--color-accent-cyan), 0 0 20px var(--color-accent-pink);
  line-height: 1.8;
}

.dialogue[data-speaker="Megatron"] {
  color: silver;
  font-weight: bold;
}

/* Animation Utility Classes */
.story-line {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.1em solid var(--color-accent-cyan);
  animation: typewriter 2s steps(60, end), fadeInLine 0.5s ease-in-out forwards;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}
.glitching {
  animation: glitch 0.6s linear;
}

/* Highlight Effects */
.highlight-quote {
  color: #fff176;
  font-weight: bold;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.highlight-quote.pop {
  transform: scale(1.15);
  text-shadow: 0 0 10px #fff176, 0 0 20px #fff176;
}

/* Chain Pulse Effect */
.chain-effect {
  transition: all 0.3s ease;
}
.chain-pulse {
  color: var(--color-accent-pink);
  text-shadow: 0 0 5px var(--color-accent-pink), 0 0 15px var(--color-accent-pink), 0 0 25px var(--color-accent-pink);
}