/* ==========================================================================
   SH8PE — Couche d'animations premium (premium.css)
   --------------------------------------------------------------------------
   Additive et 100 % réversible : rien n'est modifié dans styles.css.
   Supprimer les deux lignes premium.css / premium.js dans chaque page
   suffit à tout annuler.

   Une seule COURBE partagée pour tout le site : --pv-ease.
   Les durées explicitement imposées par le cahier des charges (sortie de
   page 320 ms, entrée 700 ms, masque 900 ms) sont exposées en variables ;
   --pv-dur est la durée de référence du site (dévoilement + entrée de page).
   ========================================================================== */

:root {
  --pv-ease: cubic-bezier(0.22, 0.61, 0.28, 1); /* courbe unique du site */
  --pv-dur: 700ms;        /* référence : dévoilement au scroll + entrée de page */
  --pv-dur-exit: 320ms;   /* sortie de page (fondu) */
  --pv-dur-clip: 900ms;   /* ouverture du masque des images de section */
  --pv-dur-tap: 180ms;    /* micro-interaction boutons/liens */
}

/* --------------------------------------------------------------------------
   1. Transition entre les pages — API View Transitions, CSS pur.
   Sortie : fondu (320 ms). Entrée : fondu + montée de 14 px (700 ms).
   Firefox ignore @view-transition et les pseudo-éléments : rien ne casse.
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: pv-page-exit var(--pv-dur-exit) var(--pv-ease) both;
}

::view-transition-new(root) {
  animation: pv-page-enter var(--pv-dur) var(--pv-ease) both;
}

@keyframes pv-page-exit {
  to { opacity: 0; }
}

@keyframes pv-page-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   2. Dévoilement au scroll — montée de 18 px en fondu, une seule fois.
   Les classes sont posées par premium.js (aucune modification du HTML).
   La cascade (transition-delay) est appliquée par le script.
   -------------------------------------------------------------------------- */
.pv-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--pv-dur) var(--pv-ease),
              transform var(--pv-dur) var(--pv-ease);
  will-change: opacity, transform;
}

.pv-reveal.pv-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   3. Images de section — masque clip-path qui s'ouvre de bas en haut (900 ms).
   inset(100% 0 0 0) = entièrement masquée ; inset(0) = pleinement révélée.
   -------------------------------------------------------------------------- */
.pv-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--pv-dur-clip) var(--pv-ease);
  will-change: clip-path;
}

.pv-clip.pv-in {
  clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   4. Boutons / liens d'action.
   :active -> scale(0.975) (partout). :hover -> -2 px (uniquement au survol réel).
   NB : styles.css applique déjà un translateY(-2px) au :hover de certains
   boutons ; on ne le supprime pas (on ne touche pas aux styles existants),
   on ajoute seulement la transition, le retour tactile et le gate hover.
   -------------------------------------------------------------------------- */
.btn {
  transition: transform var(--pv-dur-tap) var(--pv-ease);
}

.btn:active {
  transform: scale(0.975);
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   Accessibilité — prefers-reduced-motion: reduce neutralise absolument tout.
   (premium.js ne masque de toute façon rien dans ce mode.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  .pv-reveal,
  .pv-reveal.pv-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .pv-clip,
  .pv-clip.pv-in {
    clip-path: none !important;
    transition: none !important;
  }

  .btn {
    transition: none !important;
  }

  .btn:active,
  .btn:hover {
    transform: none !important;
  }
}