/* =========================================================
   LORDS GROUP
   Animations
   ========================================================= */

.fade-up {
    opacity: 0;
    animation: fadeUp 0.9s ease forwards;
}

.fade-down {
    opacity: 0;
    animation: fadeDown 0.9s ease forwards;
}

.fade-left {
    opacity: 0;
    animation: fadeLeft 0.9s ease forwards;
}

.fade-right {
    opacity: 0;
    animation: fadeRight 0.9s ease forwards;
}

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

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes fadeDown {

    from {
        opacity: 0;
        transform: translateY(-35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes fadeLeft {

    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes fadeRight {

    from {
        opacity: 0;
        transform: translateX(45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   GOLD SHINE
   ========================================================= */

@keyframes goldShine {

    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }

}

.gold-shine {
    background: linear-gradient(
        90deg,
        var(--gold) 0%,
        var(--gold-light) 25%,
        var(--gold) 50%,
        var(--gold-light) 75%,
        var(--gold) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShine 4s linear infinite;
}

/* =========================================================
   PULSE RING (whatsapp/chat)
   ========================================================= */

@keyframes pulseRing {

    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }

}

.pulse-ring {
    animation: pulseRing 2s infinite;
}

/* =========================================================
   HOVER
   ========================================================= */

.zoom-hover {
    transition: transform 0.45s ease;
}

.zoom-hover:hover {
    transform: scale(1.05);
}

/* =========================================================
   DELAYS
   ========================================================= */

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

/* =========================================================
   MARQUEE / SLIDE
   ========================================================= */

@keyframes slideInRight {

    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes slideInLeft {

    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fade-up,
    .fade-down,
    .fade-left,
    .fade-right {
        opacity: 1;
        animation: none;
    }

    .gold-shine {
        animation: none;
    }

}