/* =========================================
       PAGE ANIMATIONS
    ========================================= */

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

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

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

    @keyframes floatCard {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-14px);
        }
    }

    @keyframes floatCardReverse {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(12px);
        }
    }

    @keyframes pulseGlow {
        0%, 100% {
            opacity: .35;
            transform: scale(1);
        }

        50% {
            opacity: .65;
            transform: scale(1.08);
        }
    }

    @keyframes progressMove {
    0% {
        width: 0%;
        opacity: .5;
    }

    100% {
        width: 88%;
        opacity: 1;
    }
}

    @keyframes scan {
        0% {
            transform: translateX(-120%);
        }

        100% {
            transform: translateX(250%);
        }
    }


    /* =========================================
       HERO BACKGROUND
    ========================================= */

    .hero-section {
        position: relative;
        overflow: hidden;
        background-color: #020617;
    }

    .hero-bg-image {
        position: absolute;
        inset: 0;
        z-index: 0;

        background-image: url('{{ asset('public/images/office-bg.jpg') }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        background-color: #0f172a;
    }

    .hero-dark-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(
                90deg,
                rgba(2, 6, 23, .96) 0%,
                rgba(2, 6, 23, .88) 38%,
                rgba(2, 6, 23, .65) 68%,
                rgba(2, 6, 23, .48) 100%
            );
    }

    .hero-top-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(
                180deg,
                rgba(2, 6, 23, .20) 0%,
                rgba(2, 6, 23, .10) 40%,
                rgba(2, 6, 23, .70) 100%
            );
    }


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

    .hero-animate {
        opacity: 0;
        animation: heroFadeLeft .8s ease forwards;
    }

    .hero-animate-1 {
        animation-delay: .05s;
    }

    .hero-animate-2 {
        animation-delay: .15s;
    }

    .hero-animate-3 {
        animation-delay: .25s;
    }

    .hero-animate-4 {
        animation-delay: .35s;
    }

    .hero-animate-5 {
        animation-delay: .45s;
    }

    .hero-visual {
        opacity: 0;
        animation: heroFadeRight 1s ease .25s forwards;
    }

    .float-card {
        animation: floatCard 5s ease-in-out infinite;
    }

    .float-card-reverse {
        animation: floatCardReverse 6s ease-in-out infinite;
    }

    .pulse-glow {
        animation: pulseGlow 5s ease-in-out infinite;
    }

    .progress-animation {
        width: 0%;
        animation: progressMove 2.8s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .scan-animation {
        animation: scan 4s linear infinite;
    }


    /* =========================================
       SCROLL REVEAL
    ========================================= */

    .reveal {
        opacity: 0;
        transform: translateY(35px);
        transition: all .8s cubic-bezier(.2,.65,.3,1);
    }

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

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

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

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


    /* =========================================
       INTERACTIONS
    ========================================= */

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

    .service-card:hover {
        transform: translateY(-10px);
    }

    .service-icon {
        transition: all .35s ease;
    }

    .service-card:hover .service-icon {
        transform: rotate(-6deg) scale(1.08);
    }

    .hero-button {
        transition: all .3s ease;
    }

    .hero-button:hover {
        transform: translateY(-3px);
    }

    .workspace-panel {
        transition: transform .5s ease;
    }

    .workspace-panel:hover {
        transform: translateY(-6px) rotate(.2deg);
    }


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

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

    }