/* Post-Processing Pipeline — Global screen-space effects */

/* ═══ Post-Process Wrapper ═══ */
/* All content wrapped in .pp-wrapper gets post-processing applied.
   CSS custom properties control each effect independently. */

.pp-wrapper {
  --pp-saturate: 1;
  --pp-hue-rotate: 0deg;
  --pp-brightness: 1;
  --pp-contrast: 1;
  --pp-bloom-blur: 0px;
  --pp-bloom-opacity: 0;
  --pp-vignette: 0;

  position: relative;
  filter:
    saturate(var(--pp-saturate))
    hue-rotate(var(--pp-hue-rotate))
    brightness(var(--pp-brightness))
    contrast(var(--pp-contrast));
  transition: filter 0.8s ease;
}

/* ═══ Global Bloom ═══ */
/* A duplicated blurred layer that makes bright areas glow and bleed.
   More physically accurate than per-element bloom — creates cross-element bleed. */

.pp-bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  backdrop-filter: blur(var(--pp-bloom-blur));
  -webkit-backdrop-filter: blur(var(--pp-bloom-blur));
  mix-blend-mode: screen;
  opacity: var(--pp-bloom-opacity);
  transition: opacity 0.5s ease, backdrop-filter 0.5s ease;
}

[data-theme="light"] .pp-bloom {
  mix-blend-mode: overlay;
}

/* Hide bloom when disabled */
.pp-bloom[data-active="false"] {
  display: none;
}

/* ═══ Vignette ═══ */
/* Radial gradient darkening at viewport edges */

.pp-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 501;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 40%,
    rgba(0, 0, 0, var(--pp-vignette)) 100%
  );
  transition: background 0.5s ease;
}

[data-theme="light"] .pp-vignette {
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 40%,
    rgba(60, 40, 20, calc(var(--pp-vignette) * 0.6)) 100%
  );
}

.pp-vignette[data-active="false"] {
  display: none;
}

/* ═══ Chromatic Aberration ═══ */
/* SVG filter for subtle RGB channel separation at edges.
   The SVG filter is injected by postprocess.js. */

.pp-chromatic-active {
  filter:
    saturate(var(--pp-saturate))
    hue-rotate(var(--pp-hue-rotate))
    brightness(var(--pp-brightness))
    contrast(var(--pp-contrast))
    url(#pp-chromatic);
}

/* ═══ Color Grading Presets ═══ */
/* Named classes for quick grading application */

.pp-grading-neutral {
  --pp-saturate: 1;
  --pp-hue-rotate: 0deg;
  --pp-brightness: 1;
  --pp-contrast: 1;
}

.pp-grading-warm {
  --pp-saturate: 1.1;
  --pp-hue-rotate: -5deg;
  --pp-brightness: 1.02;
  --pp-contrast: 1.02;
}

.pp-grading-cool {
  --pp-saturate: 0.9;
  --pp-hue-rotate: 10deg;
  --pp-brightness: 0.98;
  --pp-contrast: 1.05;
}

.pp-grading-cinematic {
  --pp-saturate: 0.85;
  --pp-hue-rotate: -3deg;
  --pp-brightness: 0.97;
  --pp-contrast: 1.12;
}

.pp-grading-noir {
  --pp-saturate: 0.15;
  --pp-hue-rotate: 0deg;
  --pp-brightness: 0.92;
  --pp-contrast: 1.25;
}

/* ═══ Reduced Motion ═══ */

@media (prefers-reduced-motion: reduce) {
  .pp-wrapper {
    transition: none !important;
  }
  .pp-bloom,
  .pp-vignette {
    transition: none !important;
  }
}