/* ============================================================
   CINEMA V3 — "Movie Grade" additive layer
   Plugs on top of cinema-v2 without modifying it.
   Kill switch: set window.CINE3_OFF = true before script loads.
   Effects: 35mm film grain · vignette · chapter title-card wipes ·
            anamorphic flare sweep on key moments · end-title credit roll.
   ============================================================ */

:root {
  --cine3-green: #21e68a;
  --cine3-ink: #03060a;
}

/* ---- 1. 35MM FILM GRAIN ------------------------------------ */
.cine3-grain {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 112;            /* above page content, below v2 HUD/controls (9400+) */
  opacity: 0.04;
  /* PERF: no mix-blend — blend modes force a full-viewport composite pass
     every frame. Plain alpha is GPU-cheap and visually near-identical here. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  /* PERF: grain is painted ONCE (static). The per-frame transform animation
     was re-compositing the whole viewport every frame and halving FPS. */
}
@keyframes cine3-grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -7%); }
  60%  { transform: translate(-4%, 6%); }
  80%  { transform: translate(7%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---- 2. VIGNETTE ------------------------------------------- */
.cine3-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 110;            /* sits just beneath the grain, above content */
  background:
    radial-gradient(ellipse 128% 96% at 50% 42%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.20) 84%,
      rgba(2,4,8,0.5) 100%);   /* softer corners — keep corner CTAs crisp */
  /* PERF: plain alpha (was multiply). Black radial darkens corners the same. */
}

/* ---- 3. CHAPTER TITLE CARDS -------------------------------- */
.cine3-titlecard {
  position: fixed;
  left: 0; right: 0;
  top: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  pointer-events: none;
  z-index: 130;            /* over content + grain, below site chrome (nav/overlay <1000) */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(.16,1,.3,1);
}
.cine3-titlecard::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  height: 260px;
  background: radial-gradient(ellipse at center,
    rgba(2,5,9,0.82) 0%,
    rgba(2,5,9,0.55) 45%,
    rgba(2,5,9,0) 72%);
  z-index: -1;
}
.cine3-titlecard.show {
  opacity: 1;
  transform: translateY(0);
}
.cine3-tc-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cine3-green);
  text-shadow: 0 0 18px rgba(33,230,138,0.55);
  opacity: 0.9;
}
.cine3-tc-name {
  font-family: "Anton", "Oswald", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f4f8f6;
  text-align: center;
  text-shadow: 0 4px 60px rgba(0,0,0,0.7);
}
.cine3-tc-wipe {
  position: relative;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--cine3-green), transparent);
  box-shadow: 0 0 22px rgba(33,230,138,0.7);
  transition: width 0.85s cubic-bezier(.16,1,.3,1);
}
.cine3-titlecard.show .cine3-tc-wipe { width: min(360px, 60vw); }

/* ---- 4. ANAMORPHIC FLARE SWEEP (key moments) -------------- */
.cine3-flare {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 114;            /* light sweep rides just above the grain */
  opacity: 0;
  background:
    linear-gradient(95deg,
      transparent 38%,
      rgba(33,230,138,0.10) 49%,
      rgba(180,255,220,0.18) 50%,
      rgba(33,230,138,0.10) 51%,
      transparent 62%);
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}
.cine3-flare.fire {
  animation: cine3-flare-sweep 1.3s ease-out;
}
@keyframes cine3-flare-sweep {
  0%   { opacity: 0; transform: translateX(-30%) scaleY(1.2); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(30%) scaleY(1.2); }
}

/* ---- 5. END-TITLE CREDIT ROLL ----------------------------- */
.cine3-credits {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
  padding: clamp(3rem, 8vw, 7rem) 1.5rem 1rem;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: rgba(220,235,228,0.78);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}
.cine3-credits.show { opacity: 1; transform: translateY(0); }
.cine3-credits .cr-fin {
  font-family: "Anton","Oswald",Impact,sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: 0.18em;
  color: #f4f8f6;
  margin-bottom: 2.4rem;
  text-shadow: 0 0 40px rgba(33,230,138,0.25);
}
.cine3-credits .cr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 2rem;
  padding: 0.5rem 0;
  font-size: clamp(0.72rem, 1.4vw, 0.9rem);
  letter-spacing: 0.04em;
}
.cine3-credits .cr-role {
  text-align: right;
  color: var(--cine3-green);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7em;
  align-self: center;
  opacity: 0.85;
}
.cine3-credits .cr-name { text-align: left; color: #eef5f1; }
.cine3-credits .cr-rule {
  height: 1px; width: 80px; margin: 1.8rem auto;
  background: linear-gradient(90deg, transparent, rgba(33,230,138,0.6), transparent);
}
.cine3-credits .cr-tag {
  margin-top: 1.6rem;
  font-size: clamp(0.62rem, 1.1vw, 0.74rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(33,230,138,0.7);
}

/* ---- MOBILE / REDUCED MOTION ------------------------------ */
@media (max-width: 760px) {
  .cine3-titlecard { top: 32%; }
  .cine3-tc-name { font-size: clamp(2rem, 11vw, 3.4rem); }
  .cine3-credits .cr-row { grid-template-columns: 1fr; gap: 0.1rem; text-align: center; }
  .cine3-credits .cr-role, .cine3-credits .cr-name { text-align: center; }
  /* feTurbulence repaint is costly on mobile GPUs — freeze the grain,
     drop its opacity, and kill the flare to keep scroll buttery. */
  .cine3-grain { animation: none; opacity: 0.04; background-size: 120px 120px; }
  .cine3-flare { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cine3-grain { animation: none; opacity: 0.04; }
  .cine3-flare { display: none; }
  .cine3-titlecard { transition: opacity 0.3s ease; transform: none; }
  .cine3-titlecard.show { transform: none; }
  .cine3-tc-wipe, .cine3-titlecard.show .cine3-tc-wipe { transition: none; }
}