/* ==================================================
   MADA AL WATNIYAH
   ANIMATIONS
================================================== */

/* Hero content entrance */

.hero-small-title{
    animation:fadeDown .9s ease both;
}

.hero-content h1{
    animation:fadeUp 1s .15s ease both;
}

.hero-content p{
    animation:fadeUp 1s .3s ease both;
}

.hero-buttons{
    animation:fadeUp 1s .45s ease both;
}

.hero-highlights{
    animation:fadeUp 1s .6s ease both;
}

/* Logo movement */

.brand-logo img{
    transition:transform .35s ease,
               filter .35s ease;
}

.brand-logo:hover img{
    transform:scale(1.05);
    filter:drop-shadow(0 8px 14px rgba(214,169,59,.35));
}

/* Gold background movement */

.hero-gold-shape{
    animation:goldShapeMove 7s ease-in-out infinite alternate;
}

/* Service icon animation */

.service-card:hover .service-icon{
    animation:iconPulse .7s ease;
}

/* Project image animation */

.project-placeholder{
    transition:transform .5s ease,
               filter .5s ease;
}

.project-card:hover .project-placeholder{
    transform:scale(1.04);
    filter:brightness(1.08);
}

/* Floating WhatsApp animation */

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

/* Scroll reveal classes */

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

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

.reveal-left{
    opacity:0;
    transform:translateX(-65px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.reveal-left.active{
    opacity:1;
    transform:translateX(0);
}

.reveal-right{
    opacity:0;
    transform:translateX(65px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}

.reveal-scale{
    opacity:0;
    transform:scale(.88);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal-scale.active{
    opacity:1;
    transform:scale(1);
}

/* Delay classes */

.delay-1{
    transition-delay:.1s;
}

.delay-2{
    transition-delay:.2s;
}

.delay-3{
    transition-delay:.3s;
}

.delay-4{
    transition-delay:.4s;
}

.delay-5{
    transition-delay:.5s;
}

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

@keyframes fadeUp{

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

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

}

@keyframes fadeDown{

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

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

}

@keyframes goldShapeMove{

    from{
        transform:rotate(-8deg) translateX(0);
    }

    to{
        transform:rotate(-5deg) translateX(-35px);
    }

}

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.14) rotate(4deg);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes whatsappPulse{

    0%{
        box-shadow:
            0 0 0 0 rgba(37,211,102,.55),
            0 12px 28px rgba(0,0,0,.2);
    }

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

    100%{
        box-shadow:
            0 0 0 0 rgba(37,211,102,0),
            0 12px 28px rgba(0,0,0,.2);
    }

}

@keyframes scrollMove{

    0%{
        opacity:0;
        transform:translate(-50%,0);
    }

    40%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(-50%,20px);
    }

}

/* Respect accessibility settings */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}