/* -------------------------------------- le passage entre la console et /now */

/* **Ringard exprès** (27/10, demandé) : le diaporama de mariage, PowerPoint
   2003. Fond arc-en-ciel qui tourne, étoiles qui scintillent, WordArt en
   dégradé avec son extrusion. La mécanique est dans `ringard.js`, à côté.

   **Un seul décor, pour les deux pages** (29/10). Il était recopié deux fois
   (`src/styles/16b-ringard.css` et `now.css`) et fabriqué par le JavaScript
   de chaque côté : chaque page neuve peignait d'abord autre chose que ce que
   l'autre venait de quitter — un arc-en-ciel sans mot, sans étoiles, tourné
   autrement —, puis le décor arrivait par-dessus, et ça sautait. Il est
   maintenant écrit dans le HTML des deux pages (`index.html`,
   `now/index.html`), caché, et ce fichier est chargé dans leurs deux têtes :
   **la première image d'une page qui arrive est l'image exacte sur laquelle
   l'autre est partie, peinte par le CSS seul**, avant tout JavaScript.

   Les classes, sur `html` (posées par `ringard.js`) :
   - `ringard-actif` : le décor se voit (le départ, la pose, l'arrivée) —
     pas `ringard` tout court, que `html` prendrait pour le décor lui-même,
     et qui le cacherait (vu le 29/10 : une page blanche) ;
   - `ringard-pose` : **la pose**, l'image entre les deux pages. La roue est
     arrêtée, les étoiles à leur place, et ce qui part ou arrive (la
     console, la page /now) est réduit à rien. Le départ finit dessus,
     l'arrivée part d'elle ;
   - `ringard-depart` : le WordArt se voit. Seulement pendant le départ : il
     n'est jamais sur la pose (voir `ringard.js`, règle 1). */

.ringard,
.ringard-mot {
  display: none;
}

html.ringard-actif .ringard {
  display: block;
}

html.ringard-depart .ringard-mot {
  display: grid;
}

.ringard {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #ff00cc;
  pointer-events: none;
}

/* La roue : arrêtée, c'est exactement le fond de /now (`now.css`, « le
   fond », même centre, même halo), et le dessin se répète tous les 90° : une
   roue qui s'arrête sur un quart de tour retombe sur lui. Ce qui la fait
   tourner, c'est `ringard.js`, et toujours d'un repos à un autre. */
.ringard-roue {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250vmax;
  height: 250vmax;
  margin: -125vmax 0 0 -125vmax;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0) 22%),
    repeating-conic-gradient(
      #ff1f1f 0 15deg,
      #ff9f00 15deg 30deg,
      #fff200 30deg 45deg,
      #2bd62b 45deg 60deg,
      #1e90ff 60deg 75deg,
      #b23cff 75deg 90deg
    );
}

/* Les étoiles, aux mêmes places sur les deux pages : tirées au hasard à
   chaque passage, elles sautaient d'une page à l'autre. */
.ringard i {
  position: absolute;
  font-style: normal;
  line-height: 1;
  color: #ffffff;
  text-shadow:
    0 0 6px #fff7a8,
    0 0 14px #ffe600;
  animation: ringard-scintille 0.6s ease-in-out infinite alternate;
}

.ringard i:nth-of-type(1) { left: 7%; top: 9%; font-size: 30px; animation-delay: -0.1s; }
.ringard i:nth-of-type(2) { left: 22%; top: 31%; font-size: 18px; animation-delay: -0.4s; }
.ringard i:nth-of-type(3) { left: 12%; top: 63%; font-size: 40px; animation-delay: -0.2s; }
.ringard i:nth-of-type(4) { left: 31%; top: 86%; font-size: 22px; animation-delay: -0.5s; }
.ringard i:nth-of-type(5) { left: 44%; top: 14%; font-size: 16px; animation-delay: -0.3s; }
.ringard i:nth-of-type(6) { left: 58%; top: 72%; font-size: 34px; animation-delay: 0s; }
.ringard i:nth-of-type(7) { left: 66%; top: 6%; font-size: 26px; animation-delay: -0.45s; }
.ringard i:nth-of-type(8) { left: 79%; top: 38%; font-size: 44px; animation-delay: -0.15s; }
.ringard i:nth-of-type(9) { left: 90%; top: 17%; font-size: 20px; animation-delay: -0.55s; }
.ringard i:nth-of-type(10) { left: 86%; top: 80%; font-size: 30px; animation-delay: -0.25s; }
.ringard i:nth-of-type(11) { left: 4%; top: 42%; font-size: 15px; animation-delay: -0.35s; }
.ringard i:nth-of-type(12) { left: 71%; top: 93%; font-size: 17px; animation-delay: -0.05s; }

