/* Cinematic layer — consumes --sv / --sv-abs / --sp / --p from cinematic-scroll.js.
   Everything here degrades to static under .cinematic-static (reduced motion). */

/* ---------- global film treatment ---------- */
.cinematic body::after {
  /* vignette */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.42) 100%);
}

.grain-overlay {
  position: fixed;
  inset: -100px;
  pointer-events: none;
  z-index: 61;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-38px, 22px); }
  50% { transform: translate(24px, -30px); }
  75% { transform: translate(-16px, -18px); }
  100% { transform: translate(0, 0); }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 70;
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, #0175ff, #ffac0a);
  opacity: 0.9;
}

/* ---------- velocity-driven motion ---------- */
.cinematic .fx-skew {
  transform: skewY(calc(var(--sv, 0) * -0.7deg));
}
.cinematic .fx-drift {
  transform: translate3d(calc(var(--sv, 0) * -26px), 0, 0);
}
.cinematic .marquee { transform: translate3d(calc(var(--sv, 0) * -48px), 0, 0); }

/* ---------- scroll-scrubbed section choreography ---------- */
[data-scrub] { --p: 0; --p-para: 0; }

/* masked wipe-in for section heads: clip opens as the section enters */
.cinematic .scrub-mask {
  clip-path: inset(calc((1 - var(--p)) * 62%) 0 0 0);
  opacity: calc(0.25 + var(--p) * 0.75);
}

/* parallax layers: children move at different rates through the viewport */
.cinematic .scrub-parallax-slow { transform: translate3d(0, calc((var(--p-para, 0) - 0.5) * -46px), 0); }
.cinematic .scrub-parallax-fast { transform: translate3d(0, calc((var(--p-para, 0) - 0.5) * 58px), 0); }

/* type that tracks in from below with the scrub, not a one-shot reveal */
.cinematic .scrub-rise {
  transform: translate3d(0, calc((1 - var(--p)) * 42px), 0);
  opacity: calc(var(--p) * 1.4 - 0.15);
}

/* ---------- hero ----------
   The hero is a real-time WebGL canvas (js/hero-scene.js); its base styles
   live in styles.css. Nothing here transforms or filters it per scroll —
   the camera itself is the scroll effect. */

/* ---------- static fallback ---------- */
.cinematic-static .grain-overlay,
.cinematic-static .scroll-progress { display: none; }
.cinematic-static .fx-skew,
.cinematic-static .fx-drift,
.cinematic-static .marquee,
.cinematic-static .scrub-mask,
.cinematic-static .scrub-rise,
.cinematic-static .scrub-parallax-slow,
.cinematic-static .scrub-parallax-fast { transform: none; clip-path: none; opacity: 1; }

/* ---------- COSMOQ alignment pass ---------- */
/* Hero composition itself lives in styles.css (asymmetric, left-anchored).
   This layer only adds the glow treatment. */
.cinematic .hero-actions .btn-primary {
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(140, 190, 255, 0.55),
              0 0 22px rgba(1, 117, 255, 0.5),
              0 0 60px rgba(1, 117, 255, 0.28);
}
.cinematic .hero-actions .btn-ghost { border-radius: 999px; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #c9d6ee;
}
.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffac0a;
  box-shadow: 0 0 10px #ffac0a;
}

/* giant statement type band */
.section-statement { padding: 18vh 0 14vh; }
.statement-type {
  margin: 0;
  font-size: clamp(2.1rem, 1.4rem + 4.6vw, 5.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #e8edf6;
  text-wrap: balance;
}
.st-dim { color: #7d8fb2; }
.st-amber { color: #ffac0a; }

/* gradient industry orbs */
.orb-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 64px);
  padding: 4vh 0 8vh;
  flex-wrap: wrap;
}
.orb {
  width: clamp(130px, 20vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset -18px -26px 60px rgba(0, 0, 0, 0.55),
              0 24px 80px rgba(0, 0, 0, 0.5);
}
.orb span {
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 500;
  color: #f4f7fd;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.orb-a { background: radial-gradient(circle at 32% 26%, #ffc46a 0%, #c67a2c 30%, #274b8f 66%, #0a1428 100%); }
.orb-b { background: radial-gradient(circle at 68% 24%, #7db4ff 0%, #2c62c9 34%, #12305e 68%, #060b18 100%); }
.orb-c { background: radial-gradient(circle at 40% 70%, #ffb35c 0%, #8a5a22 36%, #1d3a6e 70%, #08101f 100%); }
.orb-d { background: radial-gradient(circle at 60% 64%, #9cc4ff 0%, #3a6fd8 32%, #7a4d18 70%, #0a0f1c 100%); }