/* ============================================================
 * cinema.css, homepage-only cinematic layer for Evolve Studio.
 * Loaded AFTER site.css on / only. All classes namespaced `cn-`
 * to avoid colliding with the existing cascade. Inherits the live
 * lime palette via [data-app="studio"] tokens (--color-accent #c0ee59).
 * ============================================================ */

/* ---- global ambient overlays (above content, non-interactive, no
 *      blend modes so they stay light on the compositor) ---- */
.cn-veil, .cn-grain, .cn-spot { position: fixed; inset: 0; pointer-events: none; }
.cn-veil {
  z-index: 3;
  background: radial-gradient(125% 95% at 50% 22%, transparent 46%, rgba(3,3,6,.5) 100%);
}
.cn-grain {
  z-index: 4; display: block; opacity: .05;
}
.cn-spot {
  z-index: 4; inset: auto; top: 0; left: 0; width: 62vmax; height: 62vmax;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, rgba(192,238,89,.14), transparent 62%);
}
/* keep the nav crisp above the ambient overlays */
.site-header { position: relative; z-index: 6; }

/* ============================================================
 * Full-bleed cinematic hero
 * ============================================================ */
.cn-hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
  background: #050507 url("/og-image-v3.png?v=20260621") center/cover no-repeat;
}
.cn-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0; will-change: transform;
}
.cn-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 28%, rgba(192,238,89,.14), transparent 68%),
    radial-gradient(55% 55% at 12% 92%, rgba(192,238,89,.08), transparent 70%),
    linear-gradient(180deg, rgba(5,5,8,.42) 0%, rgba(5,5,8,.72) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(4,4,7,.7) 100%);
}
/* letterbox scoped to the hero, never covers the nav */
.cn-hero__lb {
  position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 4;
  pointer-events: none; transition: height 1.1s cubic-bezier(.7,0,.2,1);
}
.cn-hero__lb.t { top: 0; } .cn-hero__lb.b { bottom: 0; }
body.cn-rolling .cn-hero__lb { height: 7vh; }

.cn-hero__hud {
  position: absolute; right: clamp(16px, 4vw, 44px); top: calc(7vh + 22px); z-index: 5;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .16em;
  color: var(--color-ink-soft); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 1s .6s;
}
body.cn-rolling .cn-hero__hud { opacity: 1; }
.cn-hero__rec {
  width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d; animation: cn-rec 1.4s infinite;
}
@keyframes cn-rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.cn-hero__inner {
  position: relative; z-index: 5; width: 100%;
  max-width: var(--container-max); margin: 0 auto;
  padding: calc(7vh + 40px) clamp(20px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: flex-start;
  will-change: transform, opacity;
}
.cn-hero__inner .eyebrow { margin-top: 4px; }

/* kinetic headline */
.cn-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 10vw, 7rem); line-height: .92; letter-spacing: -.035em;
  margin: 0 0 26px; max-width: 15ch; text-wrap: balance; color: var(--color-ink);
}
.cn-title .cn-line { display: block; overflow: hidden; padding-bottom: .05em; }
.cn-title .cn-w { display: block; transform: translateY(115%); }
.cn-title em {
  font-family: var(--font-italic); font-style: italic; font-weight: 400;
  color: var(--color-accent); font-size: 1.04em;
  text-shadow: 0 0 46px rgba(192,238,89,.34);
}
body.cn-lit .cn-title .cn-w { transform: translateY(0); transition: transform 1s cubic-bezier(.16,1,.3,1); }
body.cn-lit .cn-title .cn-line:nth-child(1) .cn-w { transition-delay: .05s; }
body.cn-lit .cn-title .cn-line:nth-child(2) .cn-w { transition-delay: .18s; }
body.cn-lit .cn-title .cn-line:nth-child(3) .cn-w { transition-delay: .34s; }

/* hero supporting copy rises in after the headline */
.cn-fade { opacity: 0; transform: translateY(16px); transition: opacity .9s, transform .9s; }
body.cn-lit .cn-fade { opacity: 1; transform: none; }
body.cn-lit .cn-fade.d1 { transition-delay: .12s; }
body.cn-lit .cn-fade.d2 { transition-delay: .22s; }
body.cn-lit .cn-fade.d3 { transition-delay: .32s; }

.cn-scrollcue {
  position: absolute; left: 50%; bottom: calc(7vh + 20px); transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--color-muted);
  opacity: 0; transition: opacity 1s 1.1s;
}
body.cn-lit .cn-scrollcue { opacity: 1; }
.cn-scrollcue span { width: 1px; height: 40px; background: linear-gradient(var(--color-accent), transparent); animation: cn-drop 2s infinite; }
@keyframes cn-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
 * Enhance the existing .rv reveals into masked blur-to-sharp
 * (site.js already toggles .rv -> .vis; we only restyle it)
 * ============================================================ */
.rv {
  filter: blur(9px); clip-path: inset(0 0 7% 0);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1),
              filter .9s ease, clip-path .9s ease;
}
.rv.vis { filter: none; clip-path: inset(0 0 0 0); }

/* cinematic framing polish on the existing self-hosted video modules */
.soul__stage, .recap__frame {
  box-shadow: 0 40px 110px rgba(0,0,0,.6), 0 0 0 1px rgba(192,238,89,.10);
}

/* ---- featured-film band (relocated hero reel, cinematic frame) ---- */
.cn-band {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9;
  border: 1px solid rgba(192,238,89,.14); background: #000;
  box-shadow: 0 50px 130px rgba(0,0,0,.6), 0 0 0 1px rgba(192,238,89,.08);
}
.cn-band iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cn-band__lb {
  position: absolute; left: 0; right: 0; height: 6.5%; background: #000; z-index: 2; pointer-events: none;
}
.cn-band__lb.t { top: 0; } .cn-band__lb.b { bottom: 0; }
.cn-band__cap {
  position: absolute; left: 18px; right: 18px; bottom: calc(6.5% + 12px); z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--font-display); pointer-events: none;
}
.cn-band__cap span {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-accent); background: rgba(5,5,8,.82); padding: 4px 9px; border-radius: 4px;
}

/* ============================================================
 * Degradation
 * ============================================================ */
@media (max-width: 900px) {
  .cn-spot { display: none; }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .cn-hero__video { display: none; }        /* poster background shows through */
}
@media (prefers-reduced-motion: reduce) {
  .cn-spot { display: none; }
  .cn-hero__lb { transition: none; }
  .cn-hero__hud, body.cn-rolling .cn-hero__hud { transition: none; }
  .cn-hero__rec { animation: none; }
  .cn-scrollcue span { animation: none; }
  .cn-title .cn-w { transform: none !important; transition: none !important; }
  .cn-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.cn-lit .cn-scrollcue, .cn-scrollcue { opacity: 1; }
  .rv { filter: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* never let the cinematic overlays bleed into print (resource printables) */
@media print {
  .cn-veil, .cn-grain, .cn-spot, .cn-hero__lb { display: none !important; }
  .rv { opacity: 1 !important; filter: none !important; clip-path: none !important; transform: none !important; }
}