/* =========================================================
   PEAU — SPACE FROM SKY
   L'espace vu d'en bas : le ciel de jour, depuis le sol. Les
   planetes y sont comme la lune l'apres-midi — pales, leur face
   cachee perdue dans le bleu, parce qu'on les voit A TRAVERS
   l'atmosphere.

   Rien ici ne parle aux planetes : la toile est posee en
   `screen` (epoque.css), donc sa nuit ne change pas le ciel et
   son jour s'y ajoute. Le degrade ne gene personne — la face
   cachee se fond dans la couleur qu'il a LA OU elle tombe.

   Le ciel est plus profond au zenith et palit vers l'horizon,
   c'est-a-dire vers le bas de la page, la ou serait le sol.

   Liee dans l'entete de TOUTES les pages, comme deep space :
   un onglet garde sa matiere partout (cf. onglets).
   ========================================================= */

[data-peau="space-from-sky"] {
  --ciel-zenith: #5b95d3;
  --ciel-horizon: #d7e7f3;
  /* LE CIEL SUIT LE SOLEIL. Les trois teintes d'ici sont celles du PLEIN
     JOUR ; `nuit` est ce que le ciel devient quand le soleil est loin sous
     l'horizon, `couchant` ce que l'horizon prend quand il est bas. Ce qu'on
     VOIT (`haut`, `milieu`, `bas`) se deduit des deux nombres que le soleil
     pose sur la racine (soleil.js : `--soleil-jour`, `--soleil-couchant`) —
     plus bas, la ou le melange existe. Sans lui : le plein jour. */
  --ciel-nuit: #0b1230;
  --ciel-couchant: #f3a463;
  --ciel-haut: var(--ciel-zenith);
  --ciel-milieu: var(--vide);
  --ciel-bas: var(--ciel-horizon);
  /* La couleur du ciel quand il n'en a qu'une : l'onglet, et la nuit du
     disque de repli (sans WebGL). */
  --vide: #86b3e0;
  --rayon-fond: var(--vide);
  --rayon-bord: var(--noir);
  --sol-motif: none;
  /* Les cumulus (cumulus.js) : rendus dans Blender, rallumes ici.
     `jeux` : le dossier de leurs jeux (un sous-dossier par type, et
     jeux.json qui les nomme). `type` : lequel passe dans ce ciel — un
     seul a la fois. `nombre` : combien vivent en meme temps. `taille` :
     la largeur de l'image du plus PROCHE, en DIAMETRES DE PLANETE
     (`--planete-d`, epoque.css) — pas en px : un nuage garde la meme
     proportion devant elle sur un telephone et sur un bureau. Le plus loin
     en fait `profondeur` fois moins, et va `profondeur` fois moins vite.
     `vent` : les secondes que met le plus proche a passer la page.
     `vie` : les secondes entre sa naissance et son effacement. `haut` /
     `bas` : ou tombe la base du plus proche et du plus loin, en part de
     la hauteur (le bas de la page est l'horizon). */
  --cumulus-jeux: "/assets/img/nuages/";
  --cumulus-type: aere-etale;
  --cumulus-nombre: 7;
  --cumulus-taille: 2.5;
  --cumulus-profondeur: 0.1;
  --cumulus-vent: 150;
  --cumulus-vie: 415;
  --cumulus-haut: 0.22;
  --cumulus-bas: 0.7;
  /* Leur lumiere. Le soleil n'est pas ici : c'est un astre (soleil.js),
     ils lui disent ou ils sont — `altitude`, au-dessus de nous, en rayons
     de Terre (0.0003 : deux kilometres) — et il rend d'ou elle vient et ce
     qu'il en reste. `soleil`, `jour`, `sol` : leurs teintes EN PLEIN JOUR
     — celle qu'ils prennent du soleil, celle du ciel qui les eclaire d'en
     haut, celle du sol qui eclaire leur ventre. `exposition` : leur
     eclat. `contraste` : 1 la lumiere telle que rendue ; plus, des ombres
     plus franches. `brume` : combien le plus loin se fond dans la teinte
     de l'horizon. `cadence` : les images par seconde. */
  --cumulus-altitude: 0.0022;
  --cumulus-soleil: #fff4e2;
  --cumulus-jour: #a8c6ea;
  --cumulus-sol: #3a3f4a;
  --cumulus-exposition: 2.25;
  --cumulus-contraste: 1;
  --cumulus-brume: 0.75;
  --cumulus-cadence: 30;
  /* Leur matiere, travaillee par leur EPAISSEUR (0 un voile, 1 le plus
     epais). `aere` : ce qui est plus mince que ca s'efface — 0, la
     silhouette pleine. `effiloche` : de combien un bruit ronge ce qui est
     mince ; `maille` : la finesse de ce bruit (ses cellules par largeur
     d'image) ; `remous` : les secondes qu'il met a se refaire — le nuage
     bouillonne (0 : fige). `lueur` : ce que le soleil ajoute a travers le
     mince, a plein en contre-jour. `coeur` : de combien l'epais s'assombrit.
     `dissout` : comment ils naissent et s'effacent — 1, ils se FORMENT et
     se DISSOLVENT par l'epaisseur (le coeur parait d'abord, part en
     dernier) ; 0, un fondu uniforme ; entre, un peu des deux. */
  --cumulus-aere: 0.41;
  --cumulus-effiloche: 0.25;
  --cumulus-maille: 29;
  --cumulus-remous: 29;
  --cumulus-lueur: 1.64;
  --cumulus-coeur: 0.5;
  --cumulus-dissout: 1;
  /* Devant un astre, ils trichent : `eclaircie`, de combien leur vie baisse
     au-dessus de lui (0, rien ; 1, le nuage s'y dissout tout entier) — par
     l'epaisseur, comme ils naissent et meurent : le mince part, le coeur
     tient. `halo` : jusqu'ou ca porte, en rayons de l'astre (1, le disque
     seul). `plein` : la largeur, en diametres de l'astre, a partir de
     laquelle un nuage s'eclaircit a plein — plus petit, d'autant moins (un
     petit nuage ne cache qu'un morceau). `hasard` : tous ne trichent pas
     autant — chacun tire a sa naissance une part de l'eclaircie, entre
     `1 - hasard` et 1 (0, tous pareil ; 1, certains pas du tout). Ils s'y amincissent en entrant et
     reprennent du volume en sortant. */
  --cumulus-eclaircie: 0.3;
  --cumulus-halo: 1.6;
  --cumulus-plein: 2;
  --cumulus-hasard: 0.8;
  /* L'arrivee est degagee : a la premiere image, aucun nuage devant la part
     `degage` de l'astre (depuis la gauche, d'ou vient le vent ; 0.67, ses
     deux premiers tiers), ni qui y entrera dans les `arrivee` secondes. Un
     nuage sur son bord droit reste : il s'en va. */
  --cumulus-degage: 0.67;
  --cumulus-arrivee: 30;
  /* La banderole (banderole.js) : parfois, quelque chose traverse le ciel
     et tracte un message. `paquet` : le dossier du paquet de vues de ce qui
     passe (vues.js, PAQUET-VUES.md). `taille` : la largeur de son cadre, en
     DIAMETRES DE PLANETE, comme les nuages. `traversee` : les secondes d'un
     bord a l'autre. `creneau` : le temps est coupe en creneaux de tant de
     secondes, et chacun a `chance` (0 a 1) de voir un passage — a l'heure
     du monde, le meme pour tous. `haut` / `bas` : entre quelles hauteurs il
     passe, en part de la hauteur de la page. `champ` : de combien de degres
     on le voit de biais aux bords de la page (au milieu il est de profil) ;
     `site` : sa hauteur au-dessus de l'horizon, en degres, quand il est au
     plus pres — on le voit d'autant plus par-dessous. `corde` : la longueur
     du cable, `lettre` : la hauteur de la lettre, en parts du cadre. */
  --banderole-paquet: "/assets/img/vues/avion-ligne/";
  --banderole-taille: 0.62;
  --banderole-traversee: 40;
  --banderole-creneau: 180;
  --banderole-chance: 0.5;
  --banderole-haut: 0.12;
  --banderole-bas: 0.36;
  --banderole-champ: 55;
  --banderole-site: 28;
  --banderole-corde: 0.3;
  --banderole-lettre: 0.085;
  /* Le sillage (sillage.js) : loin, haut, de petits avions passent et
     laissent leur trainee. Memes reglages que la banderole (passage.js les
     lit pour les deux), et ce qu'elle tait : `voies`, combien peuvent passer
     a la fois ; `petit`, ce que vaut le plus petit en part de `taille` — il
     est plus loin, donc plus lent, et `traversee` est SA duree ; `pente`, de
     combien de degres au plus la voie penche ; `retour`, la chance (0 a 1)
     qu'il aille de gauche a droite. `champ` est etroit : de loin, on le
     voit presque du meme oeil d'un bord a l'autre. `longueur` : celle de la
     trace, `epaisseur` : la sienne au bout, en parts du cadre. */
  --sillage-paquet: "/assets/img/vues/avion-ligne/";
  --sillage-taille: 0.09;
  --sillage-petit: 0.55;
  --sillage-voies: 2;
  --sillage-traversee: 75;
  --sillage-creneau: 120;
  --sillage-chance: 0.7;
  --sillage-haut: 0.05;
  --sillage-bas: 0.5;
  --sillage-champ: 16;
  --sillage-site: 28;
  --sillage-pente: 14;
  --sillage-retour: 0.5;
  --sillage-longueur: 9;
  --sillage-epaisseur: 0.09;
}

