/* ============================================================================
   MOON CAPITAL — Mise en scène du hero
   Surface de volatilité, télémétrie moteur, chorégraphie d'entrée, parallaxe.
   ========================================================================= */

/* ── Surface de volatilité (canvas) ───────────────────────────────────────
   Grille projetée en perspective, ondulation lente. Purement décorative :
   elle installe le registre quantitatif sans rien affirmer sur les marchés. */
.surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out) .35s;
}
html.is-ready .surface { opacity: 1; }

.surface canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* La grille naît à l'horizon, s'affirme au milieu, s'efface derrière la maquette. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 27%, rgba(var(--c-shadow), calc(.5 * var(--k-shadow))) 38%, #000 58%, #000 80%, transparent 97%),
    radial-gradient(78% 62% at 50% 74%, rgba(var(--c-shadow), calc(.35 * var(--k-shadow))) 0%, #000 62%);
  mask-image:
    linear-gradient(180deg, transparent 27%, rgba(var(--c-shadow), calc(.5 * var(--k-shadow))) 38%, #000 58%, #000 80%, transparent 97%),
    radial-gradient(78% 62% at 50% 74%, rgba(var(--c-shadow), calc(.35 * var(--k-shadow))) 0%, #000 62%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Ligne d'horizon très fine, à la naissance de la grille. */
.surface__horizon {
  position: absolute;
  left: 0; right: 0;
  top: 39%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--c-accent), calc(.18 * var(--k-accent))) 34%, rgba(var(--c-veil), calc(.38 * var(--k-veil))) 50%, rgba(var(--c-accent), calc(.18 * var(--k-accent))) 66%, transparent);
  opacity: .55;
}

.hero__inner,
.hero__stage { position: relative; z-index: 1; }

/* ── Télémétrie du moteur ─────────────────────────────────────────────── */
.telemetry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem 0;
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  padding: .55rem .35rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(var(--c-veil), calc(.04 * var(--k-veil))), rgba(var(--c-veil), calc(.012 * var(--k-veil))));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 100%;
  overflow: hidden;
}

.telemetry__item {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding-inline: .85rem;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  color: var(--ink-3);
  white-space: nowrap;
  border-right: 1px solid var(--line-soft);
}
.telemetry__item:last-child { border-right: 0; }
.telemetry__item b {
  font-weight: 500;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
  min-width: 3.4ch;
  text-align: right;
  transition: color .28s var(--ease-out);
}
.telemetry__item b.is-tick { color: var(--accent-bright); }

.telemetry__led {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--c-accent), calc(.14 * var(--k-accent)));
  animation: pulse-dot 2.6s var(--ease-io) infinite;
  flex: none;
}
.telemetry__label { color: var(--accent); letter-spacing: .12em; text-transform: uppercase; }

/* ── Chorégraphie d'entrée ────────────────────────────────────────────── */
[data-enter] {
  opacity: 0;
  translate: 0 16px;
  filter: blur(10px);
}
html.is-ready [data-enter] {
  animation: enter-up .95s var(--ease-out) both;
  animation-delay: var(--enter-delay, 0ms);
}
@keyframes enter-up {
  from { opacity: 0; translate: 0 16px; filter: blur(10px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}

/* Le titre monte ligne par ligne, chaque ligne masquée par la suivante.
   Le rembourrage laisse passer les jambages sans casser le rythme vertical. */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: .1em .16em;
  margin-block: -.1em -.16em;
}
.hero__title .line > span {
  display: block;
  translate: 0 100%;
  opacity: 0;
}
html.is-ready .hero__title .line > span {
  animation: line-rise 1.05s var(--ease-out) both;
  animation-delay: var(--enter-delay, 0ms);
}
@keyframes line-rise {
  from { translate: 0 105%; opacity: 0; }
  to   { translate: 0 0;    opacity: 1; }
}

/* La lune se lève. */
.moon--hero {
  opacity: 0;
  translate: 0 3rem;
  transition: opacity 1.8s var(--ease-out) .1s, translate 2.2s var(--ease-out) .1s;
}
html.is-ready .moon--hero { opacity: .92; translate: 0 0; }

/* ── Parallaxe au pointeur ────────────────────────────────────────────── */
.moon--hero,
.surface__horizon {
  will-change: transform;
}
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .moon--hero {
    transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0);
  }
  .backdrop__grid {
    transform: translate3d(calc(var(--px, 0) * 6px), 0, 0);
    transition: transform .8s var(--ease-out);
  }
}

