/* ============================================================
   ANIMATIONS — every @keyframes in the system lives here.
   Components reference them by name; none are declared elsewhere.
   ============================================================ */

/* ---------- Ambient float ---------- */
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

@keyframes flotarLento {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-24px) rotate(3deg); }
}

@keyframes vaiven {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* Hanging tags swing from the knot, not from their centre. */
@keyframes colgar {
  0%, 100% { transform: rotate(calc(var(--giro, 3deg) * -1)); }
  50%      { transform: rotate(var(--giro, 3deg)); }
}

@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes girar { to { transform: rotate(360deg); } }

@keyframes chispa {
  0%, 100% { opacity: 0.25; transform: scale(0.75); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

@keyframes respirar {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.12); opacity: 0.8; }
}

/* ---------- Butterfly wings (real 3D flap) ---------- */
@keyframes aletearIzq {
  0%, 100% { transform: rotateY(14deg); }
  50%      { transform: rotateY(76deg); }
}

@keyframes aletearDer {
  0%, 100% { transform: rotateY(-14deg); }
  50%      { transform: rotateY(-76deg); }
}

/* ---------- Falling things ---------- */
@keyframes caer {
  to { transform: translateY(115vh) rotate(720deg); opacity: 0; }
}

@keyframes caerPetalo {
  0%   { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--opacidad, 0.75); }
  92%  { opacity: var(--opacidad, 0.75); }
  100% { transform: translate3d(var(--deriva, 40px), 108vh, 0) rotate(540deg); opacity: 0; }
}

/* ---------- Cursor sparkle ---------- */
@keyframes destello {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0.9; }
  60%  { transform: translate(-50%, -50%) scale(1) rotate(90deg); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(0.1) rotate(180deg); opacity: 0; }
}

/* ---------- Entrances ---------- */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes brotar {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Feedback ---------- */
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

@keyframes latir {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.22); }
}

/* ---------- Equalizer (music card) ---------- */
@keyframes ecualizador {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

/* ============================================================
   Reduced motion — kill ambient loops, keep state changes.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Portal de entrada ---------- */
/* Las mariposas del portal llevan su posición dentro del keyframe:
   el <g> no puede tener un transform propio o la animación lo pisaría. */
@keyframes portalVuelaA {
  0%, 100% { transform: translate(26px, 118px) scale(.44) rotate(-9deg); }
  50%      { transform: translate(58px, 74px) scale(.44) rotate(11deg); }
}

@keyframes portalVuelaB {
  0%, 100% { transform: translate(232px, 158px) scale(.36) rotate(8deg); }
  50%      { transform: translate(206px, 116px) scale(.36) rotate(-10deg); }
}

@keyframes llamar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}