/* Page d'accueil animée du site (étapes 4.3e et 4.3f). Cette feuille n'est chargée que par elle, après style.css.

   Deux mises en page. Sans script, ou avec « moins d'animations » : chaque moment est un bloc de la page, son
   image fixe puis son texte. Quand le script a dessiné sa première image, il pose la classe « accueil-anime »
   sur la page : chaque moment devient plus haut que la fenêtre et son plan y reste épinglé le temps de son
   déroulé (position: sticky, le défilement reste celui du navigateur). Chaque vue en 3D est dessinée dans un
   canevas à elle, posé dans sa figure à la place de son image fixe.

   La scène et son fondu sont un seul élément (étape 4.3f) : le fondu est un masque de la figure qui porte le
   canevas, pas un dégradé posé par-dessus un canevas qui tiendrait la fenêtre. Ils défilent ensemble, par
   construction : c'est ce qui manquait quand un bandeau de la scène dépassait sous le fondu.

   Aucun sélecteur d'attribut ici, ni dans un commentaire : la vérification du site lit tout texte entre crochets
   comme un emplacement resté à remplir (tools/site.ts). Les états posés par le script sont des classes. */

main.accueil {
  position: relative;
  max-width: none;
  padding: 0 0 48px;
  /* Où les rayons du fond prennent naissance : derrière la scène. */
  --foyer-x: 50%;
  --foyer-y: 30%;
  --rayon: color-mix(in srgb, var(--site-line) 28%, var(--site-bg));
}

/* ---- Le fond de la page, derrière les textes ----

   Une seule couche, qui tient la fenêtre sous toute la page : elle ne défile pas, rien ne s'y redessine. Ce sont
   les rayons du fond de l'icône du jeu, dans les tons du thème, qui s'effacent en s'éloignant de la scène (choix
   de Julien du 12/10/2026 entre trois traitements ; les deux autres sont retirés, étape 4.3h). */
main.accueil::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--foyer-x) var(--foyer-y), color-mix(in srgb, var(--site-panel) 85%, transparent) 0, transparent 26%),
    radial-gradient(circle at var(--foyer-x) var(--foyer-y), transparent 20%, var(--site-bg) 82%),
    repeating-conic-gradient(from 5deg at var(--foyer-x) var(--foyer-y), var(--rayon) 0deg 9deg, transparent 9deg 18deg);
}

.accueil-canevas {
  display: none;
}

.moment,
.suite {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: 12px 16px 20px;
}

.moment h1 {
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.2em;
}

.moment h2 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-top: 0.4em;
}

/* Un trait de la couleur d'accent au-dessus de chaque titre : le titre s'affirme sans grossir encore. */
.moment h1::before,
.moment h2::before {
  content: '';
  display: block;
  width: 44px;
  height: 7px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: var(--site-accent);
}

.moment .chapeau {
  font: 700 22px/1.25 'Baloo 2', sans-serif;
  color: var(--site-ink);
  margin-top: 0;
}

.vue {
  margin: 14px 0 6px;
}

.vue img {
  display: block;
  width: 100%;
  height: auto;
}

.vue-terrain img {
  border-radius: 22px;
}

/* Une vraie capture du jeu, à la taille d'un téléphone tenu en main. */
.vue-capture img {
  width: min(100%, 17rem);
  margin: 0 auto;
  border-radius: 24px;
  border: 3px solid var(--site-line);
  box-shadow: 0 6px 0 var(--site-line);
}

/* Les engins nommés : une liste à lire, pas des boutons. */
.engins-noms {
  list-style: none;
  padding: 0;
}

.engins-noms li {
  margin: 0.25em 0;
  padding-left: 14px;
  border-left: 4px solid var(--site-line);
  font: 700 17px/1.3 'Baloo 2', sans-serif;
}

.compteur {
  font: 800 21px/1.3 'Baloo 2', sans-serif;
  font-variant-numeric: tabular-nums;
}

.cadeau .vue {
  max-width: 30rem;
  margin: 22px auto -8px;
}

/* Le cadeau des premiers joueurs : trois lignes à lire d'un coup d'œil, le détail replié dessous. */
.essentiel {
  list-style: none;
  padding: 0;
}

.essentiel li {
  margin: 0.5em 0;
  padding-left: 14px;
  border-left: 4px solid var(--site-accent);
  font-weight: 700;
}

.detail summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--site-accent-ink);
  font: 700 16px/1.2 'Baloo 2', sans-serif;
  cursor: pointer;
}

.detail p {
  color: var(--site-muted);
  font-size: 16px;
}

.moteur {
  color: var(--site-muted);
  font-size: 15px;
}

/* ---- La page animée ---- */

/* Le canevas d'une vue la remplit, et défile avec elle. */
.accueil-anime .accueil-canevas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.accueil-anime .moment {
  max-width: none;
  margin: 0;
  padding: 0;
  /* La course d'un moment : ce qui dépasse la hauteur de la fenêtre est le temps de son déroulé. */
  height: 250vh;
}

