/* =====================================================================
   The Funding Village — cinematic layer (clips + kinetic type)
   Loaded AFTER styles.css on all three pages. Same locked tokens.
   Gating model:
     - No JS (no html.cine-js)            → fully static, posters only, all text visible.
     - JS + reduced-motion or save-data   → html.cine-static: posters only, no scrub/typing/slam.
     - JS + motion OK                     → html.cine-video-ok: scrub, loops, typing, kinetic, hovers.
   Film grain + soft vignette live ONLY on .cine-media (the clip layer),
   never on text or UI chrome. Gold remains the primary CTA colour.
   ===================================================================== */

/* ---------- clip layer (shared) ---------- */
.cine-media {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  background-size: cover; background-position: center; /* poster via inline style */
}
/* organisations hero: shrink the problem-naming headline under the mega type */
.cine-hero .hero-h1 { font-size: clamp(1.3rem, 3.1vw, 2rem); max-width: 36ch; margin-top: 1.5rem; }
.cine-hero .sub { font-size: clamp(1rem, 2.2vw, 1.2rem); margin-top: .8rem; }
.cine-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.cine-on .cine-media video:not(.rot) { opacity: 1; }
.cine-failed .cine-media video { display: none; }

/* ---------- rotator: four community clips crossfading on a loop ---------- */
.cine-media video.rot { opacity: 0; transition: opacity .9s ease; }
.cine-media video.rot.rot-on { opacity: 1; }

/* film grain — clips only */
.cine-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* soft vignette — clips only */
.cine-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(6, 26, 25, .38) 100%);
}
/* readability shade sits above grain, below content */
.cine-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 69, 67,.62) 0%, rgba(9, 55, 53,.44) 45%, rgba(6, 40, 39,.72) 100%);
}
.cine-shade--bright { /* community grade: brighter, still readable */
  background: linear-gradient(180deg, rgba(20,50,40,.34) 0%, rgba(22,30,26,.30) 50%, rgba(16,24,20,.55) 100%);
}
html.cine-video-ok .cine-media--bright video { filter: brightness(1.18) saturate(1.06); }

/* ---------- mega display type ---------- */
.mega {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.6rem, 12.5vw, 10rem);
  line-height: .95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}
