/* Ansible managed */
/*
 * Feuille de style de la page d'attente des sites vitrine.
 *
 * Pourquoi un fichier separe, alors que la page tient a etre autonome : la
 * politique de securite du contenu posee sur les vhosts publics
 * (`nginx_csp_sites`) refuse `unsafe-inline` dans `style-src`. Un bloc <style>
 * dans le HTML serait donc bloque par le navigateur, et la page arriverait sans
 * aucune mise en forme -- panne visible, mais dont la cause ne l'est pas.
 *
 * C'est exactement la demarche du rapport de pre-audit (section 7.2,
 * « CSS externalise, CSP-compliant »). Le cout est d'une requete
 * supplementaire, sur le meme domaine, mise en cache par le navigateur.
 *
 * Ce fichier n'est ecrit qu'en meme temps que la page d'attente elle-meme,
 * c'est-a-dire tant que /var/www/<site>/index.html n'existe pas. Des que tu
 * deposes ton propre contenu, ni l'un ni l'autre ne sont plus touches.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --fond-profond: #04140f;
  --fond-haut:    #0a3a2a;
  --texte:        #e7f5ee;
  --texte-doux:   #8fb5a4;
  --emeraude:     #35c98d;
  --sol:          #062018;
}

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--fond-profond);
  color: var(--texte);
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   Le fond.

   Trois halos flous qui derivent lentement, a des vitesses et sur des
   trajectoires differentes : leurs recouvrements ne se repetent donc
   qu'au bout de plusieurs minutes, ce qui suffit a ne jamais donner
   l'impression d'une boucle.

   On n'anime que `transform` et `opacity` -- les deux seules proprietes
   que le navigateur sait animer sans recalculer la mise en page. Le
   `filter: blur()` est pose une fois et n'est jamais anime, sinon chaque
   image imposerait un nouveau flou.
   --------------------------------------------------------------------- */
.fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--fond-haut) 0%, var(--fond-profond) 70%);
}

.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}

.halo-1 {
  width: 46vmax; height: 46vmax;
  top: -14vmax; left: -10vmax;
  background: radial-gradient(circle, #14a97a 0%, transparent 70%);
  animation: deriver-1 26s ease-in-out infinite alternate;
}

.halo-2 {
  width: 38vmax; height: 38vmax;
  top: 8vmax; right: -12vmax;
  background: radial-gradient(circle, #0f7a8c 0%, transparent 70%);
  animation: deriver-2 34s ease-in-out infinite alternate;
}

.halo-3 {
  width: 30vmax; height: 30vmax;
  bottom: -6vmax; left: 32%;
  background: radial-gradient(circle, #8ad66b 0%, transparent 70%);
  opacity: .3;
  animation: deriver-3 42s ease-in-out infinite alternate;
}

@keyframes deriver-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vmax, 8vmax, 0) scale(1.25); }
}
@keyframes deriver-2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-16vmax, 12vmax, 0) scale(.9); }
}
@keyframes deriver-3 {
  from { transform: translate3d(-8vmax, 0, 0) scale(.95); }
  to   { transform: translate3d(10vmax, -6vmax, 0) scale(1.3); }
}

/* Voile de lumiere qui balaie la page, tres lentement. C'est ce qui empeche
   le fond de paraitre fige quand les halos sont au meme endroit. */
.voile {
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255, 255, 255, .045) 50%,
    transparent 58%);
  animation: balayer 19s linear infinite;
  will-change: transform;
}

@keyframes balayer {
  from { transform: translate3d(-30%, -10%, 0) rotate(0deg); }
  to   { transform: translate3d(30%, 10%, 0) rotate(360deg); }
}

/* ---------------------------------------------------------------------
   Le contenu
   --------------------------------------------------------------------- */
.contenu {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .75rem;
  padding: 2rem 1.5rem 9rem;
  text-align: center;
}

h1 {
  margin: 0;
  max-width: 100%;
  /* Un titre long ou sans espace ne doit pas deborder d'un ecran de
     telephone : `body` est en `overflow: hidden`, ce qui le tronquerait
     sans barre de defilement pour aller le lire. */
  overflow-wrap: anywhere;
  font-size: clamp(2.25rem, 9vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #ffffff;
}

.bienvenue {
  margin: 0;
  font-size: clamp(.8rem, 2.6vw, 1rem);
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;      /* compense la letter-spacing du dernier caractere */
  text-transform: uppercase;
  color: var(--texte-doux);
}

.trait {
  width: 3.5rem;
  height: 2px;
  margin-top: .5rem;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--emeraude), transparent);
  opacity: .8;
}