.accueil-anime .moment-capture {
  height: 170vh;
}

.accueil-anime .moment-ouverture {
  height: 180vh;
}

/* La caserne grandit jusqu'à la caserne complète : le moment le plus long. */
.accueil-anime .moment-caserne {
  height: 340vh;
}

.accueil-anime .plan {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.accueil-anime .moment-ouverture .plan {
  grid-template-rows: auto minmax(0, 1fr);
}

.accueil-anime .texte {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 6px 16px 22px;
}

.accueil-anime .moment-ouverture .texte {
  padding: 18px 16px 4px;
}

.accueil-anime .vue {
  position: relative;
  margin: 0;
  min-height: 0;
}

/* L'image fixe d'une vue en 3D laisse la place à son canevas, qui dessine au même endroit. */
.accueil-anime .vue-3d img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

/* Le terrain du centre de secours se fond dans la page, en haut et en bas : un masque de la figure elle-même. */
.accueil-anime .vue-terrain {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* La capture tient dans la hauteur que le texte lui laisse, à la forme d'un téléphone ; elle arrive penchée et se
   redresse pendant le premier tiers du moment (--p : l'avancée, posée par le script). */
.accueil-anime .vue-capture img {
  --e: min(1, calc(var(--p, 0) * 3));
  position: absolute;
  top: 18px;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: auto;
  width: auto;
  height: calc(100% - 30px);
  max-width: calc(100% - 48px);
  aspect-ratio: 9 / 16;
  transform: translateY(calc((1 - var(--e)) * 48px)) rotate(calc((1 - var(--e)) * -5deg)) scale(calc(0.9 + var(--e) * 0.1));
}

/* L'engin présenté est marqué d'un trait rouge et d'un fond ; son nom garde la couleur du texte (en rouge, il se
   lisait comme un lien), et les autres restent lisibles. */
.accueil-anime .engins-noms li {
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 0 10px 10px 0;
}

.accueil-anime .engin-0 .engins-noms li:nth-child(1),
.accueil-anime .engin-1 .engins-noms li:nth-child(2),
.accueil-anime .engin-2 .engins-noms li:nth-child(3) {
  border-left-color: var(--site-accent);
  background: var(--site-panel);
}

/* Les modules ne se disent qu'une fois bâtis, à la fin du moment ; leur place reste gardée, le compteur ne saute pas. */
.accueil-anime .sans-modules .avec-modules {
  visibility: hidden;
}

/* Le fourgon offert, hors du film : sa vue garde sa forme, son canevas y dessine au passage. */
.accueil-anime .vue-libre {
  aspect-ratio: 16 / 10;
}

/* Sur un écran large : le texte à gauche, la vue à droite, de tout son haut et jusqu'au bord de la fenêtre. */
@media (min-width: 62rem) {
  main.accueil {
    --foyer-x: 70%;
    --foyer-y: 52%;
  }

  .moment h1 {
    font-size: clamp(64px, 6.2vw, 124px);
  }

  .moment h2 {
    font-size: clamp(48px, 4.4vw, 88px);
  }

  .moment h1::before,
  .moment h2::before {
    width: 64px;
    height: 9px;
    margin-bottom: 20px;
    border-radius: 5px;
  }

  .moment .chapeau {
    font-size: clamp(26px, 2vw, 40px);
  }

  .accueil-anime .plan,
  .accueil-anime .moment-ouverture .plan {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: center;
  }

  .accueil-anime .texte,
  .accueil-anime .moment-ouverture .texte {
    grid-row: 1;
    grid-column: 1;
    max-width: none;
    margin: 0;
    padding: 0 28px 0 clamp(32px, 6.5vw, 132px);
    font-size: clamp(19px, 1.2vw, 24px);
  }

  .accueil-anime .texte p,
  .accueil-anime .texte ul {
    max-width: 31em;
  }

  .accueil-anime .vue {
    grid-row: 1;
    grid-column: 2;
    height: 100%;
  }

  /* La scène du centre de secours va du haut au bas de la fenêtre et jusqu'à son bord droit ; elle ne se fond dans
     la page que du côté du texte. */
  .accueil-anime .vue-terrain {
    /* Le centre se tient un peu à droite du milieu de la vue : hors de la part qui se fond dans la page
       (--decale-x, lu par le script). */
    --decale-x: 0.05;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%);
    mask-image: linear-gradient(to right, transparent 0, #000 20%);
  }

  .engins-noms li {
    font-size: clamp(17px, 1.1vw, 22px);
  }

  .compteur {
    font-size: clamp(24px, 1.8vw, 36px);
  }

  .accueil-anime .vue-capture img {
    top: 40px;
    bottom: 40px;
    height: calc(100% - 80px);
  }
}