/* ==========================================================================
   Meridian — Visual Corruption System
   Intensity scale 0-10, driven by body[data-corruption="N"]
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties — Corruption Palette
   -------------------------------------------------------------------------- */
:root {
  --corrupt-red:       #E85454;
  --corrupt-cyan:      #54C8E8;
  --corrupt-magenta:   #E854C8;
  --corrupt-glitch-1:  rgba(232, 84, 84, 0.6);
  --corrupt-glitch-2:  rgba(84, 200, 232, 0.6);
  --corrupt-scanline:  rgba(0, 0, 0, 0.06);
  --corrupt-vignette:  rgba(11, 22, 40, 0.0);
  --corrupt-hue:       0deg;
  --corrupt-saturate:  100%;
  --corrupt-jitter-x:  0px;
  --corrupt-jitter-y:  0px;
}

/* ==========================================================================
   Level 0 — Clean (default)
   ========================================================================== */
body[data-corruption="0"] .corruptible,
body:not([data-corruption]) .corruptible {
  filter: none;
  transform: none;
}

/* ==========================================================================
   Level 1 — Barely perceptible
   ========================================================================== */
body[data-corruption="1"] {
  --corrupt-hue: 2deg;
}

body[data-corruption="1"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue));
  transition: filter 2s ease;
}

body[data-corruption="1"] .corruption-text {
  text-shadow: 0.3px 0 0 rgba(232, 84, 84, 0.08),
               -0.3px 0 0 rgba(84, 200, 232, 0.08);
}

/* ==========================================================================
   Level 2 — Subtle
   ========================================================================== */
body[data-corruption="2"] {
  --corrupt-hue: 5deg;
}

body[data-corruption="2"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue));
  animation: flicker 8s ease-in-out infinite;
  transition: filter 2s ease;
}

body[data-corruption="2"] .corruption-text {
  text-shadow: 0.5px 0 0 rgba(232, 84, 84, 0.12),
               -0.5px 0 0 rgba(84, 200, 232, 0.12);
}

/* ==========================================================================
   Level 3 — Noticeable hue shift
   ========================================================================== */
body[data-corruption="3"] {
  --corrupt-hue: 8deg;
}

body[data-corruption="3"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue));
  animation: flicker 5s ease-in-out infinite;
}

body[data-corruption="3"] .corruption-text {
  text-shadow: 0.8px 0 0 rgba(232, 84, 84, 0.2),
               -0.8px 0 0 rgba(84, 200, 232, 0.2);
}

body[data-corruption="3"] .corruptible {
  border-color: rgba(180, 80, 80, 0.15);
}

/* ==========================================================================
   Level 4 — Noticeable + red creep
   ========================================================================== */
body[data-corruption="4"] {
  --corrupt-hue: 12deg;
}

body[data-corruption="4"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue)) saturate(110%);
  animation: flicker 4s ease-in-out infinite;
  border-color: rgba(180, 80, 80, 0.25) !important;
}

body[data-corruption="4"] .corruption-text {
  text-shadow: 1px 0 0 rgba(232, 84, 84, 0.3),
               -1px 0 0 rgba(84, 200, 232, 0.3);
  animation: chromatic-shift 6s ease-in-out infinite;
}

/* ==========================================================================
   Level 5 — Unsettling: scanlines appear
   ========================================================================== */
body[data-corruption="5"] {
  --corrupt-hue: 15deg;
  --corrupt-scanline: rgba(0, 0, 0, 0.04);
}

body[data-corruption="5"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue)) saturate(105%);
  animation: flicker 3s ease-in-out infinite;
  border-color: rgba(180, 80, 80, 0.3) !important;
}

body[data-corruption="5"] .corruption-text {
  text-shadow: 1.2px 0 0 rgba(232, 84, 84, 0.35),
               -1.2px 0 0 rgba(84, 200, 232, 0.35);
  animation: chromatic-shift 5s ease-in-out infinite;
}

body[data-corruption="5"] .corruption-scanlines::before {
  opacity: 0.4;
}

body[data-corruption="5"] .corruption-overlay {
  opacity: 1;
  --corrupt-scanline: rgba(0, 0, 0, 0.04);
}

body[data-corruption="5"] .corruptible {
  animation: flicker 3s ease-in-out infinite;
}

/* ==========================================================================
   Level 6 — Unsettling: jitter + desaturation
   ========================================================================== */
body[data-corruption="6"] {
  --corrupt-hue: 18deg;
  --corrupt-scanline: rgba(0, 0, 0, 0.06);
}

body[data-corruption="6"] > .app-layout {
  filter: saturate(85%);
}

body[data-corruption="6"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue)) saturate(90%);
  animation: flicker 2.5s ease-in-out infinite;
  border-color: rgba(180, 80, 80, 0.35) !important;
}

body[data-corruption="6"] .corruption-text {
  text-shadow: 1.5px 0 0 rgba(232, 84, 84, 0.4),
               -1.5px 0 0 rgba(84, 200, 232, 0.4);
  animation: chromatic-shift 4s ease-in-out infinite,
             shake 12s ease-in-out infinite;
}

