/* Vespère — animations & motion layer
   Octobre 2026 : préchargeur et curseur personnalisé retirés (site plus sobre).
   La transition verte entre les pages (.page-trans) reste la seule signature. */

/* ── SCROLL REVEALS (titres, listes, chiffres, photos) ──
   Masqués seulement quand le script tourne (classe .js posée dans le <head>) :
   sans JS, tout reste visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rev-delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Split-text words for h1/h2 */
.split-text { display: inline; }
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.18em;
}
.split-word:last-child { margin-right: 0; }
.js .split-word > span {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.split-word.is-in > span { transform: translateY(0); }

/* Photo reveal — clip-path bottom up */
.js .ph-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(.76,0,.24,1);
  transition-delay: var(--rev-delay, 0ms);
}
.ph-reveal.is-in { clip-path: inset(0 0 0 0); }

/* Vespère s'engage : le filet de chaque ligne se dessine pendant que la ligne apparaît */
.engage-item::before, .engage-item:last-child::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(.65,.05,.36,1);
  transition-delay: var(--rev-delay, 0ms);
}
.js .engage-item::before, .js .engage-item:last-child::after { transform: scaleX(0); }
.engage-item::before { top: 0; }
.engage-item:last-child::after { bottom: 0; transition-delay: calc(var(--rev-delay, 0ms) + 200ms); }
.engage-item.is-in::before, .engage-item.is-in:last-child::after { transform: scaleX(1); }

/* Téléphone : apparitions deux fois plus courtes, même ordre (Apelle, 23/10).
   Jamais de transform ici : .reveal.is-in serait écrasé. */
@media (max-width: 768px) {
  .js .reveal { transition-duration: .5s; transition-delay: calc(var(--rev-delay, 0ms) * .5); }
  .js .split-word > span { transition-duration: .6s; }
  .js .ph-reveal { transition-duration: .7s; transition-delay: calc(var(--rev-delay, 0ms) * .5); }
  .engage-item::before { transition-duration: .5s; }
}

/* ── PAGE TRANSITION ─────────────────────────────────── */
.page-trans {
  position: fixed; inset: 0;
  z-index: 9500;
  background: var(--green);
  transform: translateY(100%);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.page-trans.is-in {
  animation: pageTransIn 0.4s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes pageTransIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0%); }
}
/* Page d'arrivée : le voile couvre déjà l'écran, le logo y monte lettre par lettre
   (comme l'ancien préchargeur, Watt, 18/10), puis le voile sort vers le haut (js/anim.js). */
.page-trans.is-arriving { transform: none; }
.page-trans.is-leaving { animation: pageTransOut 0.45s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes pageTransOut {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}
.page-trans-mark {
  display: flex; overflow: hidden; padding: 0 0.1em;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(56px, 9vw, 120px); line-height: 1.25; letter-spacing: -0.025em;
  color: var(--cream);
}
.page-trans-mark span {
  display: inline-block; transform: translateY(110%);
  animation: pageTransLetter 0.35s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 25ms);
}
@keyframes pageTransLetter { to { transform: translateY(0); } }

/* ── NAV link underline animation (seule définition) ─────── */
body.site .site-nav ul a {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s;
}
body.site .site-nav ul a:hover { color: var(--accent); }
body.site .site-nav ul a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(.6,.05,.4,1);
}
body.site .site-nav ul a:hover::after,
body.site .site-nav ul a.current::after {
  transform: scaleX(1);
  transform-origin: left center;
}
/* Page courante : trait court de 16 px (le survol d'un autre lien trace le trait entier) */
body.site .site-nav ul a.current::after { width: 16px; }

/* ── BUTTON arrow micro-anim refinement ─────────── */
body.site .btn .arr,
body.site .btn-link {
  display: inline-block;
}
body.site .btn:hover .arr {
  transform: translateX(4px);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}

/* ── Survol des boutons d'action : un aplat encre traverse le bouton ──
   Même geste et même courbe que le trait des liens (nav, .btn-link) :
   entre par la gauche au survol, ressort par la droite à la sortie. */
body.site .btn, body.site .site-nav .nav-cta {
  position: relative; isolation: isolate; overflow: hidden;
  transition: background-color .3s, border-color .45s, color .2s .12s;
}
body.site .btn::before, body.site .site-nav .nav-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s cubic-bezier(.65,.05,.36,1);
}
body.site .btn:hover::before, body.site .btn:focus-visible::before,
body.site .site-nav .nav-cta:hover::before, body.site .site-nav .nav-cta:focus-visible::before {
  transform: scaleX(1); transform-origin: left center;
}
/* Sur les bandes sombre et verte, les boutons sont couleur papier : aplat vert */
body.site .section.dark .btn::before, body.site .section.green .btn::before { background: var(--green); }

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .split-word > span, .ph-reveal,
  .page-trans, .page-trans-mark span {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
  /* Filets des engagements : affichés d'emblée */
  .engage-item::before, .engage-item:last-child::after { transform: scaleX(1) !important; transition: none !important; }
  /* Boutons : l'aplat se pose d'un coup, sans mouvement */
  body.site .btn::before, body.site .site-nav .nav-cta::before { transition: none; }
  body.site .btn:hover .arr { transform: none; }
}