/* ---------------------------------------------------------------------
   Le crocodile, et le sol sur lequel il avance
   --------------------------------------------------------------------- */
.berge {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 8.5rem;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to top, var(--sol) 38%, transparent 100%);
}

.berge::after {          /* la ligne de sol */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 201, 141, .28) 20%, rgba(53, 201, 141, .28) 80%, transparent);
}

.croco {
  position: absolute;
  bottom: 2.4rem;
  left: 0;
  width: clamp(150px, 24vw, 250px);
  height: auto;
  transform-origin: 50% 50%;
  animation: traverser 24s linear infinite;
  will-change: transform;
}

/* De DROITE a GAUCHE : depart hors ecran a droite (100vw), arrivee hors ecran
   a gauche (-100% de sa propre largeur). Le crocodile est dessine tourne vers
   la gauche, il avance donc bien dans le sens ou il regarde.

   Au milieu de la traversee (46%-58%, autour du centre de l'ecran), un salto
   avant : un petit saut (translateY) accompagne d'un tour complet (rotate).
   Le reste du temps il ne fait que marcher, comme avant -- le tour complet
   ramene l'orientation a l'identique, donc rien ne parait retourne ni avant
   ni apres la figure. */
@keyframes traverser {
  0%   { transform: translateX(100vw); }
  42%  { transform: translateX(54vw); }
  46%  { transform: translateX(51vw) translateY(-8px)  rotate(-90deg); }
  50%  { transform: translateX(50vw) translateY(-34px) rotate(-180deg); }
  54%  { transform: translateX(49vw) translateY(-8px)  rotate(-270deg); }
  58%  { transform: translateX(47vw) translateY(0)     rotate(-360deg); }
  100% { transform: translateX(-100%) rotate(-360deg); }
}

/* Les pattes. `transform-box: view-box` fait porter `transform-origin` sur le
   repere du viewBox SVG : sans lui, l'origine serait celle de la boite CSS et
   les pattes pivoteraient autour d'un point qui n'a rien a voir avec la
   hanche. Les deux diagonales sont en opposition de phase (`reverse`), ce qui
   donne une demarche plutot qu'un sautillement. */
.patte {
  transform-box: view-box;
  animation: pas .62s ease-in-out infinite alternate;
}
.p1 { transform-origin: 96px 60px; }
.p2 { transform-origin: 112px 61px; animation-direction: alternate-reverse; }
.p3 { transform-origin: 146px 59px; animation-direction: alternate-reverse; }
.p4 { transform-origin: 162px 60px; }

@keyframes pas {
  from { transform: rotate(-17deg); }
  to   { transform: rotate(17deg); }
}

/* Le corps monte et descend d'un cheveu, au rythme des pattes : c'est ce
   leger contretemps qui fait lire le mouvement comme une marche. */
.corps {
  transform-box: view-box;
  transform-origin: 50% 100%;
  animation: demarche .62s ease-in-out infinite alternate;
}

@keyframes demarche {
  from { transform: translateY(0); }
  to   { transform: translateY(-1.6px); }
}

.queue {
  transform-box: view-box;
  transform-origin: 150px 48px;
  animation: fouetter 1.9s ease-in-out infinite alternate;
}

@keyframes fouetter {
  from { transform: rotate(-4.5deg); }
  to   { transform: rotate(4.5deg); }
}

.oeil-paupiere {
  transform-box: view-box;
  transform-origin: 79px 45px;
  animation: cligner 6.5s ease-in-out infinite;
}

/* Le clignement occupe 3 % du cycle : le reste du temps la paupiere est
   entierement repliee, donc invisible. */
@keyframes cligner {
  0%, 92%, 100% { transform: scaleY(0); }
  95%           { transform: scaleY(1); }
}

/* Le salto est le point de la page : il joue toujours, meme si le systeme
   du visiteur demande `prefers-reduced-motion: reduce`. */