/* =========================================================================
   Logo animé : « le tracé qui bat » — la SEULE animation du logo.
   Les deux cœurs naissent du croisement et se dessinent ensemble en miroir
   (1,2 s), puis le logo bat une fois à 128 % (600 ms) ; 1,8 s au total.
   Jouée une fois à l'apparition (logo-anime.js), arrêtée sur le logo complet,
   jamais si le système demande moins d'animations.
   Écart documenté au skill motion : moment de marque, pas d'interface.
   Fonctionne avec ou sans tokens.css (valeurs de repli).
   ========================================================================= */

.logo-infini {
  --logo-g: var(--prune, #6E3FA3);         /* cœur de gauche */
  --logo-d: var(--mandarine, #FF8A1F);     /* cœur de droite, devant */
  display: block; overflow: visible;
  width: 48px; height: auto;
}
.logo-infini .logo-g { stroke: var(--logo-g); }
.logo-infini .logo-d { stroke: var(--logo-d); }
/* Filet qui sépare les deux cœurs : la couleur du fond où le logo est posé. */
.logo-infini .logo-filet { stroke: var(--logo-fond, #FFF9F4); }
.logo-infini .logo-initiales text {
  font-family: var(--police, 'Figtree', 'Segoe UI', system-ui, sans-serif);
  font-weight: 600; font-size: 26px; text-anchor: middle;
}
.logo-infini .logo-initiale-1 { fill: var(--logo-g); }
.logo-infini .logo-initiale-2 { fill: var(--cacao, #2A1F2D); }

/* Déclinaisons : poser la classe ET la couleur de fond du conteneur. */
.logo-infini.logo-prune { --logo-d: var(--prune, #6E3FA3); }
.logo-infini.logo-sur-mandarine { --logo-g: var(--cacao, #2A1F2D); --logo-d: #FFFFFF; --logo-fond: var(--mandarine, #FF8A1F); }
.logo-infini.logo-sur-prune { --logo-g: var(--creme, #FFF9F4); --logo-d: var(--mandarine, #FF8A1F); --logo-fond: var(--prune, #6E3FA3); }
.logo-infini.logo-sur-prune .logo-initiale-2 { fill: var(--creme, #FFF9F4); }

/* ---------- L'animation ---------- */
.logo-infini .logo-coeurs { transform-box: fill-box; transform-origin: 50% 50%; }

/* Prêt : le logo attend d'être visible, tracé effacé (posé par le script). */
.logo-infini.logo-pret .logo-trait { stroke-dasharray: 100 101; stroke-dashoffset: 100; }
.logo-infini.logo-pret .logo-initiales { opacity: 0; }

.logo-infini.logo-joue .logo-trait {
  stroke-dasharray: 100 101;
  animation: logo-trace var(--logo-trace, 1200ms) var(--logo-trace-courbe, cubic-bezier(.65, 0, .35, 1)) both;
}
.logo-infini.logo-joue .logo-coeurs {
  animation: logo-bat var(--logo-battement, 600ms) var(--logo-battement-courbe, cubic-bezier(.45, 0, .55, 1)) var(--logo-battement-delai, 1150ms) both;
}
.logo-infini.logo-joue .logo-initiales {
  animation: logo-initiales 300ms ease-out var(--logo-battement-delai, 1150ms) both;
}

@keyframes logo-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* 1.28 = --logo-battement-echelle (les variables ne sont pas fiables dans les keyframes de transform) */
@keyframes logo-bat {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  62% { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes logo-initiales { from { opacity: 0; } to { opacity: 1; } }

/* Moins d'animations : le logo complet, tout de suite. */
@media (prefers-reduced-motion: reduce) {
  .logo-infini .logo-trait { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .logo-infini .logo-coeurs, .logo-infini .logo-initiales { animation: none !important; opacity: 1 !important; }
}