/* ============================================================
   animations.css — Movimiento suave, alegre y nunca excesivo
   ============================================================ */

/* ── KEYFRAMES ── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes floatX {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(8px); }
}

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

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

@keyframes cloudFloat {
  0%   { transform: translateX(0) translateY(0); }
  33%  { transform: translateX(12px) translateY(-6px); }
  66%  { transform: translateX(-8px) translateY(4px); }
  100% { transform: translateX(0) translateY(0); }
}

@keyframes starTwinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

@keyframes rainbowSlide {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); opacity: 0.8; }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* ── CLASES DE ANIMACIÓN ── */
.animate-fadeInUp    { animation: fadeInUp    var(--duration-slow) var(--ease-smooth) both; }
.animate-fadeInDown  { animation: fadeInDown  var(--duration-slow) var(--ease-smooth) both; }
.animate-fadeIn      { animation: fadeIn      var(--duration-slow) var(--ease-smooth) both; }
.animate-slideLeft   { animation: slideInLeft var(--duration-slow) var(--ease-smooth) both; }
.animate-slideRight  { animation: slideInRight var(--duration-slow) var(--ease-smooth) both; }
.animate-scaleIn     { animation: scaleIn     var(--duration-slow) var(--ease-bounce) both; }
.animate-bounceIn    { animation: bounceIn    700ms var(--ease-bounce) both; }

/* Delays */
.delay-100  { animation-delay: 100ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-400  { animation-delay: 400ms; }
.delay-500  { animation-delay: 500ms; }
.delay-600  { animation-delay: 600ms; }
.delay-700  { animation-delay: 700ms; }
.delay-800  { animation-delay: 800ms; }

/* Floats continuos */
.float-slow   { animation: floatY 4s ease-in-out infinite; }
.float-medium { animation: floatY 3s ease-in-out infinite; }
.float-fast   { animation: floatY 2.2s ease-in-out infinite; }
.float-x      { animation: floatX 5s ease-in-out infinite; }
.cloud-float  { animation: cloudFloat 8s ease-in-out infinite; }
.wiggle       { animation: wiggle 2.5s ease-in-out infinite; }
.pulse-anim   { animation: pulse 2s ease-in-out infinite; }
.twinkle      { animation: starTwinkle 2s ease-in-out infinite; }

/* Scroll-triggered: elementos empiezan invisibles */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slower) var(--ease-smooth),
              transform var(--duration-slower) var(--ease-smooth);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="left"].revealed,
[data-reveal="right"].revealed,
[data-reveal="scale"].revealed {
  transform: translateX(0) scale(1);
}

/* Reducir movimiento para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}