/* ── Balayage lumineux sur la maquette ────────────────────────────────── */
.app__sheen {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(var(--c-veil), calc(.07 * var(--k-veil))) 47%, rgba(var(--c-white), calc(.045 * var(--k-white))) 50%, transparent 60%);
  translate: -120% 0;
}
html.is-ready .app__sheen {
  animation: sheen 2.4s var(--ease-out) 1.5s 1 both;
}
@keyframes sheen {
  from { translate: -120% 0; }
  to   { translate: 120% 0; }
}

/* ── Respect du mouvement réduit ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-enter],
  .hero__title .line > span { opacity: 1; translate: none; filter: none; animation: none; }
  .moon--hero { opacity: .92; translate: none; transition: none; }
  .surface { opacity: 1; transition: none; }
  .app__sheen { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3D
   Rotations réelles : le navigateur compose en perspective, ce ne sont pas
   des transformations 2D déguisées.
   ═══════════════════════════════════════════════════════════════════════ */

/* Au repos, aucune transformation : l'élément reste dans le flux de rendu
   normal. Promouvoir une couche 3D en permanence coûte de la mémoire et laisse
   des coutures de tuiles sur certains compositeurs. */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-out);
}
[data-tilt].is-tilting,
[data-tilt].is-resting {
  transform:
    perspective(var(--tilt-persp, 1100px))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(var(--tz, 0px));
  will-change: transform;
}
[data-tilt].is-tilting { transition-duration: .1s; }

/* La maquette bascule d'un bloc ; sa scène interne a sa propre profondeur,
   car un conteneur en overflow:hidden aplatit ses enfants. */
.app-tilt {
  --tilt-persp: 1900px;
  border-radius: clamp(14px, 1.4vw, 22px);
}

/* Le graphe de blocs prend du relief : chaque bloc a sa cote Z. */
.canvas {
  perspective: 780px;
  perspective-origin: 50% 42%;
}
.node {
  transform: translateZ(calc(var(--z, 0) * 1px));
  transition:
    opacity .42s var(--ease-out),
    scale .52s var(--ease-spring),
    translate .42s var(--ease-out),
    transform .5s var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.node:hover { transform: translateZ(calc((var(--z, 0) + 26) * 1px)); }

/* Les cartes de tarif se soulèvent vers le curseur. */
.plan[data-tilt] { --tilt-persp: 900px; }
.plan[data-tilt]:hover { translate: none; }

/* Les vignettes de garantie basculent plus discrètement. */
.guard[data-tilt] { --tilt-persp: 700px; }

/* Le monogramme du hero pivote légèrement avec la parallaxe. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand__mark svg {
    transform: rotateY(calc(var(--px, 0) * 9deg));
    transform-style: preserve-3d;
  }
}

/* Les anneaux orbitaux tournent dans l'espace, pas dans le plan. */
.moon__orbit {
  transform-style: preserve-3d;
  animation-name: orbit-3d;
}
@keyframes orbit-3d {
  from { transform: rotateX(74deg) rotateZ(0deg); }
  to   { transform: rotateX(74deg) rotateZ(360deg); }
}
.moon__orbit--2 { animation-name: orbit-3d-2; }
@keyframes orbit-3d-2 {
  from { transform: rotateX(66deg) rotateZ(0deg); }
  to   { transform: rotateX(66deg) rotateZ(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none; transition: none; }
  .node, .node:hover { transform: none; }
}