/* =========================
   GLOBAL ANIMATIONS
========================= */

.fade-in {

    opacity: 0;

    transform: translateY(30px);

    transition:

        opacity 0.8s ease,

        transform 0.8s ease;

}

.fade-in.visible {

    opacity: 1;

    transform: translateY(0);

}


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

.fade-up {

    opacity: 0;

    transform: translateY(40px);

}

.fade-up.active {

    animation: fadeUp 0.8s ease forwards;

}

.fade-down {

    opacity: 0;

    transform: translateY(-40px);

}

.fade-down.active {

    animation: fadeDown 0.8s ease forwards;

}

.fade-left {

    opacity: 0;

    transform: translateX(-50px);

}

.fade-left.active {

    animation: fadeLeft 0.8s ease forwards;

}

.fade-right {

    opacity: 0;

    transform: translateX(50px);

}

.fade-right.active {

    animation: fadeRight 0.8s ease forwards;

}


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

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(-50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/* =========================
   SCALE ANIMATION
========================= */

.scale-in {

    opacity: 0;

    transform: scale(0.85);

}

.scale-in.active {

    animation: scaleIn 0.7s ease forwards;

}

@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(0.85);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/* =========================
   HEADER ANIMATION
========================= */

.header {

    animation: headerShow 0.8s ease forwards;

}

@keyframes headerShow {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


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

.hero-badge {

    animation: heroBadgeShow 0.8s ease forwards;

}

.hero h1 {

    animation: heroTitleShow 1s ease 0.15s forwards;

    opacity: 0;

    transform: translateY(30px);

}

.hero-content > p {

    animation: heroTextShow 1s ease 0.3s forwards;

    opacity: 0;

    transform: translateY(25px);

}

.hero-buttons {

    animation: heroButtonsShow 1s ease 0.45s forwards;

    opacity: 0;

    transform: translateY(20px);

}

.hero-features {

    animation: heroFeaturesShow 1s ease 0.6s forwards;

    opacity: 0;

    transform: translateY(20px);

}

@keyframes heroBadgeShow {

    from {

        opacity: 0;

        transform: translateY(-15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroTitleShow {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroTextShow {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroButtonsShow {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroFeaturesShow {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


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

.service-card,

.process-card,

.portfolio-card,

.stat-card,

.technology-card {

    will-change: transform;

}

.service-card:hover .service-icon,

.process-card:hover .process-icon {

    transform: scale(1.08) rotate(5deg);

}

.service-icon,

.process-icon {

    transition: 0.3s ease;

}


/* =========================
   BUTTON EFFECT
========================= */

.btn {

    position: relative;

    overflow: hidden;

}

.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(

        90deg,

        transparent,

        rgba(255, 255, 255, 0.15),

        transparent

    );

    transition: 0.5s ease;

}

.btn:hover::before {

    left: 100%;

}


/* =========================
   CARD DELAY ANIMATIONS
========================= */

.service-card:nth-child(1),

.process-card:nth-child(1),

.portfolio-card:nth-child(1) {

    animation-delay: 0.1s;

}

.service-card:nth-child(2),

.process-card:nth-child(2),

.portfolio-card:nth-child(2) {

    animation-delay: 0.2s;

}

.service-card:nth-child(3),

.process-card:nth-child(3),

.portfolio-card:nth-child(3) {

    animation-delay: 0.3s;

}

.service-card:nth-child(4),

.process-card:nth-child(4) {

    animation-delay: 0.4s;

}

.process-card:nth-child(5) {

    animation-delay: 0.5s;

}

.process-card:nth-child(6) {

    animation-delay: 0.6s;

}


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

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

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}