body[data-corruption="6"] .corruption-scanlines::before {
  opacity: 0.6;
  animation: scanline-scroll 8s linear infinite;
}

body[data-corruption="6"] .corruption-overlay {
  opacity: 1;
  --corrupt-scanline: rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Level 7 — Alarming: chromatic aberration, vignette
   ========================================================================== */
body[data-corruption="7"] {
  --corrupt-hue: 22deg;
  --corrupt-scanline: rgba(0, 0, 0, 0.08);
  --corrupt-vignette: rgba(11, 22, 40, 0.35);
}

body[data-corruption="7"] > .app-layout {
  filter: saturate(75%);
}

body[data-corruption="7"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue)) saturate(80%);
  animation: flicker 2s ease-in-out infinite;
  border-color: rgba(180, 80, 80, 0.45) !important;
  transform: skewX(-0.3deg);
}

body[data-corruption="7"] .corruption-text {
  text-shadow: 2px 0 0 rgba(232, 84, 84, 0.5),
               -2px 0 0 rgba(84, 200, 232, 0.5),
               0 1px 0 rgba(232, 84, 200, 0.2);
  animation: chromatic-shift 3s ease-in-out infinite,
             shake 8s ease-in-out infinite;
}

body[data-corruption="7"] .corruption-scanlines::before {
  opacity: 0.8;
  animation: scanline-scroll 4s linear infinite;
}

body[data-corruption="7"] .corruption-vignette::after {
  opacity: 0.7;
}

body[data-corruption="7"] .corruption-overlay {
  opacity: 1;
  --corrupt-scanline: rgba(0, 0, 0, 0.08);
  --corrupt-vignette: rgba(11, 22, 40, 0.35);
}

body[data-corruption="7"] .corruptible:nth-child(odd) {
  animation: glitch-clip 6s ease-in-out infinite;
}

/* ==========================================================================
   Level 8 — Alarming: heavy distortion, skew, glitch-clip
   ========================================================================== */
body[data-corruption="8"] {
  --corrupt-hue: 28deg;
  --corrupt-scanline: rgba(0, 0, 0, 0.10);
  --corrupt-vignette: rgba(11, 22, 40, 0.50);
}

body[data-corruption="8"] > .app-layout {
  filter: saturate(65%);
}

body[data-corruption="8"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue)) saturate(70%) contrast(110%);
  animation: flicker 1.5s ease-in-out infinite;
  border-color: rgba(200, 60, 60, 0.5) !important;
  transform: skewX(-0.5deg) skewY(0.2deg);
}

body[data-corruption="8"] .corruption-text {
  text-shadow: 3px 0 0 rgba(232, 84, 84, 0.6),
               -3px 0 0 rgba(84, 200, 232, 0.6),
               0 2px 0 rgba(232, 84, 200, 0.3);
  animation: chromatic-shift 2s ease-in-out infinite,
             shake 4s ease-in-out infinite;
}

body[data-corruption="8"] .corruption-scanlines::before {
  opacity: 1;
  animation: scanline-scroll 2s linear infinite;
}

body[data-corruption="8"] .corruption-vignette::after {
  opacity: 1;
}

body[data-corruption="8"] .corruption-overlay {
  opacity: 1;
  --corrupt-scanline: rgba(0, 0, 0, 0.10);
  --corrupt-vignette: rgba(11, 22, 40, 0.50);
}

body[data-corruption="8"] .corruptible:nth-child(odd) {
  animation: glitch-clip 3s ease-in-out infinite;
}

body[data-corruption="8"] .corruptible:nth-child(even) {
  animation: flicker 1s ease-in-out infinite;
  transform: skewX(0.4deg);
}

/* ==========================================================================
   Level 9 — Maximum: full glitch, tears, flashes
   ========================================================================== */
body[data-corruption="9"] {
  --corrupt-hue: 35deg;
  --corrupt-scanline: rgba(0, 0, 0, 0.14);
  --corrupt-vignette: rgba(11, 22, 40, 0.65);
}

body[data-corruption="9"] > .app-layout {
  filter: saturate(50%) contrast(115%);
}
body[data-corruption="9"] > .app-layout {
  animation: shake 0.8s ease-in-out infinite;
}

body[data-corruption="9"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue)) saturate(55%) contrast(120%);
  animation: flicker 0.8s ease-in-out infinite,
             glitch-clip 2s ease-in-out infinite;
  border-color: rgba(220, 40, 40, 0.6) !important;
  transform: skewX(-1deg) skewY(0.5deg);
}

body[data-corruption="9"] .corruption-text {
  text-shadow: 4px 0 0 rgba(232, 84, 84, 0.7),
               -4px 0 0 rgba(84, 200, 232, 0.7),
               0 2px 0 rgba(232, 84, 200, 0.4),
               2px 2px 0 rgba(84, 232, 100, 0.2);
  animation: chromatic-shift 1s ease-in-out infinite,
             shake 0.5s ease-in-out infinite,
             text-scramble 3s steps(4) infinite;
}

body[data-corruption="9"] .corruption-scanlines::before {
  opacity: 1;
  animation: scanline-scroll 0.8s linear infinite;
}

