/* ==========================================================================
   Animations — scroll reveals, load, and hover micro-interactions
   ========================================================================== */

/* --- Button hovers --- */
.btn {
    transition:
        transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
        box-shadow 0.28s ease,
        border-radius 0.28s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(26, 43, 74, 0.18);
    border-radius: var(--radius-md);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 43, 74, 0.14);
}

.btn--primary:hover {
    box-shadow: 0 8px 24px rgba(196, 30, 58, 0.35);
}

/* --- Card & tile hovers --- */
.service-tile,
.area-card,
.why-card,
.testimonial-card,
.featured-service-card,
.feature-card,
.about-panel,
.project-category,
.service-card,
.location-btn,
.process-step,
.faq-item,
.contact-info-card,
.contact-trust-panel {
    transition:
        transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.3s ease;
}

.service-tile:hover,
.area-card:hover,
.why-card:hover,
.testimonial-card:hover,
.featured-service-card:hover,
.feature-card:hover,
.about-panel:hover,
.project-category:hover,
.service-card:hover,
.location-btn:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.process-step:hover {
    transform: translateY(-4px);
}

.service-tile__image img,
.area-card__image img,
.project-category__image img,
.service-card__image img,
.intro-split__image img,
.why-split__image img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-tile:hover .service-tile__image img,
.area-card:hover .area-card__image img,
.project-category:hover .project-category__image img,
.intro-split__image:hover img,
.why-split__image:hover img {
    transform: scale(1.04);
}

/* Nav link hover */
.nav__link {
    position: relative;
    transition: color 0.25s ease;
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.35rem;
    height: 2px;
    background: var(--color-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav__item {
    position: relative;
}

.nav__link:hover::after,
.nav__link--active::after {
    transform: scaleX(1);
}

@media (max-width: 1200px) {
    .nav__link::after {
        display: none;
    }
}

/* --- Scroll & load reveals --- */
@media (prefers-reduced-motion: no-preference) {
    .animate-on-scroll {
        opacity: 0;
        will-change: opacity, transform;
        transition:
            opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--animate-delay, 0ms);
    }

    .animate-fade-up    { transform: translateY(32px); }
    .animate-fade-down  { transform: translateY(-32px); }
    .animate-fade-left  { transform: translateX(-36px); }
    .animate-fade-right { transform: translateX(36px); }
    .animate-fade-in    { transform: none; }

    .animate-on-scroll.is-visible,
    .animate-in.is-visible {
        opacity: 1;
        transform: none;
    }

    /* Hero loads immediately */
    .animate-in {
        opacity: 0;
        transition:
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
    }

    .page-hero__eyebrow.animate-in { transition-delay: 0.15s; }
    .page-hero h1.animate-in,
    .hero h1.animate-in              { transition-delay: 0.25s; }
    .page-hero__text.animate-in,
    .hero__text.animate-in           { transition-delay: 0.38s; }
    .page-hero__buttons.animate-in,
    .hero__buttons.animate-in        { transition-delay: 0.5s; }
    .hero__phone.animate-in          { transition-delay: 0.35s; }

    /* Trust bar items stagger on hero pages */
    .trust-bar__item.animate-on-scroll {
        --animate-delay: calc(var(--item-index, 0) * 70ms);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .btn:hover,
    .service-tile:hover,
    .area-card:hover {
        transform: none;
    }
}