/* ============================================================================
   ornements.css — les fragments d'audit qui apparaissent au fil du scroll.
   Voir assets/ornements.js pour le moteur et les regles de pose.
   ----------------------------------------------------------------------------
   Le mouvement est un DEPOT, pas un pop : 600 ms d'entree avec 14 px et 1,5 %
   d'echelle, puis les animations internes — une barre monte, un trait se trace, un
   anneau se remplit — qui demarrent 380 ms PLUS TARD. Une seule chose lente vaut
   mieux que six choses simultanees : c'est ce qui a supprime la sensation
   d'accelere. La sortie (520 ms, ease-in) est plus courte que l'entree.
   ========================================================================== */

.ornements {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;   /* le conteneur ne capte rien... */
  overflow: hidden;
}

.ornement {
  position: absolute;
  pointer-events: auto;   /* ...mais chaque ornement est cliquable : c'est une porte. */
  cursor: pointer;
  opacity: 0;
  /* 14 px et 1,5 % d'echelle : sous ~10 px une translation se lit comme un simple
     fondu ; au-dela de 2 % d'echelle, l'oeil lit un POP. On veut un DEPOT, pas un
     pop — c'est ce couple qui produisait la sensation d'accelere. */
  transform: translateY(14px) scale(.985);
  /* ENTREE : 600 ms. C'est la duree du `.rv` de la page elle-meme
     (`_src_index.html:253` : `.6s var(--ease)`, translation 26 px). Un ornement
     qui parle une autre langue que le texte voisin cree le desaccord ; 14 px le
     rendent subordonne aux 26 px du texte. */
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  /* l'ombre DURE, sans flou : la signature neubrutalism */
  filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, .88));
  will-change: opacity, transform;
}

/* Une fois pose, l'ornement passe en transition courte : sans cela le simple
   survol mettrait 900 ms a repondre. Le JS ajoute cette classe apres l'entree. */
.ornement.est-stable { transition-duration: .28s; }

.ornement.est-pose  { opacity: 1; transform: none; }

/* SORTIE : 520 ms (≈ 85 % de l'entree) mais surtout une COURBE DIFFERENTE.
   Reutiliser l'ease-out de l'entree fait demarrer d'un coup puis trainer — c'est
   tres exactement la saccade. Une sortie ACCELERE en partant : ease-in. Le
   mouvement repart vers le haut, dans le sens du contenu quand on descend : il
   traverse, il ne contre-scrolle pas. */
.ornement.est-parti {
  opacity: 0;
  transform: translateY(-14px) scale(.985);
  transition: opacity .52s cubic-bezier(.55, .06, .68, .19),
              transform .52s cubic-bezier(.55, .06, .68, .19);
}
.ornement--fige     { opacity: 1; transform: none; transition: none; }

/* au survol, il se redresse legerement : on comprend qu'il est cliquable */
.ornement:hover { transform: translate(-2px, -2px); filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, .88)); }

/* --- animations internes, une par famille de motif ------------------------
   ELLES ATTENDENT QUE L'ORNEMENT SOIT POSE. Sans ce retard, l'entree (600 ms)
   et les animations internes partaient a la MEME milliseconde : six choses
   bougeaient ensemble, et c'est cela qui se lit « accelere ». Une seule chose
   lente vaut mieux que six choses simultanees. Le retard vaut 380 ms : a
   mi-course de l'entree, quand l'oeil a deja identifie l'objet. */
@keyframes orBarre { from { transform: scaleY(0); } }
.ornement.est-pose .or-bar {
  transform-origin: bottom;
  animation: orBarre .85s var(--ease) both;
  animation-delay: .38s;
}
.ornement.est-pose .or-bar:nth-of-type(2) { animation-delay: .47s; }
.ornement.est-pose .or-bar:nth-of-type(3) { animation-delay: .56s; }
.ornement.est-pose .or-bar:nth-of-type(4) { animation-delay: .65s; }
.ornement.est-pose .or-bar:nth-of-type(5) { animation-delay: .74s; }
.ornement.est-pose .or-bar:nth-of-type(6) { animation-delay: .83s; }

/* 2. la sparkline se trace */
@keyframes orTrace { to { stroke-dashoffset: 0; } }
.ornement.est-pose .or-line { animation: orTrace 1.9s var(--ease) both; animation-delay: .38s; }

/* 3. l'anneau se remplit */
@keyframes orArc { from { stroke-dasharray: 0 999; } }
.ornement.est-pose .or-arc { animation: orArc 1.5s var(--ease) both; animation-delay: .38s; }

/* 4. la jauge avance */
@keyframes orJauge { from { transform: scaleX(0); } }
.ornement.est-pose .or-jauge {
  transform-origin: left;
  animation: orJauge 1.3s var(--ease) both;
  animation-delay: .38s;
}

/* --- mouvement reduit : tout arrive pose, rien ne bouge ------------------- */
@media (prefers-reduced-motion: reduce) {
  .ornement,
  .ornement.est-pose .or-bar,
  .ornement.est-pose .or-line,
  .ornement.est-pose .or-arc,
  .ornement.est-pose .or-jauge {
    animation: none !important;
    transition: none !important;
  }
  .ornement { opacity: 1; transform: none; }
}

/* --- écran étroit : la colonne occupe tout, il ne reste que les bandes vides
   entre les sections. Le moteur ne propose donc plus que les motifs compacts
   (voir COMPACTS dans ornements.js), et on borne la taille par une VALEUR EN
   PIXELS : `46vw` valait 179 px à 390 px, un plafond sans rapport avec la place
   réellement libre. 168 px tient dans une bande de section. --- */
@media (max-width: 700px) {
  .ornement { max-width: min(72vw, 168px); }
  .ornement svg { max-width: 100%; height: auto; }
}