/* ==========================================================================
   Cloudbizz — page d'accueil : couche de motion design graphique
   --------------------------------------------------------------------------
   But          : donner à la home la même grammaire de « reel » animé que
                  /ovastack.html, /serenia.html et /cloudbizz-voice.html, sans
                  toucher au contenu, aux traductions ni au SEO de la page.
   Référence    : hero cinématique de la home (styles de `story-cinematic.css`)
                  + chrome de reel d'Ovastack (rail de chapitres, bouton pause).
   Géométrie    : chaque section hôte reçoit `.cbm-host` (position: relative) et
                  un `<canvas class="cbm-stage">` en z-index 0 ; les blocs de
                  contenu existants sont remontés en z-index 2. Aucun contenu
                  n'est déplacé : la composition de la page est préservée.
   Typographie  : aucune règle de titre ici — c'est une couche de chrome et de
                  graphisme. Les tailles, graisses et interlettrages des titres
                  restent portés par `styles.css` et `story-cinematic.css`.
                  L'audit `audit-visual-system.mjs` exige les tokens display
                  dans toute feuille ciblée : il ne s'applique pas à cette
                  feuille, qui ne style que des libellés de composant (rail,
                  bouton pause). Contrôler la typographie de la home sur
                  `story-cinematic.css` et `home-10k.css`.
   Palette      : dégradé canonique #567eff → #42bbdf → #67e0b9 uniquement.
   Mouvement    : `prefers-reduced-motion` et le bouton pause (WCAG 2.2.2)
                  figent toutes les scènes ; sans JS, la page reste complète.
   ========================================================================== */

