@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 600ms ease-out both; }

@keyframes floatIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-float-in { animation: floatIn 500ms ease-out both; }

@keyframes pulseSoft {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.animate-pulse-soft { animation: pulseSoft 1800ms ease-in-out infinite; }



/* bulle type BD : flèche */
.rm-arrow {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  background: rgba(255,255,255,0.9);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  border: 1px solid rgba(253, 230, 138, .8); /* amber-200 */
}
.rm-arrow-left { left: -7px; }
.rm-arrow-right { right: -7px; }

/* entrées douces */
@keyframes fadeInRight { from {opacity:0; transform: translateX(12px)} to {opacity:1; transform: translateX(0)} }
@keyframes fadeInLeft  { from {opacity:0; transform: translateX(-12px)} to {opacity:1; transform: translateX(0)} }
.animate-in-right { animation: fadeInRight .25s ease-out both; }
.animate-in-left  { animation: fadeInLeft  .25s ease-out both; }

/* pulsation douce réutilisable */
@keyframes pulseSoft { 0%,100% { transform: scale(1) } 50% { transform: scale(1.03) } }
.animate-pulse-soft { animation: pulseSoft 2.2s ease-in-out infinite }


#tokenomics-canvas {
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.08));
}


@keyframes fadeUp { from { transform: translateY(6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.animate-fade-up { animation: fadeUp .35s ease-out both; }


/* Pins : halo + bob */
@keyframes pinPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes bob { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-2px)} }
.rm-pin { animation: pinPulse 1.8s ease-in-out infinite, bob 2.2s ease-in-out infinite; }

/* Bulle : spring pop gauche/droite */
@keyframes popRight { 0%{opacity:0; transform:translateX(16px) scale(.96)} 100%{opacity:1; transform:translateX(0) scale(1)} }
@keyframes popLeft  { 0%{opacity:0; transform:translateX(-16px) scale(.96)} 100%{opacity:1; transform:translateX(0) scale(1)} }
.animate-in-right { animation: popRight .28s cubic-bezier(.2,.9,.25,1.1) both; }
.animate-in-left  { animation: popLeft  .28s cubic-bezier(.2,.9,.25,1.1) both; }

/* Flèches des bulles */
.rm-bubble .rm-arrow { position:absolute; top:24px; width:0; height:0; }
.rm-arrow-left { left:-14px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:14px solid rgba(255,255,255,.9); filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); }
.rm-arrow-right{ right:-14px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:14px solid rgba(255,255,255,.9); filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); }

/* Lignes : écriture progressive */
@keyframes drawPath { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }

/* Apparition “stage” */
@keyframes fadeUpSoft { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0)} }
#rm-stage.is-visible { animation: fadeUpSoft .4s ease-out both; }

/* Bulle cliquable uniquement (container pointer-events) */
#rm-bubbles > * { pointer-events: auto; }