/* Ovastack — voyage scrub 10k « La convergence ».
   Monde : trois flux de lumière (compute, stockage, réseau) qui convergent en une plateforme.
   Moteur éprouvé (bandes smoothstep/--k, scrims 4 couches, 5 gates vivantes).
   Design package : docs/design-ovastack-10k.md. Typo : système visuel Cloudbizz (Cerebri Light 300). */

.ovastack-page {
  --ovx-canvas: #050a20;
  --ovx-ink: #edf3fc;
  --ovx-ink-soft: #b9c8e2;
  --ovx-accent: #42bbdf;
  --ovx-accent-soft: #67e0b9;
  --ovx-accent-deep: #567eff;
  --ovx-gradient: var(--cb-accent-gradient);
  --ovx-line: rgba(150, 176, 216, .22);
  --ovx-line-strong: rgba(150, 176, 216, .42);
  --ovx-ease: cubic-bezier(.23, 1, .32, 1);
  --ovx-display: var(--cb-display-font);
  --ovx-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ovx-tshadow: 0 1px 2px rgba(3, 7, 15, .95), 0 3px 12px rgba(3, 7, 15, .78), 0 10px 44px rgba(3, 7, 15, .8);
}

.ovx-hero [hidden],
.ovx-static-hero [hidden] { display: none !important; }

.ovx-hero :where(a, button):focus-visible,
.ovx-static-hero :where(a, button):focus-visible {
  outline: 3px solid var(--ovx-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Le héros scrub épinglé (760vh, film 6 s, 5 bandes) ---------- */
.ovx-hero {
  position: relative;
  height: 760vh;
  background: var(--ovx-canvas);
}

.ovx-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ovx-canvas);
}

.ovx-stage__media {
  position: absolute;
  inset: 0;
  margin: 0;
  background: var(--ovx-canvas);
}

.ovx-stage__media video,
.ovx-stage__media .ovx-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform: translateZ(0);
}

.ovx-stage__media .ovx-poster {
  background-position: center;
  background-size: cover;
}

.ovx-stage__media video {
  opacity: 0;
  transition: opacity 420ms var(--ovx-ease);
}

.ovx-stage.ovx-video-ready .ovx-stage__media video { opacity: 1; }
.ovx-stage.ovx-video-failed .ovx-stage__media video { display: none; }

/* Voile de base : aucune frame brute derrière le texte, les bords restent vivants. */
.ovx-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 92% at 50% 45%, rgba(4, 8, 17, 0) 38%, rgba(4, 8, 17, .58) 100%);
}

.ovx-stage__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-items: center;
  width: min(calc(100% - 96px), 1560px);
  margin-inline: auto;
  padding-top: var(--cb-topbar-h, 100px);
}

.ovx-band {
  grid-area: 1 / 1;
  position: relative;
  max-width: 640px;
  opacity: 0;
  pointer-events: none;
}

.ovx-band.ovx-is-on { pointer-events: auto; }

/* Voile par bande : s'approfondit avec --k, meurt à 76 % pour laisser vivre la mer. */
.ovx-band::before {
  content: "";
  position: absolute;
  inset: -52% -42%;
  z-index: -1;
  pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 1));
  background: radial-gradient(ellipse 64% 58% at 50% 50%, rgba(4, 8, 17, var(--ovx-scrim, .66)) 0%, rgba(4, 8, 17, calc(var(--ovx-scrim, .66) * .85)) 50%, rgba(4, 8, 17, 0) 78%);
}

.ovx-band--right { justify-self: end; }
.ovx-band--center { justify-self: center; text-align: center; transform: translateY(-6vh); }
.ovx-band--center .ovx-sub { margin-inline: auto; }

/* Force du voile, calée sur la pire frame de chaque plage (écume claire, chemin de lumière). */
/* Bande 1 : au départ les trois flux occupent la moitié haute ; le texte vit
   dans le bas-gauche calme (sol sombre), voile renforcé sur le flux bleu. */
.ovx-band[data-band="0"] { --ovx-scrim: .68; align-self: end; padding-bottom: 13vh; }
.ovx-band[data-band="1"] { --ovx-scrim: .7; }
.ovx-band[data-band="2"] { --ovx-scrim: .82; }
.ovx-band[data-band="3"] { --ovx-scrim: .84; }
.ovx-band[data-band="4"] { --ovx-scrim: .7; }

.ovx-band .ovx-kicker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--ovx-accent);
  font-family: var(--ovx-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: var(--ovx-tshadow);
}

.ovx-band--center .ovx-kicker { justify-content: center; }

