/* ============================================================
   scene.css — enveloppe du fond animé
   ------------------------------------------------------------
   Presque tout le décor est peint par scene.js sur un seul
   canvas : nébuleuse, étoiles, limbe terrestre, lanceur et son
   panache. Cette feuille ne fait que le positionner et gérer
   les états de repli.
   ============================================================ */

.scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  /* couleur de fond tant que le canvas n'a pas peint sa première image */
  background:
    radial-gradient(1100px 760px at 76% 12%, #131a33 0%, transparent 62%),
    linear-gradient(180deg, #04060e 0%, #070c1a 46%, #05070f 100%);
}

.scene__rendu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* grain argentique : casse les dégradés et enlève l'aspect « vectoriel » */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image:
    repeating-conic-gradient(from 0deg, #fff 0deg 1deg, #000 1deg 2deg);
  background-size: 3px 3px;
}

/* ------------------------------------------------------------
   Voile de lisibilité entre le décor et le contenu
   ------------------------------------------------------------ */
.voile {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(4, 6, 14, .80) 0%,
      rgba(4, 6, 14, .52) 26%,
      rgba(4, 6, 14, .58) 60%,
      rgba(4, 6, 14, .90) 100%),
    radial-gradient(120% 78% at 50% 42%, transparent 38%, rgba(4, 6, 14, .55) 100%);
}

/* ------------------------------------------------------------
   Repli : décor coupé depuis la barre de navigation
   ------------------------------------------------------------ */
html[data-scene="off"] .scene__rendu { display: none; }
html[data-scene="off"] .scene::after { display: none; }
html[data-scene="off"] .voile { display: none; }
html[data-scene="off"] .scene {
  background: linear-gradient(180deg, #06090f 0%, #080c16 100%);
}

/* ------------------------------------------------------------
   Sur mobile, le décor s'efface pour laisser respirer le texte
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .voile {
    background:
      linear-gradient(180deg, rgba(4, 6, 14, .90) 0%, rgba(4, 6, 14, .74) 40%,
                              rgba(4, 6, 14, .94) 100%);
  }
}