/* ==========================================================================
   Batho Pele Group — cinematic layer
   Loads AFTER bpg.css. Additive only: reads the design-system tokens, never
   redefines them. Everything is gated behind html.cine (set by cinema.js),
   so with JavaScript off the site renders exactly as before.
   ========================================================================== */

:root {
  --cine-night: #0a0b26;
  --cine-night-2: #11133a;
  --cine-glow-a: rgba(74, 77, 176, 0.55);
  --cine-glow-b: rgba(143, 147, 232, 0.22);
  --cine-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cine-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------ the stage */
/* Stage = the home hero and every inner page head. Turned to night. */

html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) {
  background:
    radial-gradient(120% 90% at 72% 8%, var(--surface-dark-raised) 0%, var(--cine-night) 58%, #07081d 100%);
  color: var(--ink-on-dark-body);
  border-bottom-color: var(--line-dark);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1001px) {
  html.cine #main > .bpg-section:first-child:not(.bpg-pagehead) {
    min-height: calc(100svh - 76px);
    display: grid;
    align-content: center;
  }
}

/* aurora */
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead, .bpg-section--dark)::before {
  content: "";
  position: absolute; inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 70% 30%, var(--cine-glow-a), transparent 70%),
    radial-gradient(30% 30% at 22% 78%, var(--cine-glow-b), transparent 70%),
    radial-gradient(26% 24% at 88% 82%, rgba(46, 49, 146, 0.45), transparent 70%);
  filter: blur(40px);
  animation: cine-aurora 22s var(--cine-ease-io) infinite alternate;
}
html.cine .bpg-section--dark { isolation: isolate; overflow: hidden; }

/* film grain + vignette */
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead)::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(3, 4, 18, 0.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.09;
  mix-blend-mode: screen;
  animation: cine-grain 0.9s steps(4) infinite;
}

