/* ============================================================================
   Transition de page — un voile orange et le logo Cosmeek.
   Au clic sur un lien interne, le voile monte du bas de l'écran et couvre la
   page ; la page suivante s'ouvre sous lui, puis il s'envole vers le haut.
   Sans JavaScript, ou en mouvement réduit, le voile n'existe pas : le lien
   se suit normalement. Voir js/transition.js.
   ========================================================================= */

:root {
  --z-veil: 100;
  --d-veil: 520ms;
  --d-veil-logo: 300ms;
}

.veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  display: grid;
  place-items: center;
  background: var(--c-orange);
  /* Bord supérieur arrondi, comme une vague qui monte : le voile n'est pas un
     simple rideau. L'arrondi disparaît avec le mouvement (voir keyframes). */
  border-radius: 50% 50% 0 0 / 10vh 10vh 0 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(0, 101%, 0);
  will-change: transform;
}

.veil__logo {
  inline-size: clamp(132px, 14vw, 200px);
  block-size: auto;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

/* ── Sortie : le voile couvre la page ──────────────────────────────────── */
html.veil-cover .veil {
  visibility: visible;
  pointer-events: auto;
  animation: veil-cover var(--d-veil) var(--e-inout) both;
}

html.veil-cover .veil__logo {
  animation: veil-logo-in var(--d-veil-logo) var(--e-out) calc(var(--d-veil) * 0.4) both;
}

/* ── Entrée : la page arrive voilée, puis le voile s'envole ───────────────
   Le script en `<head>` pose `veil-in` avant le premier rendu : pas d'éclair
   de page nue. Le filet de secours (3 s) libère l'écran même si le JS ne
   répond jamais. */
html.veil-in .veil {
  visibility: visible;
  pointer-events: auto;
  transform: none;
  border-radius: 0;
}

html.veil-in .veil__logo {
  opacity: 1;
  transform: none;
}

/* Filet de secours : même mouvement sous un autre nom, pour que la pose de
   `veil-out` le remplace vraiment au lieu de modifier l'animation en cours. */
html.veil-in:not(.veil-out) .veil {
  animation: veil-away-fb var(--d-veil) var(--e-inout) 3s both;
}

html.veil-in.veil-out .veil {
  animation: veil-away var(--d-veil) var(--e-inout) both;
}

html.veil-in.veil-out .veil__logo {
  animation: veil-logo-out calc(var(--d-veil) * 0.4) var(--e-inout) both;
}

@keyframes veil-cover {
  from {
    transform: translate3d(0, 101%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    border-radius: 0;
  }
}

/* ── Arrivée du contenu : la page se pose pendant que le voile s'en va ──── */
html.veil-in:not(.veil-out) main {
  animation: veil-arrive-fb 600ms var(--e-out) 3s both;
}

html.veil-in.veil-out main {
  animation: veil-arrive 700ms var(--e-out) 80ms both;
}

@keyframes veil-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
}

@keyframes veil-arrive-fb {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
}

/* Pages légales : un `transform` sur <main>, même une animation qui s'achève
   sur l'identité, en fait le bloc conteneur des éléments `position: fixed` qu'il
   contient. Le voile du bas et le logo se calaient alors sur la page entière
   (tout en bas) jusqu'à la fin de la transition, et sautaient à leur place
   ensuite. Ici <main> ne fait que fondre ; la montée de 28 px est portée par le
   titre et le texte, qui ne contiennent rien de fixe. */
html.veil-in:not(.veil-out) main:has(> .legal) {
  animation: veil-fade-fb 600ms var(--e-out) 3s both;
}

html.veil-in.veil-out main:has(> .legal) {
  animation: veil-fade 700ms var(--e-out) 80ms both;
}

html.veil-in:not(.veil-out) main:has(> .legal) :is(.legal__title, .legal__doc) {
  animation: veil-arrive-fb 600ms var(--e-out) 3s both;
}

html.veil-in.veil-out main:has(> .legal) :is(.legal__title, .legal__doc) {
  animation: veil-arrive 700ms var(--e-out) 80ms both;
}

@keyframes veil-fade {
  from {
    opacity: 0;
  }
}

@keyframes veil-fade-fb {
  from {
    opacity: 0;
  }
}

@keyframes veil-away-fb {
  from {
    transform: translate3d(0, 0, 0);
    border-radius: 0;
  }
  to {
    transform: translate3d(0, -101%, 0);
    visibility: hidden;
  }
}

@keyframes veil-away {
  from {
    transform: translate3d(0, 0, 0);
    border-radius: 0;
  }
  to {
    transform: translate3d(0, -101%, 0);
    border-radius: 0 0 50% 50% / 0 0 10vh 10vh;
    visibility: hidden;
  }
}

@keyframes veil-logo-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes veil-logo-out {
  to {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .veil {
    display: none;
  }
}