/* ──────────────────────────────────────────────────────────
   cinema-grade.css  ·  site-wide "post-production" grade
   A fixed, pointer-transparent stack that sits above page content
   (but below the nav menu) and gives every page a graded, filmic,
   Seedance-grade finish: atmospheric bloom, a subtle teal-shadow /
   warm-highlight colour grade, fine animated film grain, and a soft
   cinematic vignette. Tuned to be felt, not seen — it elevates the
   existing art direction of each page without recolouring its content.
────────────────────────────────────────────────────────── */

.cg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;            /* above content, below the nav menu (10001) */
  will-change: opacity;
}

/* 1 ── Atmospheric bloom: a faint volumetric light from above + lifted core,
        the "haze" that makes generated footage feel like it has air in it. */
.cg-bloom {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(150,180,210,.06), transparent 60%),
    radial-gradient(100% 60% at 50% 115%, rgba(120,150,180,.05), transparent 62%);
  mix-blend-mode: screen;
}

/* 2 ── Colour grade: cool shadows, warm highlights — the classic filmic
        cross-tone. soft-light keeps it subtle and luminance-aware. */
.cg-grade {
  background:
    linear-gradient(180deg, rgba(40,70,95,.16) 0%, transparent 42%, transparent 60%, rgba(70,45,25,.14) 100%),
    radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(20,28,40,.18) 100%);
  mix-blend-mode: soft-light;
}

/* 3 ── Cinematic vignette: gentle, oval, never a hard ring. */
.cg-vignette {
  background: radial-gradient(ellipse 96% 100% at 50% 48%, transparent 52%, rgba(0,0,0,.30) 100%);
}

/* 4 ── Film grain: fine, animated, low opacity, overlay blend. The single
        biggest contributor to the "shot on something real" feel. */
.cg-grain {
  background-image: var(--cg-grain-tex);
  background-size: 200px 200px;
  opacity: .055;
  mix-blend-mode: overlay;
  animation: cgGrain 1.1s steps(5) infinite;
}
@keyframes cgGrain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}
.cg-grain::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: inherit;
  background-size: inherit;
}

/* 5 ── Subtle scan/halation sweep — a slow breathing brightness that gives
        the frame life, like a projector's flicker, barely perceptible. */
.cg-breathe {
  background: radial-gradient(120% 90% at 50% 40%, rgba(255,250,235,.04), transparent 55%);
  mix-blend-mode: screen;
  animation: cgBreathe 9s ease-in-out infinite;
}
@keyframes cgBreathe {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-grain { animation: none; }
  .cg-breathe { animation: none; opacity: .6; }
}

/* Let pages opt a region out of the grade (e.g. true-colour media) */
[data-no-cinema] { isolation: isolate; }