/**
 * About Us — one-time hanging collage + staggered text entrance (homepage).
 * Scoped to .about-us-section. Triggered by .about-animate-in (IntersectionObserver).
 *
 * State machine:
 *   (default)              → hidden pre-anim (FOUC-safe)
 *   .about-animate-in      → keyframes play (keep this class)
 *   .about-anim-done       → final visible layout after keyframes
 *   .about-anim-reduced    → skip motion, final visible immediately
 */

/* Allow hanging travel from above without clipping */
.acc-about.about-us-section {
    overflow: visible;
}

.about-us-section .acc-about-img,
.about-us-section .acc-about-collage {
    overflow: visible;
}

/* ---------- Keyframes: hanging / pendulum settle ---------- */
@keyframes about-hang-left {
    0% {
        opacity: 0;
        transform: translateY(-60px) rotate(-8deg);
    }
    50% {
        opacity: 1;
        transform: translateY(6px) rotate(3deg);
    }
    75% {
        transform: translateY(-2px) rotate(-1.5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes about-hang-right {
    0% {
        opacity: 0;
        transform: translateY(-60px) rotate(8deg);
    }
    50% {
        opacity: 1;
        transform: translateY(6px) rotate(-3deg);
    }
    75% {
        transform: translateY(-2px) rotate(1.5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes about-dots-fade {
    from { opacity: 0; }
    to { opacity: 0.4; }
}

@keyframes about-fade-rise-sm {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes about-fade-rise-md {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Settle, then one-time premium pulse */
@keyframes about-btn-in-pulse {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    55% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    78% {
        opacity: 1;
        transform: translateY(0) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- Pre-animation rest (FOUC-safe, before JS) ---------- */
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-collage__img,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile {
    opacity: 0;
    transform: translateY(-60px) rotate(-6deg);
    will-change: transform, opacity;
}

.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile--2,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile--3,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile--5 {
    transform: translateY(-60px) rotate(6deg);
}

.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-collage__dots,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-dots {
    opacity: 0;
    will-change: opacity;
}

.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-text__label,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-text__heading,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-text__paragraph,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-text__bullet,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-sub,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-title,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-text > p,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-text li {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-text__button,
.about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body > .acc-btn {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    will-change: transform, opacity;
}

/* ---------- Play: collage hang (top-left → bottom-right stagger) ---------- */
.about-us-section.about-animate-in:not(.about-anim-done) .acc-collage-tile--1 {
    animation: about-hang-left 1s ease-out 0s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-collage-tile--2 {
    animation: about-hang-right 1s ease-out 0.14s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-collage-tile--3 {
    animation: about-hang-right 1.05s ease-out 0.28s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-collage-tile--4 {
    animation: about-hang-left 1s ease-out 0.42s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-collage-tile--5 {
    animation: about-hang-right 1.05s ease-out 0.56s both;
    will-change: transform, opacity;
}

/* Dots fade in after nearest tiles settle (~tile end + small beat) */
.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-dots {
    animation: about-dots-fade 0.45s ease-out 1.15s both;
    will-change: opacity;
}

/* ---------- Play: text column (starts ~0.28s after images begin) ---------- */
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__label,
.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-sub {
    animation: about-fade-rise-sm 0.5s ease-out 0.28s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__heading,
.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-title {
    animation: about-fade-rise-md 0.6s ease-out 0.38s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text > p:nth-of-type(1),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__paragraph:nth-of-type(1) {
    animation: about-fade-rise 0.5s ease-out 0.48s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text > p:nth-of-type(2),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__paragraph:nth-of-type(2) {
    animation: about-fade-rise 0.5s ease-out 0.56s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text li:nth-child(1),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__bullet:nth-child(1) {
    animation: about-fade-rise-sm 0.45s ease-out 0.68s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text li:nth-child(2),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__bullet:nth-child(2) {
    animation: about-fade-rise-sm 0.45s ease-out 0.75s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text li:nth-child(3),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__bullet:nth-child(3) {
    animation: about-fade-rise-sm 0.45s ease-out 0.82s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text li:nth-child(4),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__bullet:nth-child(4) {
    animation: about-fade-rise-sm 0.45s ease-out 0.89s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text li:nth-child(5),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__bullet:nth-child(5) {
    animation: about-fade-rise-sm 0.45s ease-out 0.96s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text li:nth-child(n + 6),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__bullet:nth-child(n + 6) {
    animation: about-fade-rise-sm 0.45s ease-out 1.03s both;
    will-change: transform, opacity;
}

/* Closing paragraph(s) after the list */
.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body .acc-text > p:nth-of-type(n + 3),
.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__paragraph:nth-of-type(n + 3) {
    animation: about-fade-rise 0.5s ease-out 1.12s both;
    will-change: transform, opacity;
}

.about-us-section.about-animate-in:not(.about-anim-done) .about-us-text__button,
.about-us-section.about-animate-in:not(.about-anim-done) .acc-about-body > .acc-btn {
    animation: about-btn-in-pulse 0.75s ease-out 1.28s both;
    will-change: transform, opacity;
}

/* ---------- Final locked state (pixel-identical rest layout) ---------- */
.about-us-section.about-anim-done .acc-collage-tile,
.about-us-section.about-anim-done .about-us-collage__img,
.about-us-section.about-anim-reduced .acc-collage-tile,
.about-us-section.about-anim-reduced .about-us-collage__img {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
}

.about-us-section.about-anim-done .acc-about-dots,
.about-us-section.about-anim-reduced .acc-about-dots {
    opacity: 0.4;
    animation: none;
    will-change: auto;
}

.about-us-section.about-anim-done .acc-about-body .acc-sub,
.about-us-section.about-anim-done .acc-about-body .acc-title,
.about-us-section.about-anim-done .acc-about-body .acc-text > p,
.about-us-section.about-anim-done .acc-about-body .acc-text li,
.about-us-section.about-anim-done .acc-about-body > .acc-btn,
.about-us-section.about-anim-reduced .acc-about-body .acc-sub,
.about-us-section.about-anim-reduced .acc-about-body .acc-title,
.about-us-section.about-anim-reduced .acc-about-body .acc-text > p,
.about-us-section.about-anim-reduced .acc-about-body .acc-text li,
.about-us-section.about-anim-reduced .acc-about-body > .acc-btn {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
}

/* ---------- Mobile: shorter drop distance ---------- */
@media (max-width: 991px) {
    @keyframes about-hang-left {
        0% {
            opacity: 0;
            transform: translateY(-36px) rotate(-5deg);
        }
        50% {
            opacity: 1;
            transform: translateY(4px) rotate(2deg);
        }
        75% {
            transform: translateY(-1px) rotate(-1deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) rotate(0deg);
        }
    }

    @keyframes about-hang-right {
        0% {
            opacity: 0;
            transform: translateY(-36px) rotate(5deg);
        }
        50% {
            opacity: 1;
            transform: translateY(4px) rotate(-2deg);
        }
        75% {
            transform: translateY(-1px) rotate(1deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) rotate(0deg);
        }
    }

    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .about-us-collage__img,
    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile {
        transform: translateY(-36px) rotate(-5deg);
    }

    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile--2,
    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile--3,
    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-collage-tile--5 {
        transform: translateY(-36px) rotate(5deg);
    }

    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-sub,
    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-title,
    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-text > p,
    .about-us-section:not(.about-animate-in):not(.about-anim-done):not(.about-anim-reduced) .acc-about-body .acc-text li {
        transform: translateY(12px);
    }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .about-us-section .acc-collage-tile,
    .about-us-section .acc-about-dots,
    .about-us-section .acc-about-body .acc-sub,
    .about-us-section .acc-about-body .acc-title,
    .about-us-section .acc-about-body .acc-text > p,
    .about-us-section .acc-about-body .acc-text li,
    .about-us-section .acc-about-body > .acc-btn {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}