/* ==========================================================================
   3A-ARCHITECTURE — ANIMATION D'OUVERTURE
   Voile plein écran affiché à l'arrivée sur le site, puis fondu vers la page.

   Le voile est masqué par défaut. Un script placé dans le <head> ajoute la
   classe `intro-on` sur <html> AVANT le premier rendu, uniquement si
   l'animation doit être jouée. Conséquence utile : sans JavaScript, sans
   session neuve ou avec « animations réduites », le voile n'apparaît jamais
   et la page reste immédiatement lisible.
   ========================================================================== */

.intro {
  display: none;
}

.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  /* Noir pur, et non `--noir` : c'est la valeur de fond de l'animation
     fournie. La vidéo étant affichée en `contain`, la moindre différence
     ferait apparaître une couture autour d'elle sur les écrans dont le
     format diffère du 16:9. */
  background: #000;
  opacity: 1;
  transition: opacity 0.7s ease;
}

/* Pendant l'ouverture, la page ne défile pas. */
.intro-on body {
  overflow: hidden;
}

/* Fondu de sortie, déclenché par assets/js/intro.js */
.intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   1. Animation fournie (vidéo)
   `contain` plutôt que `cover` : le logo n'est jamais rogné. Les bandes
   éventuelles se confondent avec le fond, qui est la même valeur de noir.
   -------------------------------------------------------------------------- */
/* Positionnement absolu, et non simple élément de grille : une piste de
   grille implicite se dimensionne sur le contenu, donc sur le rapport 16:9
   de la vidéo. `height: 100%` se résolvait alors contre une ligne plus haute
   que le voile — la vidéo débordait vers le bas et se trouvait rognée dès
   que la fenêtre était plus haute qu'un 16:9, c'est-à-dire presque toujours.
   Calé sur `inset: 0`, le cadrage suit exactement le voile. */
.intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;

  /* Par défaut on montre l'image entière, quitte à laisser des bandes :
     c'est le seul choix sûr en portrait, où remplir l'écran amputerait le
     logo sur les côtés. */
  object-fit: contain;

  /* La vidéo reste invisible tant qu'elle n'a pas commencé à jouer, pour
     qu'on ne voie jamais un cadre vide ou une première image incomplète.
     assets/js/intro.js pose `is-playing` sur l'événement `playing`. */
  opacity: 0;
  transition: opacity 0.25s ease;
}

.intro__video.is-playing {
  opacity: 1;
}

.intro__video[hidden] {
  display: none;
}

/* En paysage, l'animation occupe tout l'écran. Sans cette règle, une fenêtre
   de navigateur maximisée sur un écran 1080p — dont la zone utile fait
   environ 1920 × 950, soit un rapport 2:1 — affichait l'animation encadrée
   de deux bandes noires d'une centaine de pixels.
   Le recadrage est sans risque : le logo occupe le tiers central de l'image
   et la signature reste à l'intérieur des marges, quel que soit le format. */
@media (min-aspect-ratio: 4 / 3) {
  .intro__video {
    object-fit: cover;
  }
}

/* --------------------------------------------------------------------------
   1 bis. Animation du logo reconstruite
   Reprise de la composition d'origine en HTML/CSS, pilotée par
   assets/js/intro-logo.js. Toutes les distances sont exprimées dans le
   repère 1920 × 1080 de la composition ; le script applique une seule
   homothétie à `.il-scene` pour l'adapter à l'écran.
   -------------------------------------------------------------------------- */
.intro__logo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.intro__logo[hidden] {
  display: none;
}

.il-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
}

.il-boite {
  position: absolute;
  transform-origin: 50% 50%;
}

.il-interieur,
.il-couche,
.il-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 995px;
}

.il-interieur {
  transform-origin: 0 0;
}

.il-fill {
  background-repeat: no-repeat;
  background-size: 1000px 995px;
}

/* Ligne de construction : la largeur est animée par le script */
.il-guide {
  position: absolute;
  height: 1.6px;
  width: 0;
  transform-origin: 0 50%;
}

/* --- Signature --------------------------------------------------------- */
.il-signature {
  position: absolute;
}

.il-texte {
  font-family: 'Aldrich', var(--font-condensed), sans-serif;
  /* Taille posee par intro-logo.js, qui ajuste la signature a la largeur
     du triangle. La valeur ci-dessous n.est qu.un point de depart. */
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: 0.055em;
  white-space: nowrap;
  color: #fff;
}

.il-filet {
  position: relative;
  height: 3px;
  margin-top: 20px;
}

.il-trait {
  position: absolute;
  left: 0;
  top: 1px;
  width: 0;
  height: 1.5px;
}

/* Point lumineux en tête du filet */
.il-tete {
  position: absolute;
  top: 0;
  width: 90px;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 233, 228, 0) 0%, #FFE9E4 60%, rgba(255, 233, 228, 0) 100%);
  box-shadow: 0 0 20px 3px #A80F02;
}

/* --------------------------------------------------------------------------
   2. Animation de repli
   Dernier recours : ni la vidéo ni l'animation reconstruite n'ont pu jouer.
   -------------------------------------------------------------------------- */
.intro__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: var(--gutter);
}

.intro__fallback[hidden] {
  display: none;
}

.intro__fallback img {
  width: clamp(140px, 26vw, 260px);
  background: none;
  animation: intro-logo 1.5s var(--ease-out-expo) both;
}

.intro__rule {
  display: block;
  width: clamp(120px, 22vw, 220px);
  height: 1px;
  background: var(--bordeaux);
  transform-origin: center;
  animation: intro-rule 0.9s var(--ease-out-expo) 0.75s both;
}

.intro__word {
  font-family: var(--font-condensed);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gris-moyen);
  text-align: center;
  animation: intro-word 1.1s var(--ease-out-expo) 0.95s both;
}

@keyframes intro-logo {
  0%   { opacity: 0; transform: scale(0.86); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes intro-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes intro-word {
  from { opacity: 0; letter-spacing: 0.62em; }
  to   { opacity: 1; letter-spacing: 0.34em; }
}

/* --------------------------------------------------------------------------
   3. Bouton « Passer »
   -------------------------------------------------------------------------- */
.intro__skip {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-md);
  padding: 0.625rem 1.125rem;
  border: 1px solid rgba(245, 243, 239, 0.22);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.7);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  /* Laisse l'animation s'installer avant de proposer de la sauter. */
  animation: fade-in 0.5s ease 1.2s both;
}

.intro__skip:hover {
  border-color: var(--blanc);
  background: rgba(245, 243, 239, 0.07);
  color: var(--blanc);
}

.intro__skip:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Garde-fous
   -------------------------------------------------------------------------- */

/* Ceinture et bretelles : le script du <head> pose déjà la condition, mais si
   la préférence change en cours de session, le voile s'efface aussitôt. */
@media (prefers-reduced-motion: reduce) {
  .intro-on .intro {
    display: none;
  }

  .intro-on body {
    overflow: visible;
  }
}

@media print {
  .intro {
    display: none !important;
  }
}