/**
 * Proven Industrial Experience — one-time premium entrance (homepage).
 * Scoped to .proven-experience-section. Triggered by .experience-animate-in
 * (IntersectionObserver in experience-entrance.js).
 *
 * State machine:
 *   (default)                  → hidden pre-anim (FOUC-safe)
 *   .experience-animate-in     → keyframes play (keep this class)
 *   .experience-anim-done      → final visible layout after keyframes
 *   .experience-anim-reduced   → skip motion, final visible immediately
 */

/* Allow mid-animation travel without clipping cards/text */
.acc-statistic.proven-experience-section {
    overflow: visible;
}

.proven-experience-section .acc-statistic-wrap,
.proven-experience-section .acc-statistic-grid,
.proven-experience-section .acc-statistic-intro {
    overflow: visible;
}

.proven-experience-section .acc-statistic-grid {
    perspective: 900px;
}

/* ---------- Keyframes: left column ---------- */
@keyframes experience-label-in {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes experience-label-dash {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes experience-heading-in {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes experience-fade-rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes experience-divider-in {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Settle (~0.45s), then one-time scale + gold glow pulse (~0.3s) */
@keyframes experience-btn-in-pulse {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
    }
    55% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
    }
    78% {
        opacity: 1;
        transform: translateY(0) scale(1.04);
        box-shadow: 0 10px 32px rgba(245, 166, 35, 0.45);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
    }
}

/* ---------- Keyframes: stat cards (settle with overshoot) ---------- */
@keyframes experience-card-tl {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotate(-4deg);
    }
    72% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes experience-card-tr {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotate(4deg);
    }
    72% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes experience-card-bl {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotate(3deg);
    }
    72% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes experience-card-br {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotate(-3deg);
    }
    72% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes experience-icon-pop {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes experience-card-title-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Pre-animation rest (FOUC-safe, before JS) ---------- */
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__label,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-sub {
    opacity: 0;
    transform: translateX(-20px);
    will-change: transform, opacity;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__label::before,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-sub::before {
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__heading,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-title {
    opacity: 0;
    transform: translateY(25px);
    will-change: transform, opacity;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__divider,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-divider {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform, opacity;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__paragraph,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-text {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__button,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-btn {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    will-change: transform, opacity, box-shadow;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__card,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotate(-4deg);
    will-change: transform, opacity;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card:nth-child(2) {
    transform: translateY(40px) scale(0.9) rotate(4deg);
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card:nth-child(3) {
    transform: translateY(40px) scale(0.9) rotate(3deg);
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card:nth-child(4) {
    transform: translateY(40px) scale(0.9) rotate(-3deg);
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__card-icon,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-icon {
    transform: scale(0);
    will-change: transform;
}

.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .proven-experience__card-title,
.proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card .text {
    opacity: 0;
    transform: translateY(8px);
    will-change: transform, opacity;
}

/*
 * Play sequence (desktop):
 * Label @0 → heading @0.1 → cards start @0.1 (stagger 0.12) →
 * paragraph @0.8 → button @1.3 (last on left).
 * Icon pops ~75% into each card; title follows ~0.05s later.
 */
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .proven-experience__label,
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-statistic-intro .acc-sub {
    animation: experience-label-in 0.5s ease-out 0s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .proven-experience__label::before,
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-statistic-intro .acc-sub::before {
    transform-origin: left center;
    animation: experience-label-dash 0.5s ease-out 0s both;
    will-change: transform;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .proven-experience__heading,
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-statistic-intro .acc-title {
    animation: experience-heading-in 0.6s ease-out 0.1s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .proven-experience__divider,
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-statistic-divider {
    transform-origin: left center;
    animation: experience-divider-in 0.45s ease-out 0.72s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .proven-experience__paragraph,
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-statistic-intro .acc-text {
    animation: experience-fade-rise 0.5s ease-out 0.8s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .proven-experience__button,
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-statistic-intro .acc-btn {
    animation: experience-btn-in-pulse 0.75s ease-out 1.3s both;
    will-change: transform, opacity, box-shadow;
}

/* Cards: TL → TR → BL → BR (DOM order = reading order; also top→bottom if stacked) */
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(1) {
    animation: experience-card-tl 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(2) {
    animation: experience-card-tr 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(3) {
    animation: experience-card-bl 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.34s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(4) {
    animation: experience-card-br 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.46s both;
    will-change: transform, opacity;
}

/* Icon pop ~75% into parent card (~0.49s after card start) */
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(1) .acc-stat-icon {
    animation: experience-icon-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.59s both;
    will-change: transform;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(2) .acc-stat-icon {
    animation: experience-icon-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.71s both;
    will-change: transform;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(3) .acc-stat-icon {
    animation: experience-icon-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.83s both;
    will-change: transform;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(4) .acc-stat-icon {
    animation: experience-icon-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s both;
    will-change: transform;
}

/* Card title: ~0.05s after icon pop starts */
.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(1) .text {
    animation: experience-card-title-in 0.3s ease-out 0.64s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(2) .text {
    animation: experience-card-title-in 0.3s ease-out 0.76s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(3) .text {
    animation: experience-card-title-in 0.3s ease-out 0.88s both;
    will-change: transform, opacity;
}

.proven-experience-section.experience-animate-in:not(.experience-anim-done) .acc-stat-card:nth-child(4) .text {
    animation: experience-card-title-in 0.3s ease-out 1s both;
    will-change: transform, opacity;
}

/* ---------- Final locked state (pixel-identical rest layout) ---------- */
.proven-experience-section.experience-anim-done .acc-statistic-intro .acc-sub,
.proven-experience-section.experience-anim-done .acc-statistic-intro .acc-title,
.proven-experience-section.experience-anim-done .acc-statistic-divider,
.proven-experience-section.experience-anim-done .acc-statistic-intro .acc-text,
.proven-experience-section.experience-anim-done .acc-statistic-intro .acc-btn,
.proven-experience-section.experience-anim-done .acc-stat-card,
.proven-experience-section.experience-anim-done .acc-stat-icon,
.proven-experience-section.experience-anim-done .acc-stat-card .text,
.proven-experience-section.experience-anim-reduced .acc-statistic-intro .acc-sub,
.proven-experience-section.experience-anim-reduced .acc-statistic-intro .acc-title,
.proven-experience-section.experience-anim-reduced .acc-statistic-divider,
.proven-experience-section.experience-anim-reduced .acc-statistic-intro .acc-text,
.proven-experience-section.experience-anim-reduced .acc-statistic-intro .acc-btn,
.proven-experience-section.experience-anim-reduced .acc-stat-card,
.proven-experience-section.experience-anim-reduced .acc-stat-icon,
.proven-experience-section.experience-anim-reduced .acc-stat-card .text {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
}

.proven-experience-section.experience-anim-done .acc-statistic-intro .acc-sub::before,
.proven-experience-section.experience-anim-reduced .acc-statistic-intro .acc-sub::before {
    transform: none;
    animation: none;
    will-change: auto;
}

/* Gold button rest shadow matches redesign (none) */
.proven-experience-section.experience-anim-done .acc-statistic-intro .acc-btn,
.proven-experience-section.experience-anim-reduced .acc-statistic-intro .acc-btn {
    box-shadow: none;
}

/* ---------- Mobile / tablet: shorter travel, same DOM stagger ---------- */
@media (max-width: 991px) {
    @keyframes experience-label-in {
        from {
            opacity: 0;
            transform: translateX(-12px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes experience-heading-in {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes experience-fade-rise {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes experience-card-tl {
        0% {
            opacity: 0;
            transform: translateY(24px) scale(0.92) rotate(-3deg);
        }
        72% {
            opacity: 1;
            transform: translateY(-1px) scale(1.02) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotate(0deg);
        }
    }

    @keyframes experience-card-tr {
        0% {
            opacity: 0;
            transform: translateY(24px) scale(0.92) rotate(3deg);
        }
        72% {
            opacity: 1;
            transform: translateY(-1px) scale(1.02) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotate(0deg);
        }
    }

    @keyframes experience-card-bl {
        0% {
            opacity: 0;
            transform: translateY(24px) scale(0.92) rotate(2deg);
        }
        72% {
            opacity: 1;
            transform: translateY(-1px) scale(1.02) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotate(0deg);
        }
    }

    @keyframes experience-card-br {
        0% {
            opacity: 0;
            transform: translateY(24px) scale(0.92) rotate(-2deg);
        }
        72% {
            opacity: 1;
            transform: translateY(-1px) scale(1.02) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotate(0deg);
        }
    }

    .proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-sub {
        transform: translateX(-12px);
    }

    .proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-title {
        transform: translateY(16px);
    }

    .proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-statistic-intro .acc-text {
        transform: translateY(12px);
    }

    .proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card {
        transform: translateY(24px) scale(0.92) rotate(-3deg);
    }

    .proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card:nth-child(2) {
        transform: translateY(24px) scale(0.92) rotate(3deg);
    }

    .proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card:nth-child(3) {
        transform: translateY(24px) scale(0.92) rotate(2deg);
    }

    .proven-experience-section:not(.experience-animate-in):not(.experience-anim-done):not(.experience-anim-reduced) .acc-stat-card:nth-child(4) {
        transform: translateY(24px) scale(0.92) rotate(-2deg);
    }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .proven-experience-section .acc-statistic-intro .acc-sub,
    .proven-experience-section .acc-statistic-intro .acc-sub::before,
    .proven-experience-section .acc-statistic-intro .acc-title,
    .proven-experience-section .acc-statistic-divider,
    .proven-experience-section .acc-statistic-intro .acc-text,
    .proven-experience-section .acc-statistic-intro .acc-btn,
    .proven-experience-section .acc-stat-card,
    .proven-experience-section .acc-stat-icon,
    .proven-experience-section .acc-stat-card .text {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
        box-shadow: none !important;
    }
}