/**
 * Featured 3-card entrance (homepage only).
 * Scoped to .services-cards-section — one-time scroll reveal via .cards-animate-in.
 * Initial hidden states live in CSS so there is no FOUC before JS boots.
 *
 * State machine (section classes):
 *   (default)           → cards hidden (pre-anim)
 *   .cards-animate-in   → keyframes play (keep this class; do not remove)
 *   .cards-anim-done    → final visible layout (after keyframes finish)
 *   .cards-anim-reduced → skip motion, final visible immediately
 */

/* Allow side/bottom travel without clipping mid-animation */
.acc-services.services-cards-section {
    overflow: visible;
}

.services-cards-section .services-cards-grid {
    overflow: visible;
    perspective: none;
}

/* Eyebrow stays visible — only cards + titles animate */
.services-cards-section .acc-svc-head > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Kill redesign's generic reveal/opacity:0 — we own motion here */
.services-cards-section .acc-svc-card {
    animation: none;
}

.services-cards-section .acc-svc-card-title {
    perspective: 600px;
}

.services-cards-section .service-card__title {
    display: inline-block;
    transform-origin: top center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ---------- Pre-animation rest (only while waiting to play) ---------- */
.services-cards-section:not(.cards-animate-in):not(.cards-anim-done):not(.cards-anim-reduced) .service-card--left {
    opacity: 0;
    transform: translateX(-120px) rotate(-12deg);
    will-change: transform, opacity;
}

.services-cards-section:not(.cards-animate-in):not(.cards-anim-done):not(.cards-anim-reduced) .service-card--right {
    opacity: 0;
    transform: translateX(120px) rotate(12deg);
    will-change: transform, opacity;
}

.services-cards-section:not(.cards-animate-in):not(.cards-anim-done):not(.cards-anim-reduced) .service-card--middle {
    opacity: 0;
    transform: translateY(150px);
    will-change: transform, opacity;
}

.services-cards-section:not(.cards-animate-in):not(.cards-anim-done):not(.cards-anim-reduced) .service-card__title {
    opacity: 0;
    transform: translateY(-20px) rotateX(-90deg);
    will-change: transform, opacity;
}

/* ---------- Keyframes ---------- */
@keyframes svc-card-from-left {
    from {
        opacity: 0;
        transform: translateX(-120px) rotate(-12deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes svc-card-from-right {
    from {
        opacity: 0;
        transform: translateX(120px) rotate(12deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* Rise → slight overshoot past rest → settle */
@keyframes svc-card-from-below {
    0% {
        opacity: 0;
        transform: translateY(150px);
    }
    60% {
        opacity: 1;
        transform: translateY(-15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes svc-title-flip-down {
    from {
        opacity: 0;
        transform: translateY(-20px) rotateX(-90deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* ---------- Play once when .cards-animate-in is added ---------- */
.services-cards-section.cards-animate-in:not(.cards-anim-done) .service-card--left {
    animation: svc-card-from-left 0.7s ease-out forwards;
    will-change: transform, opacity;
}

.services-cards-section.cards-animate-in:not(.cards-anim-done) .service-card--right {
    animation: svc-card-from-right 0.7s ease-out forwards;
    will-change: transform, opacity;
}

.services-cards-section.cards-animate-in:not(.cards-anim-done) .service-card--middle {
    animation: svc-card-from-below 0.8s ease-out 0.18s forwards;
    will-change: transform, opacity;
}

.services-cards-section.cards-animate-in:not(.cards-anim-done) .service-card--left .service-card__title {
    animation: svc-title-flip-down 0.4s ease-out 0.52s forwards;
    will-change: transform, opacity;
}

.services-cards-section.cards-animate-in:not(.cards-anim-done) .service-card--middle .service-card__title {
    animation: svc-title-flip-down 0.4s ease-out 0.78s forwards;
    will-change: transform, opacity;
}

.services-cards-section.cards-animate-in:not(.cards-anim-done) .service-card--right .service-card__title {
    animation: svc-title-flip-down 0.4s ease-out 0.88s forwards;
    will-change: transform, opacity;
}

/* ---------- Final state (beats redesign opacity:0; never re-hide) ---------- */
.services-cards-section.cards-anim-done .acc-svc-card,
.services-cards-section.cards-anim-reduced .acc-svc-card,
.services-cards-section.cards-anim-done .service-card__title,
.services-cards-section.cards-anim-reduced .service-card__title {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .services-cards-section .acc-svc-card,
    .services-cards-section .service-card__title {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        will-change: auto;
    }
}