/* slow-drifting lattice */
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead, .bpg-section--dark) .bpg-lattice svg {
  animation: cine-drift 46s linear infinite alternate;
}
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-lattice__cell { stroke: var(--hex-lattice-on-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) > .bpg-container { position: relative; z-index: 1; }

/* ------------------------------------------ stage: dark-ground type */

html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) :is(.bpg-display, .bpg-h1, .bpg-h2, .bpg-h3, .bpg-subhead) { color: var(--ink-on-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) :is(.bpg-lede, .bpg-text, .bpg-text-sm) { color: var(--ink-on-dark-body); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-caption { color: var(--ink-on-dark-muted); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-eyebrow { color: var(--brand-300); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-rule { background: var(--brand-300); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-arrow { color: var(--ink-on-dark); border-color: var(--brand-300); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-pill { border-color: var(--line-dark); color: var(--ink-on-dark-muted); background: transparent; }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-specs li { color: var(--ink-on-dark-body); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-specs li::before { background: var(--brand-300); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-crumb,
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-crumb span { color: var(--ink-on-dark-muted); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-crumb a { color: var(--ink-on-dark-body); border-color: var(--line-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-crumb a:hover { color: var(--ink-on-dark); border-color: var(--brand-300); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) :focus-visible { outline-color: var(--focus-ring-on-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-hex:not(.bpg-plate .bpg-hex) { background: var(--brand-100); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-hex:not(.bpg-plate .bpg-hex) .bpg-hex__num { color: var(--brand-700); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-hex:not(.bpg-plate .bpg-hex) .bpg-hex__icon { stroke: var(--brand-700); }

/* stage stats strip (if a page head carries one) */
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-stats { background: var(--line-dark); border-color: var(--line-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-stats__cell { background: var(--surface-dark-raised); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-stats__figure { color: var(--ink-on-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-stats__label { color: var(--ink-on-dark-muted); }

/* stage buttons */
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-btn--primary {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  border-color: rgba(143, 147, 232, 0.45);
  box-shadow: 0 0 0 1px rgba(143, 147, 232, 0.15), 0 10px 40px rgba(74, 77, 176, 0.45);
}
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-btn--primary:hover {
  background: linear-gradient(180deg, #5a5dc4, var(--brand-500));
  box-shadow: 0 0 0 1px rgba(143, 147, 232, 0.35), 0 14px 54px rgba(74, 77, 176, 0.7);
}
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-btn--ghost {
  color: var(--ink-on-dark); border-color: var(--brand-500); background: rgba(255, 255, 255, 0.02);
}
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-btn--ghost:hover {
  background: var(--surface-dark-raised); border-color: var(--brand-300); color: var(--ink-on-dark);
}

/* stage figure plate -> lit glass panel */
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-plate {
  background: linear-gradient(160deg, rgba(29, 32, 84, 0.92), rgba(17, 19, 58, 0.88));
  border-color: rgba(143, 147, 232, 0.22);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 80px rgba(74, 77, 176, 0.25);
  backdrop-filter: blur(6px);
}
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-plate__caption { border-top-color: var(--line-dark); color: var(--ink-on-dark-muted); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .ln { stroke: var(--brand-500); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .ln-strong { stroke: var(--brand-300); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .ln-hair { stroke: var(--hex-lattice-on-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .fl { fill: var(--brand-100); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .fl-soft { fill: var(--brand-500); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig :is(.fl-tint, .fl-page) { fill: var(--surface-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .tx { fill: var(--ink-on-dark-muted); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .tx-strong { fill: var(--ink-on-dark); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .tx-on-fill { fill: var(--brand-700); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .ic { stroke: var(--brand-700); }
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .ic-soft { stroke: var(--ink-on-dark); }

/* energy flowing through the process lines */
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig :is(path, line, polyline):is(.ln, .ln-strong) {
  stroke-dasharray: 5 7;
  animation: cine-flow 2.4s linear infinite;
}
html.cine :is(#main > .bpg-section:first-child, .bpg-pagehead) .bpg-fig .fl {
  filter: drop-shadow(0 0 6px rgba(143, 147, 232, 0.55));
}

/* scroll cue */
.cine-cue {
  position: absolute; left: 50%; bottom: var(--space-8);
  z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  text-decoration: none;
  opacity: 0;
  animation: cine-fade 1s var(--cine-ease) 2.2s forwards;
}
.cine-cue::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(var(--brand-300), transparent);
  transform-origin: top;
  animation: cine-cue 2.2s var(--cine-ease-io) infinite;
}
.cine-cue:hover { color: var(--ink-on-dark); }
@media (max-width: 1000px), (max-height: 700px) { .cine-cue { display: none; } }

/* ------------------------------------------------- opening title card */

.cine-curtain {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: auto;
  cursor: pointer;
}
.cine-curtain__bar {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: #05061a;
  transition: transform 1.1s var(--cine-ease-io);
}
.cine-curtain__bar--top { top: 0; }
.cine-curtain__bar--bottom { bottom: 0; }
.cine-curtain__title {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: var(--space-5);
  transition: opacity 0.5s ease, transform 1s var(--cine-ease);
}
.cine-curtain__mark {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  background: var(--surface-page);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  opacity: 0; transform: scale(0.86);
  animation: cine-mark 1s var(--cine-ease) 0.15s forwards;
  box-shadow: 0 0 60px rgba(143, 147, 232, 0.6);
}
.cine-curtain__mark img { width: 56px; height: auto; }
.cine-curtain__line {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  opacity: 0;
  animation: cine-track 1.3s var(--cine-ease) 0.45s forwards;
}
.cine-curtain__rule {
  width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-300), transparent);
  transform: scaleX(0);
  animation: cine-grow 1s var(--cine-ease) 0.6s forwards;
}
.cine-curtain.is-open .cine-curtain__title { opacity: 0; transform: scale(1.06); }
.cine-curtain.is-open .cine-curtain__bar--top { transform: translateY(-100%); }
.cine-curtain.is-open .cine-curtain__bar--bottom { transform: translateY(100%); }
.cine-curtain.is-open { pointer-events: none; }

/* --------------------------------------------- hero entrance choreography */

html.cine .cine-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
html.cine .cine-word > span {
  display: inline-block;
  transform: translateY(105%);
  filter: blur(6px);
  opacity: 0;
}
html.cine.cine-play .cine-word > span {
  animation: cine-word 1.1s var(--cine-ease) forwards;
  animation-delay: calc(var(--cine-delay, 0s) + var(--w, 0) * 70ms);
}

html.cine .cine-in { opacity: 0; transform: translateY(18px); filter: blur(4px); }
html.cine.cine-play .cine-in {
  animation: cine-rise 1.1s var(--cine-ease) forwards;
  animation-delay: calc(var(--cine-delay, 0s) + var(--d, 0) * 1ms);
}
html.cine .cine-in.bpg-rule { transform: scaleX(0); transform-origin: left; filter: none; }
html.cine.cine-play .cine-in.bpg-rule { animation-name: cine-grow-rule; }
html.cine .cine-in.bpg-plate { transform: translateY(40px) rotateX(10deg) scale(0.97); }
html.cine.cine-play .cine-in.bpg-plate { animation: cine-plate 1.6s var(--cine-ease) forwards; animation-delay: calc(var(--cine-delay, 0s) + var(--d, 0) * 1ms); }

/* tilt (set by JS) */
.cine-tilt { transform-style: preserve-3d; will-change: transform; transition: transform 0.6s var(--cine-ease); }
.cine-tilt-wrap { perspective: 1400px; }

/* ----------------------------------------------------- scroll reveals */

html.cine .cine-reveal {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition:
    opacity 1s var(--cine-ease),
    transform 1.2s var(--cine-ease),
    filter 1s var(--cine-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.cine .cine-reveal.is-in { opacity: 1; transform: none; filter: none; }
html.cine .bpg-rule.cine-reveal { transform: scaleX(0); transform-origin: left; filter: none; }
html.cine .bpg-head--center .bpg-rule.cine-reveal, html.cine .bpg-center .bpg-rule.cine-reveal { transform-origin: center; }
html.cine .bpg-rule.cine-reveal.is-in { transform: none; }

/* process steps: the top rule draws across as the step arrives */
html.cine .bpg-step.cine-reveal { border-top-color: transparent; }
html.cine .bpg-step.cine-reveal::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--border-rule) * -1);
  height: var(--border-rule); background: var(--brand-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--cine-ease); transition-delay: calc(var(--i, 0) * 90ms + 200ms);
}
html.cine .bpg-section--dark .bpg-step.cine-reveal::before { background: var(--brand-500); }
html.cine .bpg-step.cine-reveal.is-in::before { transform: none; }

/* ------------------------------------------------ light on the cards */

html.cine :is(.bpg-sector, .bpg-card--link, .bpg-card) { --mx: 50%; --my: 0%; }
html.cine :is(.bpg-sector, .bpg-card--link)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(74, 77, 176, 0.12), transparent 60%);
  transition: opacity 0.4s ease;
}
html.cine .bpg-sector { position: relative; }
html.cine :is(.bpg-sector, .bpg-card--link):hover::after { opacity: 1; }
html.cine :is(.bpg-sector, .bpg-card--link) {
  transition: border-color 0.4s ease, box-shadow 0.6s var(--cine-ease), transform 0.6s var(--cine-ease), opacity 1s var(--cine-ease), filter 1s var(--cine-ease);
}
html.cine :is(.bpg-sector, .bpg-card--link):hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(20, 22, 63, 0.06), 0 24px 60px rgba(20, 22, 63, 0.14);
}
html.cine .bpg-sector__figure { overflow: hidden; }
html.cine .bpg-sector__figure svg { transition: transform 1.2s var(--cine-ease); }
html.cine .bpg-sector:hover .bpg-sector__figure svg { transform: scale(1.05); }

html.cine .bpg-card--dark { transition: border-color 0.4s ease, box-shadow 0.6s ease; }
html.cine .bpg-card--dark:hover { border-color: var(--brand-500); box-shadow: 0 0 60px rgba(74, 77, 176, 0.25); }

html.cine .bpg-section--dark .bpg-hex--on-dark { filter: drop-shadow(0 0 14px rgba(143, 147, 232, 0.35)); }

/* buttons everywhere get a soft light sweep */
html.cine .bpg-btn { position: relative; overflow: hidden; isolation: isolate; }
html.cine .bpg-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--cine-ease);
}
html.cine .bpg-btn:hover::after { transform: translateX(120%); }

/* ------------------------------------------------------- the chrome */

.cine-progress {
  position: fixed; left: 0; top: 0; z-index: 120;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-300));
  box-shadow: 0 0 12px rgba(143, 147, 232, 0.8);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
html.cine .bpg-nav { transition: box-shadow 0.4s ease, background-color 0.4s ease; }
html.cine .bpg-nav.cine-scrolled { box-shadow: 0 10px 40px rgba(20, 22, 63, 0.08); background: rgba(255, 255, 255, 0.86); }

/* ---------------------------------------------------------- keyframes */

@keyframes cine-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-5%, 4%, 0) rotate(-6deg) scale(1.02); }
}
@keyframes cine-grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); }
}
@keyframes cine-drift { from { transform: translate3d(0, 0, 0) scale(1.02); } to { transform: translate3d(-3%, 2%, 0) scale(1.08); } }
@keyframes cine-flow { to { stroke-dashoffset: -48; } }
@keyframes cine-fade { to { opacity: 1; } }
@keyframes cine-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes cine-mark { to { opacity: 1; transform: scale(1); } }
@keyframes cine-track { from { opacity: 0; letter-spacing: 0.8em; } to { opacity: 1; letter-spacing: 0.42em; } }
@keyframes cine-grow { to { transform: scaleX(1); } }
@keyframes cine-grow-rule { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes cine-word { to { transform: none; filter: none; opacity: 1; } }
@keyframes cine-rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes cine-plate { to { opacity: 1; transform: none; filter: none; } }

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html.cine *, html.cine *::before, html.cine *::after { animation: none !important; }
  html.cine :is(.cine-word > span, .cine-in, .cine-reveal) { opacity: 1 !important; transform: none !important; filter: none !important; }
  html.cine .bpg-step.cine-reveal { border-top-color: var(--brand-600); }
  html.cine .bpg-step.cine-reveal::before { display: none; }
  .cine-curtain, .cine-cue { display: none !important; }
}

@media print {
  .cine-curtain, .cine-progress, .cine-cue { display: none !important; }
  html.cine :is(.cine-word > span, .cine-in, .cine-reveal) { opacity: 1 !important; transform: none !important; filter: none !important; }
}