/* Voile d'accueil et transitions entre les pages
   ─────────────────────────────────────────────
   Deux choses distinctes, réunies ici parce qu'elles répondent à la même
   question : ce que le visiteur voit entre deux états de la page. */

/* 1. Le voile d'accueil
   Il ne paraît qu'une fois par session, à la première page ouverte : répété
   à chaque navigation, il deviendrait une taxe sur la lecture. Le fil de la
   lignée s'y dessine de haut en bas, puis le voile s'efface.

   Sa disparition est une animation, jamais un retrait par script : le jour
   où le JavaScript échoue, un voile qui attendrait qu'on le retire resterait
   collé sur la page. Ici, sans script, il n'apparaît même pas — c'est
   marqueurs.js qui pose js-voile, et lui seul. */
.voile {
  display: none;
}

html.js-voile .voile {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fond);
  animation: voile-sortie 1150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* L'état final est tenu par forwards : voile transparent, hors du flux des
   clics, et retiré de l'affichage pour ne plus rien coûter. */
@keyframes voile-sortie {
  0%, 62% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

html.js-voile .voile {
  pointer-events: none;
}

.voile__contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

/* Le fil descend le long du nom, comme il descend le long des pages. */
.voile__fil {
  width: 1px;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  overflow: visible;
}

.voile__trait {
  stroke: var(--accent);
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: voile-fil 620ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes voile-fil {
  to {
    stroke-dashoffset: 0;
  }
}

.voile__nom {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1;
  color: var(--texte);
  opacity: 0;
  animation: voile-entree 520ms 300ms ease forwards;
}

.voile__metier {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--libelle);
  opacity: 0;
  animation: voile-entree 520ms 420ms ease forwards;
}

@keyframes voile-entree {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 2. Les transitions entre pages
   Le site est fait de vraies pages : la navigation entre documents est donc
   confiée au navigateur, en CSS, sans une ligne de script ni de routeur.
   Les navigateurs qui ne la connaissent pas naviguent comme avant. */
@view-transition {
  navigation: auto;
}

/* L'en-tête et la barre d'action existent des deux côtés de la navigation :
   nommés, ils sont reconnus comme un même élément et restent en place au
   lieu de disparaître puis revenir. */
.entete {
  view-transition-name: entete;
}

.barre-action {
  view-transition-name: barre-action;
}

/* Le reste de la page se croise en fondu, avec un souffle vers le haut :
   assez pour qu'on sente le passage, assez peu pour ne pas attendre. */
::view-transition-old(root) {
  animation: page-sortie 180ms ease both;
}

::view-transition-new(root) {
  animation: page-entree 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes page-sortie {
  to {
    opacity: 0;
  }
}

@keyframes page-entree {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Mouvement réduit : ni voile, ni transition. La règle globale de base.css
   ramène déjà toutes les durées à presque rien, ce qui suffirait à rendre le
   voile invisible ; on préfère ne pas le poser du tout, et rendre au
   navigateur sa navigation ordinaire. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html.js-voile .voile,
  .voile {
    display: none;
  }
}