/* ═══════════════════════════════════════════════════════════════════════
 * Note+ — mouvement : apparition au défilement et scènes animées
 * Source de vérité du moteur ; copié tel quel dans le composant
 * theme-noteplus-base (noteplus-motion.css) par
 * scripts/composant/build-theme-base.sh. Ce fichier ne porte AUCUNE
 * coordonnée propre à une capture : les positions et les keyframes d'une
 * scène vivent chez la page qui la joue (noteplus.css, patterns Note+ ;
 * marque.css côté consommateur). Il va avec noteplus-motion.js, qui pose
 * .np-js sur <html>, .is-visible sur les blocs qui entrent à l'écran et
 * .is-playing sur les scènes visibles.
 *
 * Trois garanties, dans cet ordre :
 *   1. sans JS, rien ne bouge et rien n'est caché : le contenu est là ;
 *   2. en reduced-motion, pareil : les repères de scène n'existent pas ;
 *   3. une scène hors écran est en pause (animation-play-state), pas en
 *      train de brûler du CPU.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Apparition au défilement ([data-np-reveal], data-np-delay="1..5") ── */
@media (prefers-reduced-motion: no-preference) {
  .np-js [data-np-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
  .np-js [data-np-reveal].is-visible { opacity: 1; transform: none; }
  .np-js [data-np-reveal][data-np-delay="1"] { transition-delay: 0.07s; }
  .np-js [data-np-reveal][data-np-delay="2"] { transition-delay: 0.14s; }
  .np-js [data-np-reveal][data-np-delay="3"] { transition-delay: 0.21s; }
  .np-js [data-np-reveal][data-np-delay="4"] { transition-delay: 0.28s; }
  .np-js [data-np-reveal][data-np-delay="5"] { transition-delay: 0.35s; }
}

/* ── Scène animée sur capture : le moteur ──────────────────────────────
   Structure :
     <div class="np-scene [np-scene--nom]">          la scène (observée par le JS)
       <div class="np-scene-stage">                   la capture + ses repères
         <img ...>                                    la capture de base
         <span class="np-scene-el np-scene-ring">     un repère (voir les rôles)
         ...
   Les repères sont posés en % de la capture (left/top/width/height) donc
   ils la suivent à toute largeur ; les tailles de texte sont en unités de
   conteneur (cqw) bornées en px. Chaque repère reçoit sa position et son
   animation-name dans la scène qui l'emploie (.np-scene--nom .np-scene-ring).
   Une boucle dure 10 s par défaut ; une scène peut la changer sur
   .np-scene--nom .np-scene-el { animation-duration }. */
.np-scene-stage { position: relative; container-type: inline-size; }
.np-scene-stage > img { display: block; width: 100%; height: auto; }
.np-scene-stage > .np-scene-el { display: none; position: absolute; pointer-events: none; animation-duration: 10s; animation-timing-function: cubic-bezier(0.22,1,0.36,1); animation-iteration-count: infinite; animation-play-state: paused; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .np-js .np-scene-stage > .np-scene-el { display: block; }
  .np-js .np-scene.is-playing .np-scene-stage > .np-scene-el { animation-play-state: running; }
  /* La règle générique ci-dessus force display:block sur tout repère
     (3 classes) : la pastille, qui centre son texte en flex, se redéclare
     à même spécificité, après, dans la même media query. */
  .np-js .np-scene-stage > .np-scene-status { display: flex; }
}

/* ── Les rôles de repères : leur apparence, jamais leur position ─────── */
/* Curseur : un <svg class="np-scene-el np-scene-cursor" viewBox="0 0 24 24">
   avec <path d="M5 3l14 8.5-6.2 1.6L9.5 20z" stroke="currentColor"
   stroke-width="1.6" stroke-linejoin="round"/>. Sa pointe est le coin
   haut-gauche du repère : left/top désignent le point cliqué. */
.np-scene-cursor { width: 2.2cqw; min-width: 16px; max-width: 30px; height: auto; color: var(--np-color-ink); filter: drop-shadow(var(--np-shadow-cursor)); z-index: 6; }
.np-scene-cursor path { fill: var(--np-color-on-primary); }
/* Anneau : entoure une zone de la capture (left/top/width/height en %). */
.np-scene-ring { border: 2px solid var(--np-color-primary); border-radius: 10px; box-shadow: 0 0 0 4px var(--np-color-primary-halo); z-index: 2; }
/* Halo : même rôle qu'un anneau, pour une bande large (panneau, barre). */
.np-scene-glow { border-radius: 8px; box-shadow: 0 0 0 2px var(--np-color-primary), 0 0 0 7px var(--np-color-primary-halo); z-index: 2; }
/* Bulle : une remarque, un commentaire. <b> titre, texte, <small> auteur. */
.np-scene-note { padding: 0.9cqw 1.1cqw; background: var(--np-color-surface-card); border: 1px solid var(--np-color-hairline); border-left: 3px solid var(--np-color-primary); border-radius: var(--np-radius-md); box-shadow: var(--np-shadow-scene-note); font-family: var(--np-font-sans); font-size: clamp(9px, 1cqw, 14px); line-height: 1.35; color: var(--np-color-body-strong); z-index: 4; }
.np-scene-note b { display: block; font-weight: 600; color: var(--np-color-ink); margin-bottom: 0.3em; }
.np-scene-note small { display: block; margin-top: 0.4em; font-family: var(--np-font-mono); font-size: 0.8em; letter-spacing: 0.04em; color: var(--np-color-muted); }
/* Étiquette : un court état système (« Résumé mis à jour »). */
.np-scene-chip { padding: 0.45cqw 0.9cqw; background: var(--np-color-ink); color: var(--np-color-on-primary); border-radius: var(--np-radius-pill); font-family: var(--np-font-mono); font-size: clamp(8px, 0.8cqw, 12px); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; z-index: 5; }
/* Pastille : recouvre un statut de la capture par sa nouvelle valeur
   (width/height en % pour couvrir exactement l'ancien). */
.np-scene-status { align-items: center; justify-content: center; gap: 0.35em; background: var(--np-color-success-soft); color: var(--np-color-success-strong); box-shadow: 0 0 0 3px var(--np-color-canvas); border-radius: 999px; font-family: var(--np-font-sans); font-weight: 600; font-size: clamp(7px, 0.85cqw, 13px); line-height: 1; z-index: 3; }
.np-scene-status::before { content: ''; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--np-color-success-strong); }
/* Tampon : la validation, en serif, légèrement penché. <small> sous-titre. */
.np-scene-stamp { padding: 0.5cqw 1.1cqw; border: 3px solid var(--np-color-success-strong); border-radius: 8px; color: var(--np-color-success-strong); background: var(--np-color-canvas-veil); font-family: var(--np-font-serif); font-size: clamp(12px, 2cqw, 30px); line-height: 1; letter-spacing: 0.02em; transform: rotate(-7deg); z-index: 5; }
.np-scene-stamp small { display: block; margin-top: 0.3em; font-family: var(--np-font-mono); font-size: 0.38em; letter-spacing: 0.08em; text-transform: uppercase; }
/* Fantôme : la silhouette d'un objet qu'on déplace (carte, vignette) ;
   dimensionné en % sur l'objet d'origine, déplacé par ses keyframes. */
.np-scene-ghost { background: var(--np-color-surface-card); border: 2px solid var(--np-color-primary); border-radius: var(--np-radius-md); box-shadow: var(--np-shadow-card-elev); z-index: 5; }
/* Permutation : une seconde capture (l'état d'après) posée sur la première ;
   ses keyframes ne jouent que sur l'opacité. */
.np-scene-stage > .np-scene-swap { inset: 0; width: 100%; height: auto; z-index: 1; }