:root {
  --particle-scene-accent: 241, 213, 143;
  --particle-scene-cold: 111, 234, 255;
}

body[data-particle-scene="02"] { --particle-scene-accent: 111, 234, 255; --particle-scene-cold: 218, 84, 255; }
body[data-particle-scene="03"] { --particle-scene-accent: 226, 73, 45; --particle-scene-cold: 241, 213, 143; }
body[data-particle-scene="04"] { --particle-scene-accent: 143, 109, 255; --particle-scene-cold: 236, 230, 218; }
body[data-particle-scene="05"] { --particle-scene-accent: 184, 203, 187; --particle-scene-cold: 111, 234, 255; }
body[data-particle-scene="06"] { --particle-scene-accent: 255, 154, 38; --particle-scene-cold: 241, 213, 143; }

.editorial-canvas {
  opacity: 0.9;
  mix-blend-mode: screen;
  filter:
    contrast(1.14)
    saturate(0.92)
    drop-shadow(0 0 16px rgba(var(--particle-scene-accent), 0.18));
  transform: scale(1);
  transform-origin: 70% 48%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.14) 0 24%, rgba(0,0,0,0.38) 42%, #000 62% 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.14) 0 24%, rgba(0,0,0,0.38) 42%, #000 62% 100%);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.particle-transitioning .editorial-canvas {
  opacity: 0.16;
  filter:
    blur(5px)
    contrast(1.6)
    saturate(1.35)
    drop-shadow(0 0 28px rgba(var(--particle-scene-cold), 0.35));
  transform: scale(1.028);
}

body.particle-chapter-pulse .editorial-canvas {
  animation: particle-chapter-pulse 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes particle-chapter-pulse {
  0% { opacity: 0.34; transform: scale(0.986); }
  42% { opacity: 0.94; transform: scale(1.018); }
  100% { opacity: 0.82; transform: scale(1); }
}

.editorial-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(var(--particle-scene-accent), 0.12) 50%, transparent 50.1%),
    linear-gradient(transparent 49.9%, rgba(var(--particle-scene-cold), 0.08) 50%, transparent 50.1%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,0.018) 8px, transparent 9px);
  transition: opacity 500ms ease, filter 650ms ease;
}

body.particle-transitioning .editorial-grain::after {
  opacity: 0.42;
  filter: blur(0.8px);
}

html.save-data .editorial-canvas {
  opacity: 0.46;
  filter: contrast(1.08) saturate(0.72);
}

@media (max-width: 700px) {
  .editorial-canvas {
    opacity: 0.78;
    filter:
      contrast(1.12)
      saturate(1.08);
    transform-origin: 50% 42%;
    -webkit-mask-image: radial-gradient(ellipse 110% 86% at 52% 62%, #000 0 78%, rgba(0,0,0,0.56) 91%, transparent 100%);
    mask-image: radial-gradient(ellipse 110% 86% at 52% 62%, #000 0 78%, rgba(0,0,0,0.56) 91%, transparent 100%);
  }

  body.particle-transitioning .editorial-canvas {
    opacity: 0.3;
    filter:
      blur(3px)
      contrast(1.35)
      saturate(1.1);
    transform: scale(0.982);
  }

  .editorial-grain::after {
    opacity: 0.1;
  }

  body.particle-transitioning .editorial-grain::after {
    opacity: 0.24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-canvas,
  .editorial-grain::after {
    transition: none !important;
  }

  .editorial-canvas {
    opacity: 0.34;
    filter: contrast(1.05) saturate(0.65);
    animation: none !important;
  }
}