/* =========================================================
   REFRATERMIC S.R.L. - REPÚBLICA DOMINICANA
   ANIMATIONS.CSS
========================================================= */

/* =========================================================
   FADE ANIMATIONS
========================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

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

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

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

/* =========================================================
   HERO ANIMATIONS
========================================================= */

@keyframes heroZoom {

    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

@keyframes heroOverlay {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hero-slide img {
    animation: heroZoom 10s ease-in-out infinite alternate;
}

.hero-content {
    animation: fadeUp 1.2s ease forwards;
}

/* =========================================================
   BUTTON HOVER EFFECTS
========================================================= */

.btn-primary,
.btn-secondary {
    transition: all 0.35s ease;
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 30px rgba(215, 25, 32, 0.25);
}

.btn-secondary:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 30px rgba(11, 42, 91, 0.25);
}

/* =========================================================
   CARD HOVER EFFECTS
========================================================= */

.service-card,
.material-card,
.project-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.service-card:hover,
.material-card:hover,
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   IMAGE HOVER EFFECTS
========================================================= */

.service-card img,
.material-card img,
.project-card img {
    transition: transform 0.6s ease;
}

.service-card:hover img,
.material-card:hover img,
.project-card:hover img {
    transform: scale(1.05);
}

/* =========================================================
   NAVIGATION EFFECTS
========================================================= */

.nav-menu a {
    position: relative;
    transition: color 0.3s ease;
}

.nav-menu a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: -8px;
    background: #D71920;
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
========================================================= */

.floating-whatsapp {
    animation: whatsappPulse 2s infinite;
}

@keyframes whatsappPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* =========================================================
   SECTION REVEAL EFFECTS
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   MODAL EFFECTS
========================================================= */

.modal-overlay {
    animation: fadeIn 0.4s ease;
}

.modal-content {
    animation: fadeUp 0.5s ease;
}

/* =========================================================
   LOGOS EFFECTS
========================================================= */

.client-logo {
    transition:
        filter 0.3s ease,
        transform 0.3s ease;
}

.client-logo:hover {
    filter: grayscale(0%);
    transform: scale(1.04);
}

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {
    animation: bounce 1.8s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(5px);
    }
}

/* =========================================================
   LOADING EFFECTS
========================================================= */

.loading-fade {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

/* =========================================================
   END
========================================================= */