/* ==========================================================================
   Style layer: CINEMATIC  (deck-kit, since 29 Sep 2026)
   A LOOK, not a brand: load it AFTER the brand CSS, so colours (--hi gold etc.) still come from the brand.
     <link id="brand" rel="stylesheet" href="kit/brands/mygentic.css">
     <link rel="stylesheet" href="kit/brands/cinematic.css">
   First used: decks/satt-mygentic-cinematic-2026-09-29 (HTML remake of the NotebookLM edition).
   What it gives you (all opt-in per slide):
     .slide.cin              dark cinematic slide: white text, vignette, film grain, pen = white
     > .bg  (inline background-image; --pos --size --grade)   full-bleed photo, colour-graded (warm, moody) by a CSS filter
     --shade on the slide    extra gradient over the photo for legibility (default: soft top+bottom darkening)
     .slide.cin-light        light slide (cream/grey/gold): dark text, pen = dark ink
     .slide.cin.pen-dark     keep the cinematic look but draw with dark ink (light photo areas)
     Type: .hero (Anton caps) · .cond (Barlow Condensed) · .grot (Inter heavy) · .geo (Montserrat heavy) · .g (gold)
     Glows: .glow-gold / .glow-white (SVG lines, via drop-shadow) · .text-glow (gold text halo) · .cin-orb (glowing gold sphere)
     Layouts: .cin-panel + .cin-photo (colour panel left, photo right; set --pw) · .cin-card (framed image/screenshot)
     Screens: .slide.cin .shot = kit screenshot frame, restyled dark-cinema (real screenshots stay 100% readable)
     Bubbles: .cin-bubble (+ .gold) chat bubbles for "before/after" demos
   Rules still apply: <=25 words, nothing <28px, no header/eyebrow text. Photos: real (Pexels/Unsplash), credited in NOTES.md.
   NOTE: set photos with an INLINE background-image:url(img/...) on .bg / .cin-photo / .cin-card.
     (A url() passed through a custom property resolves against THIS stylesheet's folder, kit/brands/,
      so --img:url(img/x.jpg) silently 404s.)  Stack extra .bg layers (mix-blend-mode) for composites, e.g. rain on glass.
   PDF: Chrome rasterises filtered layers at 300 ppi; run tools/shrink_pdf.py on downloads/deck.pdf after build.
   ========================================================================== */
@import url("cinematic-fonts.css");

:root{
  --cin-bg:#0b0a09;
  --cin-grade:brightness(.74) contrast(1.12) saturate(.88) sepia(.16);
  --cin-vignette:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%);
  --cin-grain:.09;
  --font-hero:"Anton",Impact,"Arial Narrow",sans-serif;
  --font-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-grot:"Inter",system-ui,sans-serif;
  --font-geo:"Montserrat","Inter",system-ui,sans-serif;
  /* pen: white by default on cinematic decks, dark ink on light slides (read when a stroke starts) */
  --pen-ink:#FFFFFF;
}
html:has(.slide.on:is(.cin-light,[data-canvas="draw"],.pen-dark)){--pen-ink:#1A1A1A}
/* .pen-dark: a dark .cin slide whose drawing space is light (e.g. a cream haze photo): dark ink */

/* ---------- base dark slide ---------- */
.slide.cin{background:var(--cin-bg);color:#fff;isolation:isolate;
  --ink:#FFFFFF;--mut:rgba(255,255,255,.84);--quiet:rgba(255,255,255,.6);--grey:rgba(255,255,255,.34);--line:rgba(255,255,255,.28);--paper:rgba(14,13,12,.7)}
.slide.cin.cin-light{background:#E9E5DE;color:#141312;--ink:#141312;--mut:rgba(20,19,18,.72);--line:rgba(20,19,18,.22);--paper:#FFFEF8}
.slide.cin[data-canvas="draw"]{background:var(--draw)}
.cin > .bg{position:absolute;inset:0;z-index:0;background-color:#0b0a09;background-size:var(--size,cover);
  background-position:var(--pos,center);background-repeat:no-repeat;filter:var(--grade,var(--cin-grade))}
/* shade + vignette (over the photo, under the words) */
.cin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--shade,linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 62%,rgba(0,0,0,.6) 100%)),var(--vig,var(--cin-vignette))}
.cin.cin-light::before{--vig:radial-gradient(ellipse 80% 75% at 50% 50%,rgba(0,0,0,0) 55%,rgba(40,30,20,.16) 100%)}
.cin.no-vig::before{--vig:linear-gradient(transparent,transparent)}
/* film grain (fractal-noise SVG, overlay-blended; under the words so type stays crisp) */
.cin::after{content:"";position:absolute;inset:-2px;z-index:2;pointer-events:none;opacity:var(--grain,var(--cin-grain));mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px}
.cin > *:not(.bg):not(.kit-ink){position:absolute;z-index:3}

