/* ============================================================================
   THE WIN CAPITAL S.A. - animations.css
   Keyframes y clases de animacion reutilizables
   ============================================================================ */

/* =======================================================================
   KEYFRAMES
   ======================================================================= */

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

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

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

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

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

@keyframes twcScaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes twcSlideInUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

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

@keyframes twcBounce {
    0%, 20%, 53%, 100% { transform: translateY(0); }
    40% { transform: translateY(-12px); }
    70% { transform: translateY(-6px); }
}

@keyframes twcPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

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

@keyframes twcShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes twcGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* =======================================================================
   CLASES DE ANIMACION
   ======================================================================= */

.twc-animate-fade-in {
    animation: twcFadeIn var(--twc-duration-500) var(--twc-ease-out) both;
}

.twc-animate-fade-in-up {
    animation: twcFadeInUp var(--twc-duration-500) var(--twc-ease-spring) both;
}

.twc-animate-scale-in {
    animation: twcScaleIn var(--twc-duration-400) var(--twc-ease-spring) both;
}

.twc-animate-bounce {
    animation: twcBounce 1.5s ease-in-out infinite;
}

.twc-animate-float {
    animation: twcFloat 3s ease-in-out infinite;
}

.twc-animate-spin {
    animation: twcSpin 1s linear infinite;
}

.twc-animate-pulse {
    animation: twcPulse 2s ease-in-out infinite;
}

/* Shimmer (para skeleton loading) */
.twc-animate-shimmer {
    background: linear-gradient(
        90deg,
        var(--twc-gray-100) 25%,
        var(--twc-gray-200) 50%,
        var(--twc-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: twcShimmer 1.5s ease-in-out infinite;
}

/* Delay utilities */
.twc-delay-100 { animation-delay: 100ms; }
.twc-delay-200 { animation-delay: 200ms; }
.twc-delay-300 { animation-delay: 300ms; }
.twc-delay-400 { animation-delay: 400ms; }
.twc-delay-500 { animation-delay: 500ms; }
.twc-delay-700 { animation-delay: 700ms; }
.twc-delay-1000 { animation-delay: 1000ms; }


/* =======================================================================
   SCROLL REVEAL (para JS data-reveal)
   ======================================================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--twc-duration-500) var(--twc-ease-out),
                transform var(--twc-duration-500) var(--twc-ease-spring);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal="left"] {
    transform: translateX(-20px);
}

[data-reveal="left"].is-visible {
    transform: translateX(0);
}

[data-reveal="right"] {
    transform: translateX(20px);
}

[data-reveal="right"].is-visible {
    transform: translateX(0);
}

[data-reveal="scale"] {
    transform: scale(0.95);
}

[data-reveal="scale"].is-visible {
    transform: scale(1);
}