/* ============================================================
   humAIn Degradation — Visual Effects (CSS-only)
   ============================================================
   This file is additive overlay only. Every rule is gated by a
   body class (.decay-1 through .decay-5) added by JS based on
   window.HUMAIN_DECAY_LEVEL. If decay-level.js fails to load,
   none of these rules fire — the site stays clean.

   Reduced-motion users get a stripped-down version of every
   effect — no movement, no flashing, no pulsing. Color shifts
   and static overlays still apply (those don't trigger motion
   sickness or vestibular issues).

   Performance: every effect uses transform/opacity for GPU
   acceleration. No layout thrashing. Pointer-events: none on
   every overlay so nothing intercepts clicks.
   ============================================================ */

/* ───── DEAD PIXEL (all levels) ─────────────────────────────────
   A single cyan pixel, dead center of the viewport, that nothing
   can paint over. Persists across all decay levels — once it
   appears Monday, it never goes away.
   ──────────────────────────────────────────────────────────── */
.decay-1 .humain-deadpixel,
.decay-2 .humain-deadpixel,
.decay-3 .humain-deadpixel,
.decay-4 .humain-deadpixel,
.decay-5 .humain-deadpixel {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  background: #00ffff;
  z-index: 2147483646;
  pointer-events: none;
  box-shadow: 0 0 1px rgba(0, 255, 255, 0.8);
}

/* ───── LEVEL 1 — Monday: the bleed begins ─────────────────────
   - Cyan glow on all links
   - Subtle cursor lag (transition delay on hover targets)
   - Hero image color drift (handled by JS for the loop)
   ──────────────────────────────────────────────────────────── */
.decay-1 a,
.decay-2 a,
.decay-3 a,
.decay-4 a,
.decay-5 a {
  text-shadow: 0 0 1px rgba(0, 255, 255, 0.45);
}

.decay-1 button,
.decay-1 a,
.decay-1 [role="button"],
.decay-2 button,
.decay-2 a,
.decay-2 [role="button"],
.decay-3 button,
.decay-3 a,
.decay-3 [role="button"],
.decay-4 button,
.decay-4 a,
.decay-4 [role="button"],
.decay-5 button,
.decay-5 a,
.decay-5 [role="button"] {
  transition: all 150ms ease;
}

/* ───── LEVEL 2+ — Tuesday: chromatic separation ───────────────
   - Chromatic aberration on images (red right, blue left)
   - Headline text fringe (cyan shadow)
   - Static scanlines (8% opacity, no movement yet at level 2)
   ──────────────────────────────────────────────────────────── */
.decay-2 img,
.decay-3 img,
.decay-4 img,
.decay-5 img {
  filter: drop-shadow(1px 0 0 rgba(255, 0, 60, 0.35))
          drop-shadow(-1px 0 0 rgba(0, 200, 255, 0.35));
}

.decay-2 h1, .decay-2 h2, .decay-2 .gate-title, .decay-2 .sec-title,
.decay-3 h1, .decay-3 h2, .decay-3 .gate-title, .decay-3 .sec-title,
.decay-4 h1, .decay-4 h2, .decay-4 .gate-title, .decay-4 .sec-title,
.decay-5 h1, .decay-5 h2, .decay-5 .gate-title, .decay-5 .sec-title {
  text-shadow: 1px 0 0 rgba(255, 0, 60, 0.4),
              -1px 0 0 rgba(0, 200, 255, 0.5),
               0  0 2px rgba(0, 255, 255, 0.2);
}

.humain-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483645;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  opacity: 0;
  mix-blend-mode: multiply;
}
.decay-2 .humain-scanlines { opacity: 0.45; }
.decay-3 .humain-scanlines { opacity: 0.65; animation: humain-scan-scroll 8s linear infinite; }
.decay-4 .humain-scanlines { opacity: 0.85; animation: humain-scan-scroll 6s linear infinite; }
.decay-5 .humain-scanlines { opacity: 1.0; animation: humain-scan-scroll 4s linear infinite; }

@keyframes humain-scan-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 100vh; }
}

/* ───── LEVEL 3+ — Wednesday: signal degrades ──────────────────
   - VHS tracking band (handled mostly by JS for the sweep)
   - Static base for tracking distortion overlay
   ──────────────────────────────────────────────────────────── */
