/* Pink -> burn keeps its original fade. Only the eyes use the slower, saved
   progression in JS, without restarting when another page opens. */
body:not(.legacy-glitch-active)[data-corruption] {
  transition: background-color 12s ease;
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) {
  isolation: isolate;
  overflow-x: clip;
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) > .star-field {
  position: relative;
  z-index: 1;
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"])::before,
body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"])::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Both assets have a 454:453 ratio. Sharing the same cover box makes the
   1362x1359 GIF match the 1816x1812 burn exactly at every viewport size. */
body:not(.legacy-glitch-active)[data-corruption]::before,
.corruption-eyes {
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

body:not(.legacy-glitch-active)[data-corruption]::before {
  opacity: calc(var(--burn-opacity, 0) * (1 - var(--eyes-opacity, 0)));
  transition: opacity 12s ease;
}

body:not(.legacy-glitch-active)[data-corruption].corruption-eyes-visible::before {
  transition: none;
}

.corruption-eyes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-color: #0f090e;
  opacity: var(--eyes-opacity, 0);
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"])::before {
  background-image: url("img/burn_overlay.png");
}

body:not(.legacy-glitch-active)[data-corruption]::after {
  z-index: 9000;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, #08030726 3px 4px),
    radial-gradient(ellipse at 50% 42%, transparent 35%, #170006b3 100%);
  opacity: var(--veil-opacity, 0);
  transition: opacity 10s ease;
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) :is(.post, .image-gallery, .banner, .menu a, .footer) {
  transition: background-color 12s ease, color 12s ease, border-color 12s ease, box-shadow 8s ease;
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) .corruption-image {
  translate: var(--image-x, 0px) var(--image-y, 0px);
  rotate: var(--image-angle, 0deg);
  scale: var(--image-scale-x, 1) var(--image-scale-y, 1);
  filter: var(--image-filter, none);
  transform-origin: 50% 42%;
  transition: none;
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) {
  background-color: var(--page-color);
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) :is(.post, .image-gallery) {
  background-color: var(--panel-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) .post h2 {
  color: var(--text-color);
  transition: color 12s ease;
}

/* Restoring saved colors must not replay their initial transition. */
body.corruption-restoring,
body.corruption-restoring::before,
body.corruption-restoring::after,
body.corruption-restoring :is(.post, .image-gallery, .banner, .menu a, .footer, .post h2) {
  transition: none !important;
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) .banner {
  background: var(--page-color);
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) .marquee h1 {
  color: var(--title-color);
}

body:not(.legacy-glitch-active)[data-corruption]:not([data-corruption="0"]) .footer {
  background-color: var(--footer-color);
  border-color: var(--border-color);
}

body:not(.legacy-glitch-active):is([data-corruption="3"], [data-corruption="4"]) .star-frame:hover img:not(.glitch-target) {
  transform: scale(1.3);
}

body:not(.legacy-glitch-active):is([data-corruption="3"], [data-corruption="4"]) :is(.post a, .footer a) {
  color: var(--text-color);
}

body:not(.legacy-glitch-active):is([data-corruption="3"], [data-corruption="4"]) .star-frame .corruption-image {
  background-color: var(--page-color);
  border-color: var(--border-color);
  box-shadow: 4px 0 0 #63002040, -3px 2px 0 #7c999033;
}

body:not(.legacy-glitch-active)[data-corruption="4"] .banner {
  animation: none;
  box-shadow: 0 7px 45px #0b0309;
}

body:not(.legacy-glitch-active)[data-corruption="4"] .marquee h1 {
  text-shadow: 2px 0 #a12b5170, -1px 0 #608f8750;
}

body:not(.legacy-glitch-active)[data-corruption="4"] .stars {
  opacity: 0.08;
  animation-duration: 8s;
  animation-direction: reverse;
}

body:not(.legacy-glitch-active)[data-corruption="4"] .post {
  border-style: solid dashed dashed solid;
}
body:not(.legacy-glitch-active)[data-corruption="4"] .post:nth-child(odd) {
  transform: translateX(-4px) skewX(-0.28deg);
}

body:not(.legacy-glitch-active)[data-corruption="4"] .post:nth-child(even) {
  transform: translateX(5px) skewX(0.22deg);
}

body:not(.legacy-glitch-active).corruption-pulse .post h2 {
  text-shadow: -3px 0 #9f2f59a6, 3px 1px #59948780;
}

body:not(.legacy-glitch-active).corruption-pulse .stars,
body:not(.legacy-glitch-active).corruption-pulse .marquee h1 {
  animation-play-state: paused;
}

.corruption-image.is-tearing {
  animation: lacey-image-tear 850ms steps(1, end) both;
}

@keyframes lacey-image-tear {
  0%, 100% { clip-path: inset(0); transform: translateX(0); }
  18% { clip-path: polygon(0 0, 100% 0, 100% 29%, 7% 29%, 7% 35%, 100% 35%, 100% 100%, 0 100%); transform: translateX(-6px) skewX(2deg); }
  48% { clip-path: inset(2% 0 8% 0); transform: translateX(9px) skewX(-3deg); }
  75% { clip-path: inset(0); transform: translateX(-2px); }
}

.corruption-image.is-possessed {
  animation: lacey-possession 1.8s steps(1, end) both;
}

@keyframes lacey-possession {
  0%, 100% { clip-path: inset(0); }
  12% { filter: grayscale(1) contrast(3.5) brightness(0.3); transform: skewY(4deg); }
  35% { clip-path: polygon(0 0, 100% 0, 100% 32%, 12% 32%, 12% 47%, 100% 47%, 100% 100%, 0 100%); transform: translate(-11px, 4px) skewY(-7deg); }
  58% { filter: grayscale(1) invert(0.86) contrast(2.2) brightness(0.65); transform: scaleY(1.18); }
  78% { clip-path: inset(0); filter: grayscale(1) contrast(2.8) brightness(0.35); transform: translateX(3px); }
}

.corruption-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 8000;
  pointer-events: none;
  contain: strict;
}

body:not(.legacy-glitch-active)[data-corruption="0"] .corruption-layer {
  display: none;
}

.corruption-echo,
.corruption-apparition,
.corruption-rift {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform, opacity;
}

.corruption-echo {
  background-size: 100% 100%;
  opacity: 0;
  filter: grayscale(0.7) sepia(0.3) contrast(1.6);
  animation: lacey-echo 1.2s steps(1, end) both;
}

@keyframes lacey-echo {
  12%, 60% { opacity: var(--echo-opacity); transform: translateX(var(--echo-x)); }
  85% { opacity: 0.1; transform: translateX(calc(var(--echo-x) * -0.5)); }
  100% { opacity: 0; transform: translateX(0); }
}

.corruption-echo.is-lingering {
  filter: grayscale(1) contrast(4) brightness(0.2) drop-shadow(5px 0 1px #4c001c);
  animation: lacey-remnant 2.8s steps(1, end) both;
}

@keyframes lacey-remnant {
  0% { opacity: 0.58; transform: translate(4px, 0) scaleY(1.1); }
  72% { opacity: 0.45; transform: translate(-2px, 8px) scaleY(1.18); }
  100% { opacity: 0; transform: translate(-2px, 8px) scaleY(1.18); }
}

.corruption-rift {
  height: 68px;
  background: #060205 url("img/burn_overlay.png") center 38% / 650px auto;
  box-shadow: 0 -3px 0 #52092280, 0 7px 14px #000b;
  clip-path: polygon(0 36%, 18% 25%, 25% 36%, 53% 13%, 72% 26%, 100% 0, 96% 69%, 66% 86%, 45% 65%, 17% 100%, 0 72%);
  animation: lacey-rift 1.8s steps(1, end) both;
}

@keyframes lacey-rift {
  0%, 100% { opacity: 0; transform: scaleY(0.15); }
  25%, 70% { opacity: 0.88; transform: scaleY(1); }
}

.corruption-apparition {
  width: clamp(100px, 17vw, 250px);
  height: clamp(220px, 46vh, 440px);
  background-size: 100% 100%;
  image-rendering: pixelated;
  filter: grayscale(1) sepia(0.3) contrast(2.8) brightness(0.65);
  opacity: 0;
  transform-origin: center;
  animation: lacey-apparition 4.2s steps(1, end) both;
}

@keyframes lacey-apparition {
  0%, 100% { opacity: 0; transform: translateY(15px) rotate(var(--apparition-angle)) scaleX(-1); }
  30%, 70% { opacity: var(--apparition-opacity); transform: translateY(-9px) rotate(var(--apparition-angle)) scaleX(-1); }
}

body:not(.legacy-glitch-active)[data-corruption] .star {
  pointer-events: none;
  position: fixed;
}

/* Stationary pointer afterimages leave a short trail without changing the
   real cursor or covering links with an interactive element. */
.corruption-cursor-trail {
  --trail-opacity: 0.32;
  position: fixed;
  width: 18px;
  height: 24px;
  pointer-events: none;
  z-index: 10000;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M1 1v17l4.5-4 4 8 3-1.5-4-8H16Z' fill='%23f5f5f5' stroke='%23111111' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lacey-cursor-trail 600ms steps(4, end) forwards;
}

body[data-corruption="4"] .corruption-cursor-trail {
  --trail-opacity: 0.5;
}

@keyframes lacey-cursor-trail {
  from { opacity: var(--trail-opacity); }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.legacy-glitch-active)[data-corruption] *,
  body:not(.legacy-glitch-active)[data-corruption]::before,
  body:not(.legacy-glitch-active)[data-corruption]::after {
    animation: none !important;
    transition: none !important;
  }

  body:not(.legacy-glitch-active)[data-corruption] .corruption-image,
  body:not(.legacy-glitch-active)[data-corruption] .post {
    translate: none;
    rotate: none;
    scale: none;
    transform: none;
  }

  .corruption-layer,
  .corruption-cursor-trail,
  body:not(.legacy-glitch-active)[data-corruption] .star {
    display: none;
  }
}

body.legacy-glitch-active .corruption-layer,
body.legacy-glitch-active .corruption-cursor-trail,
body.legacy-glitch-active .corruption-eyes { display: none; }