/* Le jour s'efface dans la nuit, du zenith a l'horizon ; l'embrasement se
   pose sur l'horizon APRES, pour tenir encore quand le ciel s'assombrit. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root[data-peau="space-from-sky"] {
    --ciel-haut: color-mix(in srgb,
      var(--ciel-zenith) calc(var(--soleil-jour, 1) * 100%), var(--ciel-nuit));
    --ciel-milieu: color-mix(in srgb,
      var(--vide) calc(var(--soleil-jour, 1) * 100%), var(--ciel-nuit));
    --ciel-bas: color-mix(in srgb,
      var(--ciel-couchant) calc(var(--soleil-couchant, 0) * 100%),
      color-mix(in srgb,
        var(--ciel-horizon) calc(var(--soleil-jour, 1) * 100%), var(--ciel-nuit)));
  }
}

/* Un ciel n'est pas un carrelage : il couvre la page, une fois. L'ossature
   donne a tout fond la maille de la tuile (epoque.css, `.page`) — et sans
   motif cette maille vaut zero, donc un degrade de zero pixel : rien. Mesure,
   `background-size: 0px 0px`, et le ciel etait l'aplat de `--vide`. */
:root[data-peau="space-from-sky"] .page {
  background-image: linear-gradient(to bottom,
    var(--ciel-haut), var(--ciel-milieu) 55%, var(--ciel-bas));
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

/* Le ciel va jusqu'en bas : meme raison que le vide (cf. deep space). */
:root[data-peau="space-from-sky"] body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
:root[data-peau="space-from-sky"] .page { flex: 1 0 auto; }

/* Dans le ciel, rien sur quoi porter une ombre : la planete n'en a pas. */
[data-peau="space-from-sky"] .planete__astre { box-shadow: none; }

/* ---------------------------------------------------------
   LES NUAGES — ils passent DEVANT la planete
   La planete est au fond du ciel, les nuages sont entre elle et
   nous : un calque au-dessus d'elle, sous les textes (qui ne sont
   pas dans le ciel, ils sont sur la vitre). La page ne fait que
   poser le calque (`.ciel`) ; c'est `cumulus.js` qui y peint, et
   seulement si la peau DECLARE des cumulus (`--cumulus-type`).
   Sous une autre peau, le calque reste vide.

   Ce sont des cumulus : des masses pleines, rendues une fois en
   volume, que la page ne fait que rallumer et faire deriver (voir
   cumulus.js). Leur toile est posee normalement sur le ciel.

   Ils ne sont pas la a la premiere image, et c'est voulu : un ciel
   sans nuages est un ciel. Ils y entrent en fondu quand la toile
   a peint (`data-peint`).
   --------------------------------------------------------- */
:root[data-peau="space-from-sky"] .page { overflow-x: clip; }

:root[data-peau="space-from-sky"] .ciel {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

:root[data-peau="space-from-sky"] .ciel__toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
:root[data-peau="space-from-sky"] .ciel[data-peint] .ciel__toile { opacity: 1; }

/* ---------------------------------------------------------
   LA BANDEROLE — ce qui passe, et ce qu'il tracte
   Un convoi : le cadre du paquet de vues (`__sujet`, bati par
   vues.js) et la traine (`__traine` : le cable puis la toile),
   accrochee par banderole.js a l'ancre que le paquet donne. Le
   convoi est dans le ciel, devant les nuages, sous les textes.
   La feuille ne dit que sa taille et sa matiere : ou il est, ce
   qu'il montre et comment la traine pend sont des animations
   declarees par le script, une fois par passage.

   Il prend la lumiere du jour comme le reste du ciel : a la nuit
   il s'eteint avec lui (`--soleil-jour`, soleil.js).
   --------------------------------------------------------- */
:root[data-peau="space-from-sky"] .banderole {
  --banderole-l: calc(var(--banderole-taille) * var(--planete-d));
  position: absolute;
  left: 0;
  top: 0;
  width: var(--banderole-l);
  will-change: transform;
  filter: brightness(calc(0.3 + 0.7 * var(--soleil-jour, 1)));
}

/* Hauteur nulle : la traine est une LIGNE qui part de l'ancre, et ce
   qu'elle porte se centre dessus. */
:root[data-peau="space-from-sky"] .banderole__traine {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: max-content;
  height: 0;
  transform-origin: 0 0;
}

:root[data-peau="space-from-sky"] .banderole__corde {
  flex: none;
  width: calc(var(--banderole-corde) * var(--banderole-l));
  height: 1px;
  background: var(--noir);
}

:root[data-peau="space-from-sky"] .banderole__toile {
  flex: none;
  padding: 0.5em 0.9em;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(var(--banderole-lettre) * var(--banderole-l));
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   LE SILLAGE — de petits avions, loin, et leur trainee
   Le meme convoi que la banderole, en petit : le cadre du paquet
   (`__sujet`) et la trace (`__traine` > `__trace`). Ils volent
   AU-DESSUS des nuages, donc ils passent derriere eux : la voie
   se range sous la toile du ciel (`z-index` negatif — `.ciel`
   fait son propre empilement, elle reste devant la planete).

   `--passage-echelle` est le tirage du moteur (de `petit` a 1) :
   la taille se compte ici, une fois, et la trace la suit.

   La trace est une bande fixe derriere l'avion : pleine pres de
   lui, dissoute au bout (le masque), et qui s'elargit en
   vieillissant (la decoupe). Rien ne l'anime.
   --------------------------------------------------------- */
:root[data-peau="space-from-sky"] .sillage__voie { z-index: -1; }

:root[data-peau="space-from-sky"] .sillage {
  --sillage-l: calc(var(--sillage-taille) * var(--planete-d) * var(--passage-echelle, 1));
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sillage-l);
  will-change: transform;
  filter: brightness(calc(0.3 + 0.7 * var(--soleil-jour, 1)));
}

:root[data-peau="space-from-sky"] .sillage__traine {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: max-content;
  height: 0;
}

:root[data-peau="space-from-sky"] .sillage__trace {
  flex: none;
  width: calc(var(--sillage-longueur) * var(--sillage-l));
  height: max(1px, calc(var(--sillage-epaisseur) * var(--sillage-l)));
  background: var(--blanc);
  -webkit-mask-image: linear-gradient(to right,
    transparent, #000 3%, rgb(0 0 0 / 0.55) 30%, transparent);
  mask-image: linear-gradient(to right,
    transparent, #000 3%, rgb(0 0 0 / 0.55) 30%, transparent);
  clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 68%);
}

/* Ce qui se lit reste devant eux. */
:root[data-peau="space-from-sky"] .page > .titre,
:root[data-peau="space-from-sky"] .page > .prose,
:root[data-peau="space-from-sky"] .hub__portes-liste,
:root[data-peau="space-from-sky"] .planete__nom {
  position: relative;
  z-index: 2;
}