/* =========================================================================
   Mouvement — effets discrets pour une navigation fluide (chargé après les feuilles de page)
   Tout est facultatif : sans ces règles (ancien navigateur, mouvement réduit, impression),
   le contenu reste entièrement visible et utilisable.
   1. Transitions entre pages (View Transitions inter-documents : Chrome/Edge 126+, Safari 18.2+)
   2. Couverture d'un livre qui « voyage » de la liste à la fiche (avec assets/js/motion.js)
   3. Titres de section et images des chapitres qui apparaissent au défilement (animation-timeline)
   4. Barre de lecture en haut des articles et essais (animation-timeline: scroll())
   5. Reflet qui glisse sur les couvertures au survol
   6. Soulignement animé du menu principal
   7. Ouverture en rideau du menu mobile
   ========================================================================= */

@media screen and (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Transitions entre pages ---------- */
  @view-transition { navigation: auto; }

  /* L'en-tête reste immobile pendant que la page change dessous */
  .site-header { view-transition-name: site-header; }

  ::view-transition-old(root) { animation: motion-page-out .22s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: motion-page-in .45s cubic-bezier(.2, .7, .2, 1) .06s both; }

  /* ---------- 2. Couverture partagée liste → fiche ----------
     Sur la fiche, la grande couverture porte le nom ; sur la page de départ, motion.js le pose
     uniquement sur la couverture cliquée (un nom doit être unique dans la page). */
  .bk-detail-cover .book-cover { view-transition-name: book-cover; }
  ::view-transition-group(book-cover) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  ::view-transition-old(book-cover), ::view-transition-new(book-cover) { animation-duration: .55s; }

  /* ---------- 3. Apparitions au défilement ---------- */
  @supports (animation-timeline: view()) {
    /* Têtes de section : le texte monte légèrement en entrant dans l'écran */
    .section-head, .chapter-text, .chapter-num, .bk-section-head, .bk-others-head, .more-head {
      animation: motion-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    /* Grandes images des chapitres de l'accueil : léger dézoom dans leur cadre, comme un travelling
       arrière. Le cadre a overflow: hidden, d'où une chronologie nommée posée sur le cadre lui-même.
       (Les blocs placés dans un parent overflow: hidden, ex. .bk-science, ne s'animent pas : voulu.) */
    .chapter-media { view-timeline: --motion-frame block; }
    .chapter-media img {
      animation: motion-unzoom linear both;
      animation-timeline: --motion-frame;
      animation-range: entry 0% cover 55%;
    }
  }

  /* ---------- 4. Barre de progression de lecture (articles, essais) ---------- */
  @supports (animation-timeline: scroll()) {
    body:has(.article--journalism, .article--research)::before {
      content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px;
      background: linear-gradient(90deg, var(--brass-deep), var(--brass));
      transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
      animation: motion-progress linear both;
      animation-timeline: scroll(root block);
      view-transition-name: reading-progress;
    }
  }

  /* ---------- 5. Reflet sur les couvertures au survol ---------- */
  @media (hover: hover) {
    .book-cover::before {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%);
      translate: -110% 0;
    }
    a:hover > .book-cover::before, a:focus-visible > .book-cover::before {
      translate: 110% 0; transition: translate 1s cubic-bezier(.2, .7, .2, 1);
    }
    a:hover > .book-cover, a:focus-visible > .book-cover {
      box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 16px 26px -8px rgba(0,0,0,.5), 0 40px 70px -24px rgba(0,0,0,.55);
    }
  }

  /* ---------- 6. Menu principal : trait de laiton qui se dessine ---------- */
  .main-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: var(--brass);
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  }
  .main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current]::after {
    transform: scaleX(1); transform-origin: 0 50%;
  }

  /* ---------- 7. Menu mobile : ouverture en rideau, liens en cascade ---------- */
  @media (max-width: 59.99rem) {
    .mobile-menu[open] .mobile-nav { animation: motion-curtain .45s cubic-bezier(.2, .7, .2, 1) backwards; }
    .mobile-menu[open] .mobile-nav li { animation: motion-item .5s cubic-bezier(.2, .7, .2, 1) backwards; }
    .mobile-menu[open] .mobile-nav li:nth-child(1) { animation-delay: .08s; }
    .mobile-menu[open] .mobile-nav li:nth-child(2) { animation-delay: .12s; }
    .mobile-menu[open] .mobile-nav li:nth-child(3) { animation-delay: .16s; }
    .mobile-menu[open] .mobile-nav li:nth-child(4) { animation-delay: .2s; }
    .mobile-menu[open] .mobile-nav li:nth-child(5) { animation-delay: .24s; }
    .mobile-menu[open] .mobile-nav li:nth-child(6) { animation-delay: .28s; }
    .mobile-menu[open] .mobile-nav li:nth-child(n+7) { animation-delay: .32s; }
  }
}

@keyframes motion-page-out { to { opacity: 0; } }
@keyframes motion-page-in { from { opacity: 0; translate: 0 .9rem; } }
@keyframes motion-rise { from { opacity: 0; translate: 0 1.25rem; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-unzoom { from { scale: 1.12; } to { scale: 1; } }
@keyframes motion-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes motion-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes motion-item { from { opacity: 0; translate: 0 .75rem; } }