/* ---------- type ---------- */
.cin h1,.cin h2,.cin h3{letter-spacing:normal}
.cin .hero{font-family:var(--font-hero);font-weight:400;text-transform:uppercase;line-height:.93;letter-spacing:.004em}
.cin .cond{font-family:var(--font-cond);font-weight:700;line-height:1;letter-spacing:-.005em}
.cin .grot{font-family:var(--font-grot);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.cin .geo{font-family:var(--font-geo);font-weight:800;line-height:1.08;letter-spacing:-.01em}
.cin .body-t{font-family:var(--font-grot);font-weight:500;letter-spacing:-.01em}
.slide.cin:not(.cin-light):not([data-canvas="draw"]) :is(h1,h2,.hero,.cond,.grot,.geo){text-shadow:0 4px 34px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35)}
.cin .g{color:var(--hi)}
.cin .text-glow{text-shadow:0 0 22px rgba(236,181,65,.55),0 0 60px rgba(236,181,65,.25)}
.cin .quote{font-family:var(--font-grot);font-weight:500;font-style:italic;font-size:38px;line-height:1.3;color:rgba(255,255,255,.9)}

/* ---------- glows ---------- */
.cin .glow-gold{filter:drop-shadow(0 0 3px rgba(236,181,65,.95)) drop-shadow(0 0 14px rgba(236,181,65,.6)) drop-shadow(0 0 34px rgba(236,181,65,.3))}
.cin .glow-white{filter:drop-shadow(0 0 3px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(255,236,190,.45))}
.cin-orb{border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;color:#1A1409;
  font-family:var(--font-grot);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  background:radial-gradient(circle at 36% 30%,#FFF4CC 0%,#F6D27A 20%,#E3AE45 48%,#B7811F 78%,#7A5210 100%);
  box-shadow:0 0 30px 8px rgba(236,181,65,.55),0 0 110px 36px rgba(236,181,65,.3),0 0 240px 80px rgba(236,181,65,.14),inset 0 -22px 44px rgba(90,55,10,.5),inset 0 10px 30px rgba(255,250,220,.5)}

/* ---------- split: colour panel + photo ---------- */
.cin .cin-panel{left:0;top:0;bottom:0;width:var(--pw,62%);background:var(--panel,var(--hi))}
.cin .cin-photo{top:0;bottom:0;right:0;left:var(--pw,62%);background-size:cover;background-position:var(--pos,center);filter:var(--grade,var(--cin-grade))}
.cin .cin-photo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:#0b0a09}

/* ---------- framed images / screenshots ---------- */
.cin .cin-card{border-radius:22px;overflow:hidden;background-size:cover;background-position:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 2px rgba(255,255,255,.14)}
.slide.cin .shot{--ink:#1A1A1A;--paper:#FFFEF8;--line:#E5E2DC;--mut:#6B6560;--quiet:#A39E95;color:#1A1A1A;border:0;border-radius:22px;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.9),0 0 0 2px rgba(255,255,255,.18),0 0 60px -10px rgba(236,181,65,.35)}
.slide.cin .shot .bar{background:#141312;border-bottom:1px solid rgba(255,255,255,.12)}
.slide.cin .shot .bar > span{background:rgba(255,255,255,.22)}
.slide.cin .shot .bar .url{color:rgba(255,255,255,.62)}
.slide.cin .shot .bar em.real{color:rgba(255,255,255,.7)}

/* ---------- chat bubbles ---------- */
.cin-bubble{border-radius:34px;position:absolute}
.cin-bubble::after{content:"";position:absolute;left:70px;bottom:-44px;border:24px solid transparent;border-top:24px solid var(--tail,#6f6d69);border-left:24px solid var(--tail,#6f6d69)}
.cin-bubble.grey{background:linear-gradient(180deg,#8a8884,#5f5d5a);--tail:#5f5d5a;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.cin-bubble.gold{background:rgba(20,15,6,.55);border:5px solid var(--hi);--tail:var(--hi);
  box-shadow:0 0 18px rgba(236,181,65,.8),0 0 60px rgba(236,181,65,.45),inset 0 0 40px rgba(236,181,65,.25)}