/* ════════════════════════════════════════════════════════════════════
   cumberland-con-test — paranormal/sci-fi animation layer
   Adds atmospheric effects without changing the core green/Bebas theme.
   X-Files / VHS / paranormal investigator vibe — NOT comic-pop.
   ════════════════════════════════════════════════════════════════════ */

/* ── Subtle CRT scanlines fixed across viewport ──────────────────── */
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 800;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* ── Vignette tint that slowly pulses (low-amplitude paranoia) ─── */
@keyframes _evp-pulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.30; }
}
.evp-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 799;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 50%,
    rgba(15, 25, 10, 0.5) 100%
  );
  animation: _evp-pulse 6s ease-in-out infinite;
}

/* ── Glitch effect on the venue h1 — randomised microflickers ──── */
@keyframes _glitch-flicker {
  0%, 86%, 88%, 100% { transform: translate(0, 0); filter: none; }
  87%   { transform: translate(2px, -1px); filter: hue-rotate(20deg); }
  88.5% { transform: translate(-2px, 1px); filter: hue-rotate(-20deg) saturate(1.4); }
}
.hero h1.venue {
  animation: _glitch-flicker 7s steps(1, end) infinite;
  position: relative;
}
.hero h1.venue::before,
.hero h1.venue::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms linear;
}
.hero h1.venue:hover::before {
  opacity: 0.7;
  color: #ff3a3a;
  transform: translate(-2px, 1px);
  clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);
}
.hero h1.venue:hover::after {
  opacity: 0.7;
  color: #00ddff;
  transform: translate(2px, -1px);
  clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
}

/* ── Scroll-driven progress at top — purple, narrow ──────────────── */
@keyframes _grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, #48265d, #d73f6a, #3f8d2a);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1000;
  pointer-events: none;
  animation: _grow-x linear both;
  animation-timeline: scroll(root);
}
@supports not (animation-timeline: scroll()) {
  .scroll-progress { transform: scaleX(var(--scroll-progress, 0)); transition: transform 80ms linear; }
}

/* ── Sound toggle — paranormal-investigator pill ─────────────────── */
.sound-toggle {
  position: fixed; bottom: 1rem; right: 1rem;
  z-index: 999;
  background: #0d0d0d; color: #b0e0a0;
  border: 1px solid #4C7D40; border-radius: 4px;
  padding: 0.5rem 0.9rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .14em; font-size: .8rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: background 200ms, color 200ms;
}
.sound-toggle:hover { background: #1a1a1a; color: #e0ffd0; }
.sound-toggle[data-muted="false"] {
  background: #3f8d2a;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 14px rgba(63,141,42,.6);
}

@media (prefers-reduced-motion: reduce) {
  .scanlines, .evp-vignette { display: none !important; }
  .scroll-progress, .hero h1.venue { animation: none !important; }
}