/* Groupe « intro » : intro, logo animé (point qui saute), entrée du hero.
   Tout le mouvement est fait par js/intro.js (Web Animations API).
   Styles de repos : calque .intro dans sections.css (affiché seulement sous html.has-intro,
   que js/intro.js pose avant le premier affichage quand l'intro est jouée, puis retire avec le
   calque) ; logos .logo et .logo--foot dans components.css, géométrie du logo officiel ci-dessous.
   Les pages légales chargent aussi ce fichier, pour le même logo. */

/* ---- Logo officiel (em de 1000) ----
   « nostia » en Clash Display 600, interlettrage -0,035 em partout (barre, intro, pied de page,
   vidéo, pages légales) ; point rond de 0,2 em (r 100), centre à cx 2199 et cy -680 :
   - verticalement, bas du point à 0,58 em de la ligne de base, soit 0,08 em au-dessus de la
     barre du « ı » (haut de la barre à 0,5 em) ;
   - horizontalement, centré pile sur la barre du « ı » (2124 à 2274, centre 2199). Le point
     part de la fin de la case
     (origine + 0,248 em + interlettrage) : left le ramène de 0,224 em plus l'interlettrage, soit
     origine + 0,124 em au centre.
   Une seule géométrie, au repos comme à la fin de chaque
   animation (intro, saut du logo de la barre et du pied de page, vidéo de présentation). */
.logo,
.logo--foot,
.intro__word {
  --logo-ls: -0.035em;
  letter-spacing: var(--logo-ls);
}
.logo__dot,
.intro__dot {
  position: relative;
  display: inline-block;
  vertical-align: 0.58em;
  left: calc(-0.224em - var(--logo-ls));
  top: auto;
  width: 0.2em;
  height: 0.2em;
  margin: -0.2em -0.2em 0 0;             /* ni hauteur de ligne ni chasse */
}

/* Un toucher passe l'intro : pas de surbrillance de toucher sur tout le calque. */
.intro { -webkit-tap-highlight-color: transparent; }

/* ---- Fin de l'intro (d'après la vidéo d'animation du logo, 2,75 à 5,1 s) ----
   Version claire du logo, ajoutée par js/intro.js au-dessus du mot : aplat bordeaux, lettres
   crème, point pêche. Elle est dévoilée par un cercle qui part du point posé sur le « ı »
   (clip-path animé), donc cachée par défaut. Le point pêche est posé en px sur le point du mot
   foncé (même géométrie), hors du « ı », pour ne pas suivre la vague des lettres. */
.intro__light {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acc);
  clip-path: circle(0px at 50% 50%);
}
.intro__light .intro__word { color: var(--on); }
.intro__light .intro__letter { opacity: 1; }
.intro__light .intro__i { color: var(--on); }
.intro__spot {
  position: absolute;
  border-radius: 50%;
  background: var(--hld);
  transform: scale(0);
}

/* À l'impression, le calque ne masque jamais la page, même pendant l'intro. */
@media print {
  .has-intro .intro { display: none; }
}