.ovx-band h2 {
  margin: 0;
  color: var(--ovx-ink);
  font-family: var(--ovx-display);
  font-weight: var(--cb-display-weight);
  font-size: clamp(44px, 4.6vw, 76px);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-shadow: var(--ovx-tshadow);
}

.ovx-band h2 em {
  font-style: normal;
  background: var(--ovx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ovx-band .ovx-sub {
  margin: 20px 0 0;
  max-width: 40ch;
  color: var(--ovx-ink-soft);
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 300;
  letter-spacing: -.018em;
  line-height: 1.55;
  text-shadow: var(--ovx-tshadow);
}

.ovx-band .ovx-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: 12px;
  margin-top: 32px;
  opacity: var(--kb, 0);
  transform: translateY(calc((1 - var(--kb, 0)) * 14px));
}

.ovx-band--center .ovx-cta-row { justify-content: center; }

.ovx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  opacity: var(--kb, 0);
}

.ovx-band--center .ovx-chips { justify-content: center; }

.ovx-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--ovx-line);
  border-radius: 999px;
  background: rgba(8, 15, 28, .55);
  backdrop-filter: blur(10px);
  color: var(--ovx-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(3, 7, 15, .85);
}

.ovx-chips li i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ovx-accent);
  box-shadow: 0 0 8px rgba(66, 187, 223, .8);
}

/* Boutons au-dessus du film : jamais d'ombre de texte sur un label. */
.ovx-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--ovx-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: none;
  cursor: pointer;
  transition: transform 160ms var(--ovx-ease), box-shadow 180ms var(--ovx-ease), border-color 180ms var(--ovx-ease), background-color 180ms var(--ovx-ease);
}

.ovx-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms var(--ovx-ease);
}

.ovx-btn span { white-space: nowrap; }

.ovx-btn--primary {
  color: #051020;
  background: linear-gradient(120deg, #6ce2c0, #42bbdf 55%, #567eff 130%);
  box-shadow: 0 14px 32px rgba(66, 187, 223, .3);
}

.ovx-btn--ghost {
  color: var(--ovx-ink);
  border-color: var(--ovx-line-strong);
  background: rgba(8, 15, 28, .5);
  backdrop-filter: blur(10px);
}

@media (hover: hover) and (pointer: fine) {
  .ovx-btn:hover { transform: translateY(-2px); }
  .ovx-btn:hover svg { transform: translateX(3px); }
  .ovx-btn--primary:hover { box-shadow: 0 18px 38px rgba(66, 187, 223, .42); }
  .ovx-btn--ghost:hover { border-color: var(--ovx-accent); }
}

@media (pointer: coarse) {
  .ovx-btn { min-height: 44px; }
}

/* ---------- Entrées : l'écho du footage, transform + opacity seulement ---------- */
.ovx-w { display: inline-block; white-space: pre; }
.ovx-c { display: inline-block; }

/* (f) drift-down — bande 1 : la pluie tombe, les mots se posent */
.e-drift .ovx-w {
  --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 2.8), 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * -26px));
}

/* (a) scatter — bande 2 : la lumière rassemble les caractères */
.e-scatter .ovx-c,
.e-weave .ovx-c {
  --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 2.6), 1);
  opacity: var(--kc);
  transform: translate(calc((1 - var(--kc)) * var(--jx, 0px)), calc((1 - var(--kc)) * var(--jy, 0px))) rotate(calc((1 - var(--kc)) * var(--jr, 0deg)));
}

/* (c) blur-to-sharp — bande 3 : la brume se lève. Blur STATIQUE, crossfade en opacité. */
.e-blur .ovx-split { position: relative; display: inline-block; }
.e-blur .ovx-soft {
  position: absolute;
  inset: 0;
  filter: blur(10px);
  opacity: calc(1 - var(--k, 0));
}
.e-blur .ovx-sharp { opacity: var(--k, 0); }

/* (d) word-punch — l'énergie frappe */
.e-punch .ovx-w {
  --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 3), 1);
  --ks: clamp(0, calc((var(--k, 0) - var(--th, 0) - .12) * 3), 1);
  opacity: var(--kc);
  transform: scale(calc(.6 + .52 * var(--kc) - .12 * var(--ks)));
}

/* (g) approach-from-depth — bande 4 : la lumière approche */
.e-depth .ovx-w {
  --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 2.8), 1);
  opacity: var(--kc);
  transform: scale(calc(.84 + .16 * var(--kc)));
}

/* (e) rise étagé — le repos : titre, puis lede, puis CTA */
.e-rise .ovx-w {
  --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 3), 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 22px));
}

.e-rise .ovx-sub {
  opacity: var(--ks2, 0);
  transform: translateY(calc((1 - var(--ks2, 0)) * 12px));
}

