/* ==========================================================================
   Animations : peu nombreuses, courtes, jamais nécessaires à la compréhension.
   - entrée de page (titre dévoilé, puis le reste en léger décalé) ;
   - apparition douce des blocs au défilement (avec motion.js) ;
   - micro-interactions : retours, explications, compléments, survols.
   Tout est désactivé si l'utilisateur a demandé moins d'animations
   (prefers-reduced-motion) et à l'impression.

   Pour retirer les animations : supprimer le lien vers ce fichier et le
   script motion.js dans index.html et fiche.html.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* départ vif, arrivée douce */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 160ms;   /* survols, changements d'état */
  --dur-ui: 320ms;      /* retours, ouvertures */
  --dur-reveal: 800ms;  /* entrée de page, apparition des blocs */
  --stagger: 70ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* ------------------------------------------------------------------------
     1. Entrée de page
     ------------------------------------------------------------------------ */

  .fiche-head > *,
  .home-hero > * {
    animation: rise var(--dur-reveal) var(--ease-out) both;
  }

  /* Le grand titre sort d'un masque, comme une ligne qui monte */
  .fiche-head__title,
  .home-hero__title {
    animation-name: title-in;
    animation-duration: calc(var(--dur-reveal) * 1.25);
  }

  .fiche-head > :nth-child(2),
  .home-hero > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
  .fiche-head > :nth-child(3),
  .home-hero > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
  .fiche-head > :nth-child(4),
  .home-hero > :nth-child(4) { animation-delay: calc(var(--stagger) * 4); }
  .fiche-head > :nth-child(5) { animation-delay: calc(var(--stagger) * 5); }
  .fiche-head > :nth-child(6) { animation-delay: calc(var(--stagger) * 6); }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }

  @keyframes title-in {
    from {
      clip-path: inset(0 0 100% 0);
      transform: translateY(0.35em);
    }
    to {
      clip-path: inset(-20% -5% -25% -5%); /* ne coupe ni accents ni jambages */
      transform: none;
    }
  }

  /* ------------------------------------------------------------------------
     2. Apparition au défilement (classes posées par motion.js)
     ------------------------------------------------------------------------ */

  .motion .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* ------------------------------------------------------------------------
     3. Micro-interactions
     ------------------------------------------------------------------------ */

  /* Transitions de survol et d'état */
  .btn,
  .copy,
  .option,
  .tree__node,
  .toc__list a,
  .index-row,
  .more > summary,
  a {
    transition:
      background-color var(--dur-micro) ease,
      color var(--dur-micro) ease,
      border-color var(--dur-micro) ease,
      box-shadow var(--dur-micro) ease,
      text-decoration-color var(--dur-micro) ease;
  }

  .btn:active {
    transform: translateY(1px);
  }

  /* Retours de question et de terminal : chaque nouveau type de retour
     rejoue l'apparition (un nom d'animation par variante) */
  .feedback--success { animation: feedback-a var(--dur-ui) var(--ease-out); }
  .feedback--error { animation: feedback-b var(--dur-ui) var(--ease-out); }
  .feedback--warning { animation: feedback-c var(--dur-ui) var(--ease-out); }
  .feedback--neutral { animation: feedback-d var(--dur-ui) var(--ease-out); }

  @keyframes feedback-a { from { opacity: 0; transform: translateY(6px); } }
  @keyframes feedback-b { from { opacity: 0; transform: translateY(6px); } }
  @keyframes feedback-c { from { opacity: 0; transform: translateY(6px); } }
  @keyframes feedback-d { from { opacity: 0; transform: translateY(6px); } }

  .question__answer:not([hidden]),
  .term__hints li,
  .tree__children:not([hidden]) {
    animation: rise var(--dur-ui) var(--ease-out);
  }

  .option__mark:not(:empty) {
    animation: fade-in var(--dur-ui) var(--ease-out);
  }

  .term__entry {
    animation: fade-in 200ms var(--ease-out);
  }

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

  /* Compléments repliables : le « + » pivote en « × » */
  .more > summary::after,
  .more[open] > summary::after,
  .toc__toggle::after,
  .toc__toggle[aria-expanded='true']::after {
    content: '+';
    transition: transform var(--dur-ui) var(--ease-out);
  }

  .more[open] > summary::after,
  .toc__toggle[aria-expanded='true']::after {
    transform: rotate(45deg);
  }

  /* … et s'ouvrent en glissant, là où le navigateur sait animer la hauteur */
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }

    .more::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--dur-ui) var(--ease-out),
        content-visibility var(--dur-ui) allow-discrete;
    }

    .more[open]::details-content {
      block-size: auto;
    }
  }

  /* Accueil : une flèche glisse au survol d'une fiche disponible */
  .index-row:has(a) .index-row__meta::after {
    content: '→';
    display: inline-block;
    margin-left: var(--space-2);
    opacity: 0;
    transform: translateX(-6px);
    transition:
      opacity var(--dur-ui) var(--ease-out),
      transform var(--dur-ui) var(--ease-out);
  }

  .index-row:has(a):hover .index-row__meta::after,
  .index-row:has(a:focus-visible) .index-row__meta::after {
    opacity: 1;
    transform: none;
  }
}

/* Défilement fluide (Lenis) : règles nécessaires reprises de lenis.css */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto; /* Lenis remplace le défilement doux natif */
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Cibles de lien interne : le focus est donné par motion.js, sans contour */
[tabindex='-1']:focus {
  outline: none;
}

/* À l'impression, tout est visible et immobile */
@media print {
  .motion .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}