.mega .mega-accent { color: var(--gold-2); }
.type-line {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 3.6vw, 2rem);
  color: var(--gold-2);
  min-height: 1.4em;
  margin-top: .9rem;
}
html.cine-video-ok .type-line:not(.typed)::after {
  content: ""; display: inline-block; width: .55ch; height: 1em;
  background: var(--gold-2); margin-left: 2px; vertical-align: -0.12em;
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- hero scrub (organisations) ---------- */
.cine-hero { position: relative; }
.cine-sticky { position: relative; min-height: 100svh; display: flex; align-items: center; }
/* Pinned scroll-scrub is a DESKTOP behaviour — mobile plays the clip once
   instead (no pinning, no tall scroll track, nothing to break at 375px). */
@media (min-width: 768px) {
  html.cine-video-ok .cine-hero[data-cine="scrub"] { height: 230vh; }
  html.cine-video-ok .cine-hero[data-cine="scrub"] .cine-sticky {
    position: sticky; top: 0; height: 100svh;
  }
}
/* CTA + badges fade in once the bloom settles (or immediately when static) */
html.cine-video-ok .cine-hero .cine-late {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
html.cine-video-ok .cine-hero.scrub-settled .cine-late,
html.cine-video-ok .cine-hero.cta-in .cine-late {
  opacity: 1; transform: none;
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  z-index: 3; color: rgba(255,255,255,.75); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; display: none;
}
html.cine-video-ok .cine-hero[data-cine="scrub"] .scroll-cue { display: block; }
html.cine-video-ok .cine-hero.scrub-settled .scroll-cue { opacity: 0; transition: opacity .4s; }

/* ---------- root chooser cinematic ---------- */
.chooser .cine-media { z-index: 0; }
.chooser .aurora, .chooser .hero-grain { z-index: 0; }
.cine-on .aurora { opacity: 0; transition: opacity 1.2s ease; }
html.cine-video-ok .chooser .chooser-cards {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease .15s, transform .8s ease .15s;
}
html.cine-video-ok .chooser.cards-in .chooser-cards { opacity: 1; transform: none; }
.chooser .mega { font-size: clamp(2.4rem, 10.5vw, 7.5rem); }

/* ---------- kinetic fee strip ---------- */
.kinetic { position: relative; background: var(--aubergine-2); color: #fff; padding-block: 0; }
.kinetic .k-frame {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 1.25rem; position: relative; overflow: hidden;
}
@media (min-width: 768px) {
  html.cine-video-ok .kinetic:not(.k-static) { height: 280vh; }
  html.cine-video-ok .kinetic:not(.k-static) .k-frame { position: sticky; top: 0; height: 100svh; min-height: 0; }
}
.k-line {
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 8.5vw, 6.2rem); line-height: 1.02; letter-spacing: -0.01em;
  color: #fff; text-wrap: balance; margin: 0;
}
.k-line .k-gold { color: var(--gold-2); }
.k-line .k-emerald { color: var(--emerald-2); }
/* static / reduced-motion / no-JS: all three lines stacked and readable */
.k-stack { display: grid; gap: 1.2rem; }
@media (min-width: 768px) {
  html.cine-video-ok .kinetic:not(.k-static) .k-stack { display: block; }
  html.cine-video-ok .kinetic:not(.k-static) .k-line {
    position: absolute; left: 50%; top: 50%; width: min(92vw, 1000px);
    transform: translate(-50%, -50%) scale(.92);
    opacity: 0;
  }
  html.cine-video-ok .kinetic:not(.k-static) .k-line.k-on {
    opacity: 1; transform: translate(-50%, -50%) scale(1);
    transition: opacity .18s ease-out, transform .22s cubic-bezier(.2, 1.4, .4, 1);
  }
  html.cine-video-ok .kinetic:not(.k-static) .k-note {
    position: absolute; bottom: 1.4rem; left: 0; right: 0; margin: 0;
  }
}
.k-note { color: rgba(255,255,255,.65); font-size: .95rem; margin-top: 1.6rem; }

/* ---------- benefit-card hover video reveals ---------- */
[data-hover-video] { position: relative; overflow: hidden; isolation: isolate; }
[data-hover-video] > * { position: relative; z-index: 2; }
.card-veil {
  position: absolute; inset: 0; z-index: 0 !important;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
[data-hover-video].veil-on .card-veil { opacity: .30; }
[data-hover-video]::after { /* warm wash keeps text readable over the clip */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,253,249,.86), rgba(255,253,249,.74));
  opacity: 0; transition: opacity .45s ease;
}
[data-hover-video].veil-on::after { opacity: 1; }

/* ---------- partner section over clip 3 (dimmed, dark grade) ---------- */
.cine-section { position: relative; color: #fff; isolation: isolate; }
.cine-section .cine-media { opacity: .95; }
.cine-section .cine-shade--dim {
  background: linear-gradient(180deg, rgba(8, 60, 58,.88) 0%, rgba(8, 60, 58,.80) 50%, rgba(7, 44, 42,.90) 100%);
}
.cine-section .wrap { position: relative; z-index: 2; }
.cine-section .eyebrow { color: var(--gold-2); }
.cine-section .eyebrow::before { background: var(--gold-2); }
.cine-section h2 { color: #fff; }
.cine-section .lead, .cine-section li { color: rgba(255,255,255,.9); }

/* ---------- community hero loop ---------- */
.hero.cine-loop { isolation: isolate; }
.hero.cine-loop .wrap { position: relative; z-index: 3; }

/* ---------- oversized footer CTA ---------- */
.footer-cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(201,154,46,.28) 0%, transparent 55%),
    linear-gradient(180deg, var(--aubergine) 0%, var(--aubergine-2) 100%);
  color: #fff;
}
.footer-cta .fc-title {
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 8.5vw, 5.8rem); line-height: 1; letter-spacing: -0.015em;
  margin: 0 auto; max-width: 18ch; text-wrap: balance;
}
.footer-cta .fc-title em { font-style: normal; color: var(--gold-2); }
.footer-cta p { color: rgba(255,255,255,.85); margin-top: 1rem; }
.footer-cta .btn { margin-top: 1.8rem; }

/* ---------- reduced motion: kill every cinematic behaviour ---------- */
@media (prefers-reduced-motion: reduce) {
  .cine-media video { display: none !important; }            /* posters only */
  .cine-shade { background: linear-gradient(180deg, rgba(8, 69, 67,.72), rgba(6, 40, 39,.8)); }
  html.cine-video-ok .cine-hero[data-cine="scrub"] { height: auto !important; }
  html.cine-video-ok .cine-hero[data-cine="scrub"] .cine-sticky { position: relative !important; height: auto !important; min-height: 100svh; }
  html.cine-video-ok .cine-hero .cine-late { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.cine-video-ok .chooser .chooser-cards { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.cine-video-ok .kinetic { height: auto !important; }
  html.cine-video-ok .kinetic .k-frame { position: relative !important; height: auto !important; min-height: 0 !important; }
  html.cine-video-ok .kinetic .k-stack { display: grid !important; }
  html.cine-video-ok .kinetic .k-line {
    position: static !important; transform: none !important; opacity: 1 !important; width: auto !important;
  }
  html.cine-video-ok .kinetic .k-note { position: static !important; margin-top: 1.6rem !important; }
  .type-line::after { animation: none !important; display: none !important; }
  .card-veil { display: none !important; }
  [data-hover-video]::after { display: none !important; }
  .scroll-cue { display: none !important; }
}

/* very small screens: keep mega type comfortably inside 375px */
@media (max-width: 420px) {
  .mega { letter-spacing: 0; }
}