:root {
  --cbm-ink: var(--cb-display-ink-dark, #cbd7eb);
  --cbm-ink-soft: rgba(203, 215, 234, .62);
  --cbm-line: rgba(135, 166, 214, .26);
  --cbm-surface: rgba(8, 14, 28, .72);
  --cbm-accent: #42bbdf;
  --cbm-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   1. Scènes — calque graphique derrière chaque section
   -------------------------------------------------------------------------- */

.cbm-host { position: relative; }

.cbm-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s var(--cbm-ease);
}

.cbm-stage.is-live { opacity: 1; }

/* Sans JavaScript, aucun canvas n'est peint : on n'affiche pas de cadre vide. */
html:not(.cbm-motion) .cbm-stage { display: none; }

/* Les blocs de contenu existants restent au-dessus du calque graphique.
   (story-cinematic.css:3565 leur donne deja z-index 1 ; on passe a 2.) */
.cbm-host > .story-shell,
.cbm-host > .priority-showcase,
.cbm-host > .h10-thread--intro,
.cbm-host > .h10-link,
.cbm-host > .h10-caps__intro,
.cbm-host > .h10-caps__rail,
.cbm-host > .h10-eco__intro,
.cbm-host > .h10-eco__belt,
.cbm-host > .h10-eco__cta {
  position: relative;
  z-index: 2;
}

/* La hero possède déjà ses propres calques en z-index 1 : le canvas se glisse
   entre les fibres WebGL (z-index 0, plus haut dans le DOM) et le contenu. */
.story-page--cinematic .story-hero > .cbm-stage { z-index: 0; }

/* story-cinematic.css remet TOUS les enfants de section en `position: relative`
   (`#main > section:not(.story-hero) > *`, spécificité 1-2-1). Sans ce rappel
   plus spécifique, chaque canvas repasserait dans le flux et ajouterait une
   hauteur de viewport de vide à sa section. */
.story-page--cinematic #main > section.cbm-host > .cbm-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   2. Entrée cinétique — hero (jamais de contenu masqué sans JavaScript)
   --------------------------------------------------------------------------
   L'état par défaut est l'état final : l'animation n'existe que lorsque le
   moteur a ajouté `.cbm-cinema` ET marqué le bloc comme joué. Si le script
   échoue ou si le mouvement est réduit, la hero reste lisible telle quelle.
   -------------------------------------------------------------------------- */

@keyframes cbm-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes cbm-rise-soft {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.cbm-cinema [data-cbm-kinetic].is-played > * {
  animation: cbm-rise .86s var(--cbm-ease) both;
  animation-delay: calc(var(--cbm-step, 90ms) * var(--cbm-i, 0));
}

.cbm-cinema [data-cbm-kinetic].is-played > *:nth-child(1) { --cbm-i: 0; }
.cbm-cinema [data-cbm-kinetic].is-played > *:nth-child(2) { --cbm-i: 1; }
.cbm-cinema [data-cbm-kinetic].is-played > *:nth-child(3) { --cbm-i: 2; }
.cbm-cinema [data-cbm-kinetic].is-played > *:nth-child(4) { --cbm-i: 3; }
.cbm-cinema [data-cbm-kinetic].is-played > *:nth-child(5) { --cbm-i: 4; }
.cbm-cinema [data-cbm-kinetic].is-played > *:nth-child(6) { --cbm-i: 5; }

/* Le H1 se révèle ligne par ligne, sous le même ressort. */
.cbm-cinema .story-hero__copy[data-cbm-kinetic].is-played h1 .story-title__line {
  animation: cbm-rise .94s var(--cbm-ease) both;
}
.cbm-cinema .story-hero__copy[data-cbm-kinetic].is-played h1 .story-title__line:nth-child(1) { animation-delay: .16s; }
.cbm-cinema .story-hero__copy[data-cbm-kinetic].is-played h1 .story-title__line:nth-child(2) { animation-delay: .26s; }
.cbm-cinema .story-hero__copy[data-cbm-kinetic].is-played h1 .story-title__line:nth-child(3) { animation-delay: .36s; }
.cbm-cinema .story-hero__copy[data-cbm-kinetic].is-played h1 .story-title__line:nth-child(4) { animation-delay: .46s; }

/* Les preuves de la hero arrivent en dernier, une par une. */
.cbm-cinema .story-hero__trust[data-cbm-kinetic].is-played > * {
  animation: cbm-rise-soft .72s var(--cbm-ease) both;
  animation-delay: calc(.52s + var(--cbm-i, 0) * 70ms);
}

/* --------------------------------------------------------------------------
   3. Rail de chapitres — repère de lecture du reel
   -------------------------------------------------------------------------- */

.cbm-rail {
  position: fixed;
  top: 50%;
  right: max(12px, calc((100vw - 1520px) / 2 - 46px));
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .5s var(--cbm-ease);
}

.cbm-motion .cbm-rail { opacity: 0; pointer-events: none; }
/* Le rail n'apparaît qu'une fois la hero passée : le H1 occupe toute la largeur.
   Au clavier, il réapparaît dès qu'un de ses liens reçoit le focus. */
.cbm-motion .cbm-rail.is-visible,
.cbm-motion .cbm-rail:focus-within { opacity: 1; pointer-events: auto; }

.cbm-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  /* Panneau discret : le rail reste lisible au-dessus des bandeaux pleine largeur. */
  padding: 7px 3px;
  border: 1px solid rgba(135, 166, 214, .12);
  border-radius: 15px;
  background: rgba(6, 11, 22, .52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  list-style: none;
}

.cbm-rail__list a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  color: var(--cbm-ink-soft);
  text-decoration: none;
  transition: color .3s var(--cbm-ease), background .3s var(--cbm-ease);
}

.cbm-rail__label {
  max-width: 0;
  overflow: hidden;
  font-family: var(--cb-display-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .42s var(--cbm-ease), opacity .3s var(--cbm-ease);
}

.cbm-rail__num {
  font-family: var(--cb-display-font);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  opacity: .62;
}

.cbm-rail__tick {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .42;
  transition: width .36s var(--cbm-ease), opacity .3s var(--cbm-ease);
}

.cbm-rail__list a:hover,
.cbm-rail__list a:focus-visible {
  color: #eef4ff;
  background: rgba(255, 255, 255, .06);
}

.cbm-rail:hover .cbm-rail__label,
.cbm-rail:focus-within .cbm-rail__label {
  max-width: 190px;
  opacity: 1;
}

.cbm-rail__list a[aria-current="true"] {
  color: #eef4ff;
}

.cbm-rail__list a[aria-current="true"] .cbm-rail__tick {
  width: 24px;
  opacity: 1;
  background: var(--cb-accent-gradient);
}

.cbm-rail__list a[aria-current="true"] .cbm-rail__num { opacity: 1; }

.cbm-rail__progress {
  position: relative;
  width: 2px;
  height: 62px;
  margin: 6px 10px 0 0;
  border-radius: 2px;
  background: rgba(135, 166, 214, .22);
  overflow: hidden;
}

.cbm-rail__progress i {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--cb-accent-gradient);
  transform: scaleY(var(--cbm-progress, 0));
  transform-origin: top center;
}

.cbm-rail__tc {
  margin-right: 4px;
  font-family: var(--cb-display-font);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: rgba(203, 215, 234, .46);
}

@media (min-width: 1360px) {
  .cbm-rail { display: flex; }
}

/* --------------------------------------------------------------------------
   4. Bouton pause — contrôle d'animation obligatoire (WCAG 2.2.2)
   -------------------------------------------------------------------------- */

.cbm-pause {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 61;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--cbm-line);
  border-radius: 999px;
  background: var(--cbm-surface);
  color: var(--cbm-ink);
  font-family: var(--cb-display-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .3s var(--cbm-ease), color .3s var(--cbm-ease), background .3s var(--cbm-ease);
}

.cbm-cinema .cbm-pause,
.cbm-paused .cbm-pause { display: inline-flex; }

.cbm-pause svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.cbm-pause__play { display: none; }
.cbm-pause[aria-pressed="true"] .cbm-pause__bars { display: none; }
.cbm-pause[aria-pressed="true"] .cbm-pause__play { display: inline; fill: currentColor; }

.cbm-pause__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .4s var(--cbm-ease), opacity .3s var(--cbm-ease);
}

