/* ============================================
   ANIMACIONES — Keyframes y clases
   ============================================ */

/* --- Keyframes --- */

@keyframes float {
    0%, 100% { transform: translateY(0px) rotateY(0deg); }
    50%       { transform: translateY(-20px) rotateY(5deg); }
}

@keyframes float-reverse {
    0%, 100% { transform: translateY(0px) rotateY(0deg); }
    50%       { transform: translateY(20px) rotateY(-5deg); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(27,117,187,0.4), 0 0 40px rgba(27,117,187,0.2); }
    50%       { box-shadow: 0 0 40px rgba(27,117,187,0.8), 0 0 80px rgba(27,117,187,0.4); }
}

@keyframes pulse-yellow {
    0%, 100% { box-shadow: 0 0 15px rgba(255,215,0,0.3); }
    50%       { box-shadow: 0 0 35px rgba(255,215,0,0.7); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-left {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ring-pulse {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes preloader-bar {
    0%   { width: 0%; }
    100% { width: 100%; }
}

@keyframes hero-ring-rotate {
    from { transform: rotateX(60deg) rotateZ(0deg); }
    to   { transform: rotateX(60deg) rotateZ(360deg); }
}

@keyframes boxing-punch {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25%       { transform: translateX(-15px) rotate(-8deg); }
    75%       { transform: translateX(15px) rotate(8deg); }
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes count-up {
    from { opacity: 0; transform: translateY(20px) scale(0.5); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Clases de animación scroll --- */

[data-animate] {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-animate].is-visible {
    opacity: 1;
}

[data-animate="fade-up"]    { transform: translateY(50px); }
[data-animate="fade-down"]  { transform: translateY(-50px); }
[data-animate="fade-left"]  { transform: translateX(50px); }
[data-animate="fade-right"] { transform: translateX(-50px); }
[data-animate="scale"]      { transform: scale(0.85); }
[data-animate="rotate"]     { transform: rotateY(30deg) translateZ(-50px); }

[data-animate].is-visible {
    transform: none;
}

/* Delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* --- Clases utilitarias de animación --- */

.animate-float        { animation: float 4s ease-in-out infinite; }
.animate-float-reverse{ animation: float-reverse 5s ease-in-out infinite; }
.animate-spin-slow    { animation: spin-slow 20s linear infinite; }
.animate-pulse-glow   { animation: pulse-glow 3s ease-in-out infinite; }
.animate-pulse-yellow { animation: pulse-yellow 2.5s ease-in-out infinite; }
.animate-shimmer      { animation: shimmer 3s linear infinite; }
.animate-gradient     { animation: gradient-shift 6s ease infinite; background-size: 200% 200%; }

/* Stagger children */
.stagger-children > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.15s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.25s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.35s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.45s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.55s; }
