/* Serenia — voyage scrub 10k « La mer qui s'apaise ».
   Monde : mer nocturne qui s'apaise, grade bleu -> cyan -> écume (dégradé canonique Cloudbizz).
   Moteur éprouvé (bandes smoothstep/--k, scrims 4 couches, 5 gates vivantes).
   Design package : docs/design-serenia-10k.md. Typo : système visuel Cloudbizz (Cerebri Light 300). */

.serenity-page {
  --srx-canvas: #06101f;
  --srx-ink: #edf3fc;
  --srx-ink-soft: #b9c8e2;
  --srx-accent: #42bbdf;
  --srx-accent-soft: #67e0b9;
  --srx-accent-deep: #567eff;
  --srx-gradient: var(--cb-accent-gradient);
  --srx-line: rgba(150, 176, 216, .22);
  --srx-line-strong: rgba(150, 176, 216, .42);
  --srx-ease: cubic-bezier(.23, 1, .32, 1);
  --srx-display: var(--cb-display-font);
  --srx-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --srx-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);
}

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

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

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

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

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

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

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

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

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

/* Voile de base : aucune frame brute derrière le texte, les bords restent vivants. */
.srx-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%);
}

.srx-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);
}

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

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

/* Voile par bande : s'approfondit avec --k, meurt à 76 % pour laisser vivre la mer. */
.srx-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 62% 56% at 50% 50%, rgba(4, 8, 17, var(--srx-scrim, .66)) 0%, rgba(4, 8, 17, calc(var(--srx-scrim, .66) * .68)) 46%, rgba(4, 8, 17, 0) 76%);
}

.srx-band--right { justify-self: end; }
.srx-band--center { justify-self: center; text-align: center; }
.srx-band--center .srx-sub { margin-inline: auto; }

/* Force du voile, calée sur la pire frame de chaque plage (écume claire, chemin de lumière). */
.srx-band[data-band="0"] { --srx-scrim: .6; }
.srx-band[data-band="1"] { --srx-scrim: .66; }
.srx-band[data-band="2"] { --srx-scrim: .64; }
.srx-band[data-band="3"] { --srx-scrim: .66; }
.srx-band[data-band="4"] { --srx-scrim: .7; }

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

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

.srx-band h2 {
  margin: 0;
  color: var(--srx-ink);
  font-family: var(--srx-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(--srx-tshadow);
}

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

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

.srx-band .srx-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));
}

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

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

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

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

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

/* Boutons au-dessus du film : jamais d'ombre de texte sur un label. */
.srx-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(--srx-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: none;
  cursor: pointer;
  transition: transform 160ms var(--srx-ease), box-shadow 180ms var(--srx-ease), border-color 180ms var(--srx-ease), background-color 180ms var(--srx-ease);
}

.srx-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(--srx-ease);
}

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

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

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

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

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

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

/* (f) drift-down — bande 1 : la pluie tombe, les mots se posent */
.e-drift .srx-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 .srx-c,
.e-weave .srx-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 .srx-split { position: relative; display: inline-block; }
.e-blur .srx-soft {
  position: absolute;
  inset: 0;
  filter: blur(10px);
  opacity: calc(1 - var(--k, 0));
}
.e-blur .srx-sharp { opacity: var(--k, 0); }

/* (d) word-punch — l'énergie frappe */
.e-punch .srx-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 .srx-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 .srx-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 .srx-sub {
  opacity: var(--ks2, 0);
  transform: translateY(calc((1 - var(--ks2, 0)) * 12px));
}

/* ---------- L'indice de scroll ---------- */
.srx-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--srx-ink-soft);
  font-family: var(--srx-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(--srx-ease);
  pointer-events: none;
}

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

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

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

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

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

/* ---------- Le chargement du film : visible, honnête ---------- */
.srx-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(--srx-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(--srx-ink-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transform: translateX(-50%);
  transition: opacity 420ms var(--srx-ease), transform 420ms var(--srx-ease), right 420ms var(--srx-ease), bottom 420ms var(--srx-ease);
  pointer-events: none;
}

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

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

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

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

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

.srx-static-hero .srx-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%);
}

.srx-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;
}

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

.srx-static-title {
  margin: 0;
  max-width: 640px;
  color: var(--srx-ink);
  font-family: var(--srx-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);
}

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

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

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

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

.srx-static-copy .srx-reassurance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  color: var(--srx-ink-soft);
  font-size: 13.5px;
}

.srx-static-copy .srx-reassurance svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--srx-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Les cinq gates — chaînes identiques dans serenia-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) {
  .srx-hero { display: none; }
  .srx-static-hero { display: block; }
}