body[data-corruption="9"] .corruption-vignette::after {
  opacity: 1;
}

body[data-corruption="9"] .corruption-tear {
  animation: tear 1.5s steps(3) infinite;
}

body[data-corruption="9"] .corruption-flash {
  animation: corruption-invert-flash 4s steps(1) infinite;
}

body[data-corruption="9"] .corruption-overlay {
  opacity: 1;
  --corrupt-scanline: rgba(0, 0, 0, 0.14);
  --corrupt-vignette: rgba(11, 22, 40, 0.65);
}

/* ==========================================================================
   Level 10 — Absolute Maximum: screen shake, inversion, scramble
   ========================================================================== */
body[data-corruption="10"] {
  --corrupt-hue: 45deg;
  --corrupt-scanline: rgba(0, 0, 0, 0.18);
  --corrupt-vignette: rgba(11, 22, 40, 0.80);
}

body[data-corruption="10"] > .app-layout {
  filter: saturate(35%) contrast(130%);
}
body[data-corruption="10"] > .app-layout {
  animation: shake 0.3s ease-in-out infinite;
}

body[data-corruption="10"] .corruptible {
  filter: hue-rotate(var(--corrupt-hue)) saturate(40%) contrast(140%);
  animation: flicker 0.15s steps(3) infinite,
             glitch-clip 0.8s steps(4) infinite;
  border-color: rgba(240, 20, 20, 0.7) !important;
  transform: skewX(-1.5deg) skewY(0.8deg);
}

body[data-corruption="10"] .corruption-text {
  text-shadow: 5px 0 0 rgba(232, 84, 84, 0.85),
               -5px 0 0 rgba(84, 200, 232, 0.85),
               0 3px 0 rgba(232, 84, 200, 0.5),
               3px -2px 0 rgba(84, 232, 100, 0.4);
  animation: chromatic-shift 0.5s ease-in-out infinite,
             shake 0.2s ease-in-out infinite,
             text-scramble 0.8s steps(6) infinite;
}

body[data-corruption="10"] .corruption-scanlines::before {
  opacity: 1;
  animation: scanline-scroll 0.3s linear infinite;
}

body[data-corruption="10"] .corruption-vignette::after {
  opacity: 1;
}

body[data-corruption="10"] .corruption-tear {
  animation: tear 0.6s steps(5) infinite;
}

body[data-corruption="10"] .corruption-flash {
  animation: corruption-invert-flash 2s steps(1) infinite;
}

body[data-corruption="10"] .corruption-overlay {
  opacity: 1;
  --corrupt-scanline: rgba(0, 0, 0, 0.18);
  --corrupt-vignette: rgba(11, 22, 40, 0.80);
  animation: static-noise 0.1s steps(8) infinite;
}

/* ==========================================================================
   Class Definitions — Structural
   ========================================================================== */

/* --- .corruptible — Base marker for elements that respond to corruption --- */
.corruptible {
  transition: filter 1s ease,
              transform 0.8s ease,
              border-color 1s ease,
              opacity 0.3s ease;
  will-change: filter, transform;
}

/* --- .corruption-scanlines — Pseudo-element scanline overlay --- */
.corruption-scanlines {
  position: relative;
}

.corruption-scanlines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--corrupt-scanline) 2px,
    var(--corrupt-scanline) 4px
  );
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 1s ease;
}

/* --- .corruption-vignette — Darkening edges overlay --- */
.corruption-vignette {
  position: relative;
}

.corruption-vignette::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    var(--corrupt-vignette) 100%
  );
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 2s ease;
}

/* --- .corruption-tear — Horizontal glitch tear --- */
.corruption-tear {
  position: relative;
  overflow: hidden;
}

.corruption-tear::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5%;
  width: 110%;
  height: 100%;
  background: inherit;
  clip-path: inset(0 0 100% 0);
  z-index: 5;
  pointer-events: none;
}

/* --- .corruption-text — Text with chromatic aberration ready --- */
.corruption-text {
  position: relative;
  transition: text-shadow 1s ease;
}

/* --- .corruption-flash — Brief inverted color flash --- */
.corruption-flash {
  transition: filter 0.05s steps(1);
}

/* ==========================================================================
   .corruption-overlay — Fixed fullscreen overlay
   Shows scanlines and vignette at higher corruption levels
   ========================================================================== */
.corruption-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 2s ease;
}

/* Scanline layer */
.corruption-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--corrupt-scanline) 2px,
    var(--corrupt-scanline) 4px
  );
  z-index: 1;
}

/* Vignette layer */
.corruption-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    var(--corrupt-vignette) 100%
  );
  z-index: 2;
}

/* ==========================================================================
   Corruption-Specific Keyframes
   (Main keyframes live in animations.css — these are corruption-only)
   ========================================================================== */

/* Inverted color flash for .corruption-flash */
@keyframes corruption-invert-flash {
  0%, 92%, 100% {
    filter: none;
  }
  93% {
    filter: invert(100%) hue-rotate(180deg);
  }
  96% {
    filter: none;
  }
  97% {
    filter: invert(100%) hue-rotate(90deg);
  }
  98% {
    filter: none;
  }
}