/* =====================================================================
   Screening Room CORE — the shared palette + atmosphere for MTV's warm
   tungsten dark theme. Loaded by BOTH consumers, before them:
     - the landing (landing-v3.css layers full page components on top)
     - the mid-funnel (cinema.css layers a design-token remap on top)
   This file is the single source for the room's look: tweak the palette
   or grain here and every dark surface moves together. Component rules
   do NOT belong here.
   ===================================================================== */

:root {
  /* ---- Surfaces — warm near-black, a theater before the reel ---- */
  --ink:        #0E0C09;
  --ink-2:      #15120E;
  --ink-3:      #1D1914;

  /* ---- Type — projector light on screen ---- */
  --paper:      #F2ECDF;
  --paper-dim:  rgba(242, 236, 223, 0.62);
  --paper-faint:rgba(242, 236, 223, 0.38);
  --paper-ghost:rgba(242, 236, 223, 0.16);

  /* ---- Accents ---- */
  --tungsten:   #E9A13B;   /* marquee bulb amber — the one action color */
  --tungsten-hi:#FFC56E;
  --tungsten-dim:rgba(233, 161, 59, 0.14);
  --tally:      #E5484D;   /* REC light — live/rolling states only */
  --on-tungsten:#161005;

  /* ---- Lines ---- */
  --line:       rgba(242, 236, 223, 0.14);
  --line-soft:  rgba(242, 236, 223, 0.07);
  --line-hard:  rgba(242, 236, 223, 0.26);
}

/* ---------------------------------------------------------------------
   Room atmosphere, scoped to body.cinema.
   --------------------------------------------------------------------- */
body.cinema ::selection { background: var(--tungsten); color: var(--on-tungsten); }

/* Guard the whole "display: overrides [hidden]" pitfall class in one rule. */
body.cinema [hidden] { display: none !important; }

/* Film grain: fixed, pointer-transparent, transform-only animation. */
body.cinema::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sr-grain 1.2s steps(3) infinite;
}
@keyframes sr-grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-18px, 12px); }
  66%  { transform: translate(14px, -10px); }
  100% { transform: translate(0, 0); }
}

/* Projector vignette: warm spill from above, darkness pooling below. */
body.cinema::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 70% at 50% -8%, rgba(233, 161, 59, .07), transparent 58%),
    radial-gradient(90% 60% at 50% 112%, rgba(0, 0, 0, .5), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  body.cinema::after { animation: none; }
}