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

.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;

    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up {
    transform: translateY(38px);
}

.reveal-left {
    transform: translateX(-45px);
}

.reveal-right {
    transform: translateX(45px);
}


/* Revealed state */

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
    opacity: 1;
    transform: translate(0, 0);
}


/* =========================
   STAGGERED CARDS
========================= */

.services-grid .service-card:nth-child(2),
.process-grid .process-card:nth-child(2) {
    transition-delay: 0.08s;
}

.services-grid .service-card:nth-child(3),
.process-grid .process-card:nth-child(3) {
    transition-delay: 0.16s;
}

.services-grid .service-card:nth-child(4),
.process-grid .process-card:nth-child(4) {
    transition-delay: 0.24s;
}


/* =========================
   HERO LOAD ANIMATION
========================= */

.hero .reveal-up {
    animation: heroReveal 0.9s 0.15s forwards
        cubic-bezier(0.22, 1, 0.36, 1);
}

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

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


/* =========================
   HERO IMAGE MOTION
========================= */

.hero-background-image {
    animation: heroImageReveal 1.5s ease-out forwards;
}

@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: scale(1.035);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================
   BUTTON SHINE
========================= */

.btn-primary::before {
    content: "";

    position: absolute;
    top: -50%;
    left: -70%;

    width: 45%;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.42),
        transparent
    );

    transform: rotate(18deg);

    transition: left 0.65s ease;

    pointer-events: none;
}

.btn-primary:hover::before {
    left: 130%;
}


/* =========================
   SERVICE ICON EFFECT
========================= */

.service-icon {
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.service-card:hover .service-icon {
    transform: translateY(-3px) scale(1.06);

    background: rgba(230, 191, 87, 0.14);

    border-color: rgba(230, 191, 87, 0.3);
}


/* =========================
   FEATURE NUMBER EFFECT
========================= */

.feature-number {
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.feature-item:hover .feature-number {
    background: var(--color-gold);
    color: #090909;

    transform: scale(1.05);
}


/* =========================
   HIGHLIGHT LINK
========================= */

.highlight-content a {
    position: relative;
}

.highlight-content a::after {
    content: " →";

    display: inline-block;

    transition: transform 0.25s ease;
}

.highlight-content a:hover::after {
    transform: translateX(5px);
}


/* =========================
   NAVBAR ENTRANCE
========================= */

.site-header {
    animation: navbarEntrance 0.65s ease-out forwards;
}

@keyframes navbarEntrance {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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


/* =========================
   LOGO INTERACTION
========================= */

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

.brand:hover .brand-logo {
    transform: scale(1.05);

    filter:
        drop-shadow(0 0 10px rgba(230, 191, 87, 0.18));
}


/* =========================
   ACCESSIBILITY
   Respect reduced-motion settings
========================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }
}