/* ============================================================
   CINEMA LAYER — sophisticated producer aesthetics
   Loaded on every page via components.js injector.
   Opt-in utilities — won't affect existing light surfaces
   unless a parent explicitly requests .cinema or .cinema-dark.
   ============================================================ */

:root {
  --cin-ink: #0b0a09;
  --cin-ink-2: #141210;
  --cin-ink-3: #1d1a16;
  --cin-cream: #f5f0eb;
  --cin-stone: #c4b8a5;
  --cin-gold: #d4af5f;
  --cin-gold-bright: #e8c47a;
  --cin-burgundy: #8b2e2a;
  --cin-rule: rgba(196,184,165,0.18);
  --cin-rule-strong: rgba(196,184,165,0.35);
}

/* Film-grain overlay — reuse anywhere with class=grain-overlay */
.grain-overlay {
  position: relative;
}
.grain-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* ============================================================
   PALME-STYLE BADGE — for Greenlight 80+ projects
   ============================================================ */
.palme-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  background: linear-gradient(135deg, #3a2f1e 0%, #1a1510 100%);
  border: 1px solid var(--cin-gold);
  color: var(--cin-gold-bright);
  font-family: 'Playfair Display', serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(212,175,95,0.18), inset 0 0 18px rgba(212,175,95,0.06);
  position: relative;
}
.palme-badge::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--cin-gold-bright), #8c6a20 80%);
  box-shadow: 0 0 6px rgba(212,175,95,0.6);
}
.palme-badge.tier-90 { border-color: var(--cin-gold-bright); color: #fff3d6; }
.palme-badge.tier-90::before { background: radial-gradient(circle at 35% 35%, #fff3d6, var(--cin-gold-bright) 80%); }

/* ============================================================
   CINEMA CARD — dark-theme card surface with gold accent
   ============================================================ */
.cinema-card {
  background: linear-gradient(160deg, var(--cin-ink-2) 0%, var(--cin-ink) 100%);
  color: var(--cin-cream);
  border: 1px solid var(--cin-rule);
  border-radius: 4px;
  padding: 32px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.cinema-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 48px;
  background: linear-gradient(180deg, var(--cin-gold), transparent);
}
.cinema-card h3, .cinema-card h2 {
  font-family: 'Playfair Display', serif;
  color: var(--cin-cream);
  font-weight: 700;
}
.cinema-card .kpi {
  font-family: 'Playfair Display', serif;
  font-size: 38px; color: var(--cin-gold-bright);
  line-height: 1;
}
.cinema-card .kpi-label {
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--cin-stone);
  margin-top: 6px;
}

/* ============================================================
   CINEMATIC EMPTY STATE — projector beam + slate
   Apply .cinema-empty to a container; works on any page.
   ============================================================ */
.cinema-empty {
  padding: 48px 24px; text-align: center;
  position: relative; overflow: hidden;
  color: #7a7166;
  background: linear-gradient(180deg, #f7f3ee 0%, #ece4d8 100%);
  border: 1px dashed #c9bca5;
  border-radius: 6px;
}
.cinema-empty-slate {
  display: inline-block;
  padding: 10px 18px;
  background: #1a1510;
  color: #e8c47a;
  font-family: 'Courier New', monospace;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: 2px;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  margin-bottom: 14px;
  position: relative;
}
.cinema-empty-slate::before,
.cinema-empty-slate::after {
  content: ""; position: absolute; top: -4px;
  width: 18px; height: calc(100% + 8px);
  background: repeating-linear-gradient(45deg, #1a1510 0 8px, #e8c47a 8px 16px);
}
.cinema-empty-slate::before { left: -22px; }
.cinema-empty-slate::after { right: -22px; }
.cinema-empty h4 {
  font-family: 'Playfair Display', serif;
  font-size: 20px; color: #2a2520; margin: 8px 0 6px;
}
.cinema-empty p { font-size: 14px; color: #7a7166; margin: 0; }

/* ============================================================
   CINEMATIC LOADING — 3-2-1 countdown leader
   ============================================================ */
.cinema-leader {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #0b0a09;
  color: var(--cin-gold-bright);
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700;
  border: 2px solid var(--cin-gold);
  position: relative;
}
.cinema-leader::before {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cin-gold) 0deg, transparent 360deg);
  animation: cin-spin 1.6s linear infinite;
  opacity: 0.5;
  z-index: -1;
}
.cinema-leader::after {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(212,175,95,0.3);
  transform: translateX(-50%);
}
@keyframes cin-spin { to { transform: rotate(360deg); } }

/* ============================================================
   CONFIDENCE TIER — colored ring around Greenlight score
   Applied inline to any element via data-tier="low|med|high"
   ============================================================ */
.confidence-ring {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; vertical-align: middle;
}
.confidence-ring[data-tier="low"]    { background: #3a1f1f; color: #f0b4b4; border: 1px solid #6b2e2e; }
.confidence-ring[data-tier="med"]    { background: #3a3020; color: #e8d09b; border: 1px solid #6b5a32; }
.confidence-ring[data-tier="high"]   { background: #1f3a27; color: #a8e0ba; border: 1px solid #2e6b45; }
.confidence-ring[data-tier="verified"] { background: #0b2438; color: #a4cfea; border: 1px solid #1e5a88; }
.confidence-ring::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* ============================================================
   FESTIVAL PULSE BEAT — tiny animated pulse dot
   ============================================================ */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #d4af5f;
  position: relative;
  margin-right: 6px;
  vertical-align: middle;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid #d4af5f;
  opacity: 0;
  animation: cin-pulse 1.6s ease-out infinite;
}
@keyframes cin-pulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ============================================================
   DOSSIER CARD — used by Producer Dossier PDF output
   ============================================================ */
.dossier-sheet {
  background: linear-gradient(180deg, #fefaf3 0%, #f5ebd9 100%);
  color: #1a1510;
  padding: 48px;
  font-family: 'Inter', sans-serif;
  position: relative;
  width: 794px;                /* A4 @ 96dpi */
  min-height: 1123px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.dossier-sheet::before {
  content: ""; position: absolute; top: 24px; right: 24px;
  bottom: 24px; left: 24px;
  border: 1px solid rgba(212,175,95,0.4);
  pointer-events: none;
}
.dossier-sheet h1 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #1a1510;
  line-height: 1.1;
  margin-bottom: 4px;
}
.dossier-sheet .tagline {
  font-style: italic;
  color: #6b5a32;
  font-size: 16px;
  border-bottom: 1px solid #c4b8a5;
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.dossier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 24px;
}
.dossier-stat {
  padding: 16px;
  background: rgba(255,255,255,0.6);
  border-left: 3px solid #d4af5f;
}
.dossier-stat .label {
  font-size: 10px; letter-spacing: 2px; color: #8a7d6b;
  text-transform: uppercase; margin-bottom: 4px;
}
.dossier-stat .value {
  font-family: 'Playfair Display', serif;
  font-size: 26px; color: #1a1510;
}
.dossier-footer {
  position: absolute; bottom: 48px; left: 48px; right: 48px;
  display: flex; justify-content: space-between;
  font-size: 10px; color: #6b5a32;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding-top: 12px;
  border-top: 1px solid #c4b8a5;
}

/* ============================================================
   KANBAN BOARD — Deal Room
   ============================================================ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  min-height: 500px;
}
@media (max-width: 900px) {
  .kanban-board { grid-template-columns: 1fr; }
}
.kanban-col {
  background: #1a1510;
  border: 1px solid var(--cin-rule);
  border-radius: 6px;
  padding: 16px;
  min-height: 100%;
}
.kanban-col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--cin-rule);
}
.kanban-col-title {
  font-family: 'Playfair Display', serif;
  color: var(--cin-cream);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.5px;
}
.kanban-col-count {
  font-size: 11px; color: var(--cin-gold);
  background: rgba(212,175,95,0.1);
  padding: 2px 8px; border-radius: 10px;
}
.kanban-card {
  background: linear-gradient(160deg, #2a2520 0%, #1a1510 100%);
  color: var(--cin-cream);
  border: 1px solid var(--cin-rule);
  border-left: 3px solid var(--cin-gold);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: grab;
  font-size: 13px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }
.kanban-card .kc-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--cin-cream);
}
.kanban-card .kc-meta {
  font-size: 11px;
  color: var(--cin-stone);
  letter-spacing: 0.5px;
}
.kanban-col[data-drag-over="1"] {
  background: #241d15;
  border-color: var(--cin-gold);
}

/* ============================================================
   TORNADO (SENSITIVITY STORM) — custom HTML bars
   ============================================================ */
.sens-storm { padding: 18px 0; }
.sens-row {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  margin-bottom: 6px;
  gap: 10px;
}
.sens-label {
  font-size: 13px; color: #3a3530;
  font-weight: 600; text-align: right;
}
.sens-bar-wrap {
  position: relative; height: 26px;
  background: linear-gradient(90deg, rgba(139,46,42,0.05) 0%, rgba(0,0,0,0) 50%, rgba(46,107,69,0.05) 100%);
  border-left: 1px dashed #c4b8a5; border-right: 1px dashed #c4b8a5;
}
.sens-bar-wrap::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: #2a2520;
}
.sens-bar {
  position: absolute; top: 4px; bottom: 4px;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.sens-bar.neg {
  background: linear-gradient(90deg, #8b2e2a, #b74541);
  right: 50%;
}
.sens-bar.pos {
  background: linear-gradient(90deg, #2e6b45, #4ea570);
  left: 50%;
}
.sens-delta {
  font-size: 12px; color: #3a3530;
  font-family: 'Playfair Display', serif;
}

/* ============================================================
   "CINEMA" CLASS — pages that fully adopt dark theme
   (opt-in; apply to <body class="cinema">)
   ============================================================ */
body.cinema {
  background: var(--cin-ink);
  color: var(--cin-cream);
}
body.cinema .section { background: transparent; color: var(--cin-cream); }
body.cinema .section-title { color: var(--cin-cream); }
body.cinema .section-desc { color: var(--cin-stone); }
body.cinema a { color: var(--cin-gold-bright); }
body.cinema a:hover { color: #fff; }

/* ============================================================
   CUSTOM 404 SLATE — used by /404.html
   ============================================================ */
.slate-404 {
  min-height: 100vh;
  background: #0a0908;
  color: #f5f0eb;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  font-family: 'Inter', sans-serif;
}
.slate-404-card {
  width: min(720px, 95vw);
  background: #f5f0eb;
  color: #1a1510;
  padding: 40px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 8px #1a1510;
}
.slate-404-stripes {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  height: 48px;
  margin-bottom: 28px;
}
.slate-404-stripes span:nth-child(odd)  { background: #1a1510; }
.slate-404-stripes span:nth-child(even) { background: #f5f0eb; }
.slate-404-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px;
  margin-bottom: 28px;
}
.slate-404-field { border-bottom: 1px solid #1a1510; padding-bottom: 6px; }
.slate-404-field label {
  display: block; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: #6b5a32;
}
.slate-404-field .val {
  font-family: 'Playfair Display', serif;
  font-size: 22px; color: #1a1510;
}
.slate-404 h1 {
  font-family: 'Playfair Display', serif;
  font-size: 56px; line-height: 1;
  margin-bottom: 10px;
}
.slate-404 .take {
  display: inline-block;
  padding: 6px 14px;
  background: #1a1510; color: #e8c47a;
  font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
}
.slate-404 .btn-row { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.slate-404 .btn-row a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; background: #1a1510; color: #e8c47a;
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; border-radius: 2px;
}
.slate-404 .btn-row a:hover { background: #d4af5f; color: #1a1510; }