/* =========================================================
   EC CUSTOM HOME CONSTRUCTION
   REFINED MOTION SYSTEM
========================================================= */

/* =========================================================
   BASE ENTRANCE STATES
========================================================= */

.fade-up,
.fade-in,
.zoom-in,
.slide-left,
.slide-right {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up {
    transform: translate3d(0, 34px, 0);
}

.fade-in {
    transform: none;
}

.zoom-in {
    transform: scale(0.965);
}

.slide-left {
    transform: translate3d(-42px, 0, 0);
}

.slide-right {
    transform: translate3d(42px, 0, 0);
}

.fade-up.active,
.fade-in.active,
.zoom-in.active,
.slide-left.active,
.slide-right.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* =========================================================
   NATURAL SEQUENCING
========================================================= */

.services-grid .service-item:nth-child(1),
.project-grid .project-card:nth-child(1),
.process-grid .process-step:nth-child(1) {
    transition-delay: 0.05s;
}

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

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

.process-grid .process-step:nth-child(4) {
    transition-delay: 0.32s;
}

.process-grid .process-step:nth-child(5) {
    transition-delay: 0.41s;
}

.process-grid .process-step:nth-child(6) {
    transition-delay: 0.5s;
}

.commitment-gallery .gallery-frame:nth-child(1) {
    transition-delay: 0.08s;
}

.commitment-gallery .gallery-frame:nth-child(2) {
    transition-delay: 0.18s;
}

.commitment-gallery .gallery-frame:nth-child(3) {
    transition-delay: 0.28s;
}

/* =========================================================
   IMAGE REVEAL POLISH
========================================================= */

.gallery-frame.fade-up,
.project-card.fade-up,
.testimonial-image.fade-up {
    overflow: hidden;
}

.gallery-frame.fade-up img,
.project-card.fade-up img,
.testimonial-image.fade-up img {
    transform: scale(1.035);
    transition:
        transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s ease;
}

.gallery-frame.fade-up.active img,
.project-card.fade-up.active img,
.testimonial-image.fade-up.active img {
    transform: scale(1);
}

.gallery-frame:hover img,
.project-card:hover img {
    transform: scale(1.05);
}

/* =========================================================
   HERO ARRIVAL
========================================================= */

.hero-content {
    animation: heroRise 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-topline {
    animation: heroFade 1.1s ease both;
    animation-delay: 0.15s;
}

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================
   HOVER REFINEMENTS
========================================================= */

.service-item,
.process-step,
.project-card,
.gallery-frame,
.testimonial-image {
    backface-visibility: hidden;
}

.service-item {
    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.service-item:hover {
    transform: translateY(-5px);
}

.process-step {
    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.process-step:hover {
    transform: translateY(-4px);
    background: rgba(201, 154, 69, 0.055);
}

/* =========================================================
   MOBILE PERFORMANCE
========================================================= */

@media (max-width: 768px) {
    .fade-up,
    .fade-in,
    .zoom-in,
    .slide-left,
    .slide-right {
        transition-duration: 0.68s;
    }

    .services-grid .service-item,
    .project-grid .project-card,
    .process-grid .process-step,
    .commitment-gallery .gallery-frame {
        transition-delay: 0s !important;
    }

    .hero-content {
        animation-duration: 0.8s;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-in,
    .zoom-in,
    .slide-left,
    .slide-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-content,
    .hero-topline {
        animation: none !important;
    }

    .gallery-frame img,
    .project-card img,
    .testimonial-image img {
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   RESTORE PREMIUM IMAGE HOVER
========================================================= */

.gallery-frame.fade-up.active:hover img,
.project-card.fade-up.active:hover img {
    transform: scale(1.055);
    filter: brightness(1);
}