.humain-tracking-band {
  position: fixed;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  z-index: 2147483644;
  background: linear-gradient(
    to bottom,
    rgba(0, 255, 255, 0) 0%,
    rgba(0, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(0, 255, 255, 0.05) 70%,
    rgba(0, 255, 255, 0) 100%
  );
  top: -100px;
  opacity: 0;
  mix-blend-mode: screen;
}
.decay-3 .humain-tracking-band.sweep,
.decay-4 .humain-tracking-band.sweep,
.decay-5 .humain-tracking-band.sweep {
  opacity: 1;
  animation: humain-tracking-sweep 0.8s linear forwards;
}
@keyframes humain-tracking-sweep {
  from { top: -100px; }
  to   { top: 100vh; }
}

/* Ghost cursor — JS sets the position. CSS only does the visual */
.humain-ghost-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483645;
  display: none;
  transform: translate(-50%, -50%);
  background: rgba(0, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(0, 255, 255, 0.4);
}
.decay-3 .humain-ghost-cursor,
.decay-4 .humain-ghost-cursor,
.decay-5 .humain-ghost-cursor {
  display: block;
}

/* ───── LEVEL 4+ — Thursday: possession ────────────────────────
   - Barrel distortion (subtle)
   - Brightness pulse (4-second cycle)
   - Persistent cyan vignette
   - Game Master face (handled by JS)
   ──────────────────────────────────────────────────────────── */
.decay-4,
.decay-5 {
  animation: humain-brightness-pulse 4s ease-in-out infinite;
}
@keyframes humain-brightness-pulse {
  0%, 100% { filter: brightness(1.00); }
  50%      { filter: brightness(0.98); }
}

.humain-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483643;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 255, 255, 0.10) 95%,
    rgba(0, 255, 255, 0.25) 100%
  );
  opacity: 0;
}
.decay-4 .humain-vignette { opacity: 1; }
.decay-5 .humain-vignette { opacity: 1; background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 255, 255, 0.18) 90%,
    rgba(0, 255, 255, 0.40) 100%
  );
}

/* Game Master face overlay — JS positions and shows. */
.humain-gm {
  position: fixed;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0;
  background-image: radial-gradient(
    ellipse 60px 80px at 50% 50%,
    rgba(20, 0, 30, 0.95) 0%,
    rgba(20, 0, 30, 0.85) 40%,
    rgba(20, 0, 30, 0) 75%
  );
  transition: opacity 80ms linear;
}
.humain-gm::before,
.humain-gm::after {
  content: "";
  position: absolute;
  top: 42%;
  width: 8px;
  height: 8px;
  background: #00ffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ffff, 0 0 16px rgba(0, 255, 255, 0.6);
}
.humain-gm::before { left: 32%; }
.humain-gm::after  { left: 60%; }
.humain-gm.show { opacity: 0.85; }

/* ───── LEVEL 5 — Friday: collapse ─────────────────────────────
   - Heavy chromatic aberration
   - Always-on tracking lines
   - Heavy vignette
   - Page-element drift (handled by JS)
   ──────────────────────────────────────────────────────────── */
.decay-5 img {
  filter: drop-shadow(2px 0 0 rgba(255, 0, 60, 0.55))
          drop-shadow(-2px 0 0 rgba(0, 200, 255, 0.55));
}

.decay-5 h1, .decay-5 h2 {
  text-shadow: 2px 0 0 rgba(255, 0, 60, 0.55),
              -2px 0 0 rgba(0, 200, 255, 0.65),
               0  0 4px rgba(0, 255, 255, 0.3);
}

/* Countdown timer (Friday only) — positioned top-right corner */
.humain-countdown {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 2147483645;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(0, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.6);
  padding: 3px 7px;
  border: 1px solid rgba(0, 255, 255, 0.4);
  letter-spacing: 0.05em;
  display: none;
  pointer-events: none;
}
.decay-5 .humain-countdown { display: block; }

/* ───── HONOR PREFERS-REDUCED-MOTION ───────────────────────────
   For users with reduced-motion preference: kill all animations,
   pulses, sweeps, brightness changes, and the Game Master face.
   Static color shifts and vignettes still apply because those
   don't trigger motion sickness.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .decay-1, .decay-2, .decay-3, .decay-4, .decay-5 {
    animation: none !important;
  }
  .humain-scanlines,
  .humain-tracking-band,
  .humain-gm,
  .humain-ghost-cursor {
    animation: none !important;
    display: none !important;
  }
}

/* ───── KILLSWITCH SUPPORT ─────────────────────────────────────
   When ?safe=1 is in the URL, JS adds .humain-safe to <body>.
   Every effect class is suppressed by this.
   ──────────────────────────────────────────────────────────── */
.humain-safe.decay-1,
.humain-safe.decay-2,
.humain-safe.decay-3,
.humain-safe.decay-4,
.humain-safe.decay-5 {
  animation: none !important;
  filter: none !important;
}
.humain-safe a,
.humain-safe h1,
.humain-safe h2,
.humain-safe img,
.humain-safe .gate-title,
.humain-safe .sec-title {
  text-shadow: none !important;
  filter: none !important;
}
.humain-safe .humain-deadpixel,
.humain-safe .humain-scanlines,
.humain-safe .humain-tracking-band,
.humain-safe .humain-ghost-cursor,
.humain-safe .humain-vignette,
.humain-safe .humain-gm,
.humain-safe .humain-countdown {
  display: none !important;
}