/* ---------- L'indice de scroll ---------- */
.ovx-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ovx-ink-soft);
  font-family: var(--ovx-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(3, 7, 15, .85);
  transform: translateX(-50%);
  opacity: var(--cue, 1);
  transition: opacity 300ms var(--ovx-ease);
  pointer-events: none;
}

.ovx-cue i {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--ovx-accent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .ovx-cue i { animation: ovx-cue-drop 2.4s var(--ovx-ease) -1.2s infinite; transform-origin: top; }

  @keyframes ovx-cue-drop {
    0% { transform: scaleY(0); }
    45%, 100% { transform: scaleY(1); }
  }
}

body.ovx-paused .ovx-cue i { animation-play-state: paused !important; }

@media (max-height: 560px) {
  .ovx-cue, .ovx-chips { display: none; }
}

/* ---------- Le chargement du film : visible, honnête ---------- */
.ovx-loader {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--ovx-line);
  border-radius: 999px;
  background: rgba(8, 15, 28, .72);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(3, 7, 15, .4);
  color: var(--ovx-ink-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transform: translateX(-50%);
  transition: opacity 420ms var(--ovx-ease), transform 420ms var(--ovx-ease), right 420ms var(--ovx-ease), bottom 420ms var(--ovx-ease);
  pointer-events: none;
}

.ovx-loader svg { width: 22px; height: 22px; transform: rotate(-90deg); flex: none; }
.ovx-loader svg circle { fill: none; stroke-width: 4; }
.ovx-loader .ovx-loader__track { stroke: rgba(150, 176, 216, .25); }
.ovx-loader .ovx-loader__fill { stroke: var(--ovx-accent); stroke-linecap: round; }
.ovx-loader b { color: var(--ovx-ink); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }

.ovx-loader--docked {
  left: auto;
  right: 20px;
  bottom: 20px;
  transform: translateX(0) scale(.94);
}

.ovx-stage.ovx-video-ready .ovx-loader { opacity: 0; visibility: hidden; transition: opacity 420ms var(--ovx-ease), visibility 0s 420ms; }
.ovx-stage.ovx-video-failed .ovx-loader { display: none; }
.ovx-stage:not(.ovx-video-ready):not(.ovx-video-failed) .ovx-cue { opacity: 0; }

/* ---------- Le héros statique (téléphones, portrait, reduced motion) ---------- */
.ovx-static-hero {
  display: none;
  position: relative;
  min-height: 92svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ovx-canvas);
}

.ovx-static-hero .ovx-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
}

.ovx-static-hero .ovx-veil {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 8, 17, .88) 0%, rgba(4, 8, 17, .68) 40%, rgba(4, 8, 17, .28) 70%, rgba(4, 8, 17, .12) 100%),
    linear-gradient(0deg, rgba(4, 8, 17, .82) 0%, rgba(4, 8, 17, 0) 44%);
}

.ovx-static-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(calc(100% - 48px), 1560px);
  min-height: 92svh;
  margin-inline: auto;
  padding: calc(var(--cb-topbar-h, 100px) + 20px) 0 56px;
}

.ovx-static-copy .ovx-kicker {
  margin: 0 0 16px;
  color: var(--ovx-accent);
  font-family: var(--ovx-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ovx-static-title {
  margin: 0;
  max-width: 640px;
  color: var(--ovx-ink);
  font-family: var(--ovx-display);
  font-weight: var(--cb-display-weight);
  font-size: clamp(40px, 8.4vw, 70px);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
}

.ovx-static-title em {
  font-style: normal;
  background: var(--ovx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ovx-static-copy .ovx-lede {
  margin: 18px 0 0;
  max-width: 46ch;
  color: var(--ovx-ink-soft);
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 300;
  letter-spacing: -.018em;
  line-height: 1.55;
}

.ovx-static-copy .ovx-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.ovx-static-copy .ovx-chips { opacity: 1; }


/* ---------- Les cinq gates — chaînes identiques dans ovastack-scrub.js ---------- */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  .ovx-hero { display: none; }
  .ovx-static-hero { display: block; }
}

/* ---------- La bande de confiance conservée sous le héros ---------- */
.ovx-trust-band {
  position: relative;
  z-index: 1;
  padding: 30px 0 6px;
  background: var(--ovx-canvas);
}

/* Le sticky du héros exige qu'aucun ancêtre ne clippe l'axe vertical :
   main.ovastack-main portait overflow:hidden (héros historique). clip horizontal conservé. */
.ovastack-page main.ovastack-main {
  overflow: visible;
  overflow-x: clip;
}