/* GSAP animation helpers — prevent flash before JS runs */

@media (prefers-reduced-motion: no-preference) {
    html.js-animating .gsap-hide {
        opacity: 0;
    }

    html.js-animating .gsap-hide-up {
        opacity: 0;
        transform: translateY(40px);
    }

    html.js-animating .gsap-hide-down {
        opacity: 0;
        transform: translateY(-30px);
    }

    html.js-animating .gsap-hide-left {
        opacity: 0;
        transform: translateX(-40px);
    }

    html.js-animating .gsap-hide-right {
        opacity: 0;
        transform: translateX(40px);
    }

    html.js-animating .gsap-hide-scale {
        opacity: 0;
        transform: scale(0.92);
    }
}

/* Navbar scroll state */
.site-header .navbar {
    transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.site-header.is-scrolled .navbar {
    padding: 0.35rem 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    background: rgba(18, 24, 34, 0.98) !important;
}

.site-header.is-scrolled .brand-logo {
    height: 50px;
    max-width: 180px;
    transition: height 0.35s ease, max-width 0.35s ease;
}

/* Disable CSS keyframe float when GSAP handles it */
html.gsap-ready .hero-img-main {
    animation: none;
}

/* Ensure images stay visible if GSAP animation does not run */
.hero-img-main,
.service-intro-image,
.service-hero-image,
.about-img-primary,
.about-img-secondary {
    opacity: 1;
    visibility: visible;
}

/* Card hover — subtle lift already in style.css; add icon bounce on hover */
@media (prefers-reduced-motion: no-preference) {
    .service-card:hover .service-icon,
    .why-card:hover > i {
        transform: scale(1.08);
        transition: transform 0.3s ease;
    }

    .service-icon,
    .why-card > i {
        transition: transform 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }

    .btn-primary {
        transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }
}

/* Thank-you pulse ring */
.thank-you-icon {
    position: relative;
}

.thank-you-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(27, 94, 32, 0.25);
    opacity: 0;
}

html.gsap-ready .thank-you-icon::after {
    animation: thankYouRing 2s ease-out infinite;
}

@keyframes thankYouRing {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.js-animating .gsap-hide,
    html.js-animating .gsap-hide-up,
    html.js-animating .gsap-hide-down,
    html.js-animating .gsap-hide-left,
    html.js-animating .gsap-hide-right,
    html.js-animating .gsap-hide-scale {
        opacity: 1;
        transform: none;
    }

    .thank-you-icon::after {
        animation: none !important;
    }
}