/* ============================================================
   BIG SCREEN HACK — v2 TOKENS
   Extends colors_and_type.css with: Cannes sub-theme, LUT ramps,
   third signal (jury red), and v2 utility atoms.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

:root{
  /* -------- v2 · Third signal — Jury Red (deep velvet, cinema seats) -------- */
  --jury:        #b01e2a;
  --jury-2:      #e8384c;
  --jury-dim:    rgba(176,30,42,.16);
  --jury-glow:   rgba(232,56,76,.4);

  /* -------- v2 · Dev Cyan (the AI / developer half) -------- */
  --dev:         #4be6d6;
  --dev-2:       #9ef3e8;
  --dev-dim:     rgba(75,230,214,.14);

  /* -------- v2 · LUT ramps (for scopes, histograms, gradients) -------- */
  --lut-a1: #050608;
  --lut-a2: #0e1a33;
  --lut-a3: #1e3a7a;
  --lut-a4: #3d7dff;
  --lut-a5: #8fb4ff;
  --lut-a6: #f3f5f8;

  --lut-g1: #2a1c00;
  --lut-g2: #5b3a00;
  --lut-g3: #a67412;
  --lut-g4: #d9a82b;
  --lut-g5: #f4c542;
  --lut-g6: #ffdb73;

  /* -------- v2 · Ornament font (Cannes / editorial pull-quotes) -------- */
  --ornament: 'DM Serif Display', 'Playfair Display', Georgia, serif;

  /* -------- v2 · Kinetic easings -------- */
  --e-shutter: cubic-bezier(.77,0,.18,1);      /* letterbox open/close */
  --e-slate:   cubic-bezier(.86,.02,.14,1);    /* clapper snap */
  --e-scrub:   cubic-bezier(.25,.46,.45,.94);  /* scrubber linear-ish */
  --e-swash:   cubic-bezier(.34,1.2,.64,1);    /* italic pull-quote swash */

  /* -------- v2 · Film grain palette -------- */
  --grain-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-warm: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CANNES SUB-THEME — wrap any surface in .cannes
   ============================================================ */
.cannes{
  --accent:       var(--accent-warm);
  --accent-2:     var(--accent-warm-2);
  --accent-hover: var(--accent-warm-hover);
  --accent-glow:  var(--accent-warm-glow);
  --ink:          #fff7e6;
  --ink-2:        #e6d49b;
  --ink-3:        #a6864a;
  --bg:           #0b0804;
  --bg-1:         #120c05;
  --bg-2:         #1c1308;
  color: var(--ink);
  background: var(--bg);
}
.cannes .display-serif{ font-family:var(--ornament); font-style:italic; font-weight:400; }

/* ============================================================
   v2 · SHARED ATOMS
   ============================================================ */

/* Film-grain overlay (global, reusable) */
.atom-grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:var(--grain-fine)}
.cannes .atom-grain{opacity:.08;background-image:var(--grain-warm);mix-blend-mode:soft-light}

/* Vignette */
.atom-vignette{position:fixed;inset:0;z-index:9989;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}

/* Letterbox bars — animate in with .open */
.atom-letterbox{position:fixed;left:0;right:0;z-index:9995;pointer-events:none;background:#000;transition:transform 1.1s var(--e-shutter)}
.atom-letterbox.top{top:0;height:12vh;transform:translateY(0)}
.atom-letterbox.bot{bottom:0;height:12vh;transform:translateY(0)}
.atom-letterbox.open.top{transform:translateY(-100%)}
.atom-letterbox.open.bot{transform:translateY(100%)}

/* Light leak (anamorphic) */
.atom-leak{position:absolute;pointer-events:none;mix-blend-mode:screen;filter:blur(40px);opacity:.55;background:radial-gradient(ellipse 60% 30% at center,rgba(244,197,66,.55),rgba(255,122,58,.2) 40%,transparent 70%)}

/* Anamorphic flare bar */
.atom-flare{position:absolute;left:-10%;right:-10%;height:2px;background:linear-gradient(90deg,transparent,rgba(143,180,255,.9),rgba(255,255,255,.95),rgba(143,180,255,.9),transparent);filter:blur(1.5px);box-shadow:0 0 24px rgba(143,180,255,.6);pointer-events:none}

/* Sprocket rail — horizontal strip with perforations */
.atom-sprocket{height:22px;background:
  repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.08) 14px 16px,transparent 16px 30px);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);position:relative}
.atom-sprocket::before,.atom-sprocket::after{content:'';position:absolute;left:0;right:0;height:6px;background:
  repeating-linear-gradient(90deg,#050608 0 10px,transparent 10px 30px);}
.atom-sprocket::before{top:2px}
.atom-sprocket::after{bottom:2px}

/* Scopes · waveform bars */
@keyframes wf-pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.atom-waveform{display:flex;gap:2px;align-items:center;height:28px}
.atom-waveform i{display:inline-block;width:3px;height:100%;background:var(--accent);transform-origin:center;animation:wf-pulse 1.4s ease-in-out infinite}
.atom-waveform i:nth-child(2n){height:70%;animation-duration:1.1s}
.atom-waveform i:nth-child(3n){height:40%;animation-duration:1.6s;background:var(--accent-2)}
.atom-waveform i:nth-child(5n){height:85%;animation-duration:.9s}
.atom-waveform i:nth-child(7n){height:25%;background:var(--accent-warm)}
.atom-waveform.warm i{background:var(--accent-warm)}

/* Scrolling marquee (Bebas strip) */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.atom-marquee{overflow:hidden;white-space:nowrap;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.atom-marquee-track{display:inline-flex;gap:48px;animation:mq 42s linear infinite;font-family:var(--display);font-size:clamp(2.6rem,6vw,5.4rem);letter-spacing:.03em;text-transform:uppercase;line-height:1}
.atom-marquee .sep{color:var(--accent);font-family:var(--editorial);font-style:italic;font-weight:400}

/* Swashy ampersand for pull quotes */
.amp-swash{font-family:var(--ornament);font-style:italic;font-weight:400;color:var(--accent);line-height:1;font-size:1.35em;vertical-align:-.12em;padding:0 .05em}
.cannes .amp-swash{color:var(--accent-warm)}

/* Drop cap */
.drop-cap::first-letter{font-family:var(--ornament);font-style:italic;font-weight:400;font-size:5.4em;line-height:.82;float:left;padding:.06em .14em 0 0;color:var(--ink);shape-outside:polygon(0 0,100% 0,100% 100%,0 100%)}
.cannes .drop-cap::first-letter{color:var(--accent-warm)}

/* Credits-roll stacked margin type */
.atom-credits-stack{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);line-height:1.9;font-weight:500;white-space:nowrap}

/* Scope bar */
.atom-scope{height:36px;background:linear-gradient(90deg,var(--lut-a1),var(--lut-a2),var(--lut-a3),var(--lut-a4),var(--lut-a5),var(--lut-a6));position:relative;border:1px solid var(--line)}
.atom-scope.warm{background:linear-gradient(90deg,var(--lut-g1),var(--lut-g2),var(--lut-g3),var(--lut-g4),var(--lut-g5),var(--lut-g6))}
.atom-scope-tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.4)}