.cbm-pause:hover,
.cbm-pause:focus-visible,
.cbm-pause[aria-pressed="true"] {
  border-color: rgba(103, 224, 185, .5);
  background: rgba(10, 18, 34, .9);
  color: #eef4ff;
}

.cbm-pause:hover .cbm-pause__label,
.cbm-pause:focus-visible .cbm-pause__label,
.cbm-pause[aria-pressed="true"] .cbm-pause__label {
  max-width: 230px;
  opacity: 1;
}

/* Le bouton fige aussi les animations CSS de la page, pas seulement le canvas. */
/* Les pseudo-elements ne sont pas atteignables en JS : on les fige ici. Leurs
   animations sont toutes decoratives et bouclees sur cette page. */
.cbm-paused #main *::before,
.cbm-paused #main *::after {
  animation-play-state: paused !important;
}

/* Les elements reels sont figes par home-motion.js, et UNIQUEMENT quand leur
   animation boucle : figer une revelation en une passe la laisserait sur son
   image 0 et masquerait son contenu (hero invisible pour qui arrive en pause). */
.cbm-paused [data-cbm-kinetic] > *,
.cbm-paused [data-cbm-kinetic] .story-title__line {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   5. Mouvement réduit — états finaux, aucune boucle
   -------------------------------------------------------------------------- */

.cbm-reduced .cbm-stage { transition: none; }
.cbm-reduced [data-cbm-kinetic] > *,
.cbm-reduced [data-cbm-kinetic] .story-title__line { animation: none !important; opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cbm-stage { transition: none; }
  .cbm-rail { transition: none; }
  .cbm-rail__label,
  .cbm-rail__tick,
  .cbm-pause__label { transition: none; }
  [data-cbm-kinetic] > *,
  [data-cbm-kinetic] .story-title__line { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   6. Mobile — on garde le graphique, on retire le chrome de reel
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .cbm-pause { right: 12px; bottom: 12px; }
}

@media print {
  .cbm-stage,
  .cbm-rail,
  .cbm-pause { display: none !important; }
}