/* hero.css — section d'ouverture, manifeste + accroche + scène Canvas2D */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 40%, transparent 85%);
}

/*
 * Vidéo de fond — chargée et fondue par hero-video.js UNIQUEMENT si la
 * capacité/largeur/préférence de mouvement le permet (voir capability-detect.js).
 * Le canvas ci-dessus reste la première peinture (zéro écran vide), la
 * vidéo apparaît ensuite en fondu par-dessus — pas de poster statique requis.
 */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease-signature);
  pointer-events: none;
}

.hero__video.is-loaded {
  opacity: 1;
}

/* Voile de lisibilité : opaque côté texte, transparent côté vidéo, fondu
   vers la section suivante — s'adapte nativement au thème via --color-surface. */
.hero__video-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
    90deg,
    var(--color-surface) 0%,
    color-mix(in oklab, var(--color-surface) 55%, transparent) 42%,
    transparent 72%
  ),
    linear-gradient(180deg, transparent 55%, var(--color-surface) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.hero__title {
  margin-top: var(--space-3);
  font-size: var(--text-3xl);
}

/*
 * Accent scramblé — reconstruction fidèle de l'effet réel du template
 * source (chunk 66d6f01aacea9cc1.js) : un mot en accent se décode par
 * balayage gauche→droite de caractères aléatoires, en boucle périodique
 * (voir text-scramble.js). Police mono pour largeur fixe : zéro reflow
 * pendant le balayage, cohérent avec l'accent mono déjà utilisé dans le
 * logo du header.
 */
.hero__title-accent {
  display: inline-block;
  font-family: var(--font-mono);
  color: var(--color-signal);
}

.hero__manifesto {
  margin-top: var(--space-5);
}

.hero__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__meta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}