@keyframes ringard-scintille {
  from {
    transform: scale(0.3) rotate(0deg);
    opacity: 0.4;
  }
  to {
    transform: scale(1.2) rotate(90deg);
    opacity: 1;
  }
}

/* Le WordArt, au milieu de l'écran. Son texte est dans le HTML de chaque
   page : celui du départ de cette page-là. */
.ringard-mot {
  position: fixed;
  inset: 0;
  place-items: center;
  padding: 16px;
  perspective: 700px;
  pointer-events: none;
  /* Safari grossit le texte quand on couche le téléphone, et pas sur toutes
     les pages de la même façon : le mot changeait de taille au passage. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.ringard-mot span {
  display: block;
  max-width: 100%;
  font:
    italic 900 clamp(40px, 10vw, 140px) / 1.05 Impact,
    'Haettenschweiler',
    'Arial Black',
    'Comic Sans MS',
    sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
  color: transparent;
  background: linear-gradient(
    180deg,
    #ff2a2a 0%,
    #ff9a00 22%,
    #fff200 42%,
    #2bd62b 60%,
    #1e90ff 80%,
    #b23cff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #1b0b4a;
  /* L'extrusion de WordArt : des ombres franches empilées, puis le flou. */
  filter: drop-shadow(2px 2px 0 #6a1b9a) drop-shadow(2px 2px 0 #4a148c)
    drop-shadow(2px 2px 0 #311b92) drop-shadow(6px 10px 8px rgba(0, 0, 0, 0.45));
  transform-origin: 50% 50%;
}

/* ------------------------------------------------------------ la console */

/* Sous la console (`z-index: -1`) : c'est elle qui tourne et rapetisse
   devant, et le fond se découvre derrière. Le mot, lui, est au-dessus de tout,
   et il prend les clics : rien ne se rouvre pendant qu'on part. Pendant
   qu'elle revient, c'est la console qui ne les prend pas. */
html[data-ringard='console'] .ringard {
  z-index: -1;
}

html[data-ringard='console'] .ringard-mot {
  z-index: 10000;
  pointer-events: auto;
}

html[data-ringard='console'].ringard-actif #app {
  pointer-events: none;
}

/* **Le fond noir de la page passait devant l'arc-en-ciel** (28/10). Un
   `z-index: -1` se peint sous le fond de `body` dès que `html` a le sien,
   et c'est le cas depuis l'écran de chargement (`index.html`). Pendant le
   passage, `body` est transparent : seul reste le noir du canevas, sous le
   décor. L'écran de chargement (`z-index: 200`) attend caché, et le lien vers
   la version texte, que la console qui tourne ramenait dans le champ, aussi. */
html[data-ringard='console'].ringard-actif body {
  background: transparent;
}

html[data-ringard='console'].ringard-actif #chargement,
html[data-ringard='console'].ringard-actif .lien-texte {
  visibility: hidden;
}

/* La pose : la console réduite à un point, là où le tourbillon la laisse —
   et cachée, ce point : /now, en face, n'en a pas. */
html[data-ringard='console'].ringard-pose #app {
  transform: scale(0.01);
  visibility: hidden;
}

/* ------------------------------------------------------------------ /now */

/* Le décor SOUS la page (`z-index: 0`, la page est à 1) : c'est la page
   que l'étoile découpe, et le décor se voit autour. Le mot du départ passe
   devant elle, qui se referme. */
html[data-ringard='now'] .ringard {
  z-index: 0;
}

html[data-ringard='now'] .ringard-mot {
  z-index: 2;
}

/* La pose : la page réduite à une étoile de rien. */
html[data-ringard='now'].ringard-pose .page {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
}