/**
 * Animated Blocks Row — Styles
 */

/* -----------------------------------------------------------------------------
 * CSS Custom Properties
 * -------------------------------------------------------------------------- */
.animated-blocks-row {
    --abr-border-radius: 0px;
    --abr-container-bg: transparent;
    --abr-animation-duration: 300ms;
    --abr-animation-stagger: 100ms;
    --abr-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------------------------
 * Container
 * -------------------------------------------------------------------------- */
.animated-blocks-row.animated-blocks-row {
    position: relative;
    background-color: var(--abr-container-bg);
    border-radius: var(--abr-border-radius);
    overflow: hidden;

    margin-block-start: clamp(clamp(clamp(40px, 0.77vw + 37.1px, 42.33px), 5.16vw + 7.4px, 57.87px), 13.95vw + -78.58px, 100px);
    margin-block-end: clamp(clamp(clamp(40px, 0.52vw + 38.07px, 41.56px), 3.44vw + 18.27px, 51.91px), 9.3vw + -39.05px, 80px);
}

.animated-blocks-row__track > .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}


.animated-blocks-row__track > .acf-innerblocks-container > .animated-block-item > .animated-block-item__content > .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.animated-blocks-row__track > .acf-innerblocks-container > .animated-block-item > .animated-block-item__content > .acf-innerblocks-container > *:last-child {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
 * Desktop: Horizontal row, equal widths
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .animated-blocks-row__track > .acf-innerblocks-container {
        flex-direction: row;
    }

    .animated-blocks-row__track > .acf-innerblocks-container > .animated-block-item {
        flex: 1 1 0%;
        min-width: 0;
    }
}

/* -----------------------------------------------------------------------------
 * Mobile: Single column, equal heights
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .animated-blocks-row__track > .acf-innerblocks-container {
        flex-direction: column;
    }

    .animated-blocks-row__track > .acf-innerblocks-container > .animated-block-item {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .animated-blocks-row__track > .acf-innerblocks-container > .animated-block-item > .animated-block-item__content {
        flex: 1;
    }
}

/* -----------------------------------------------------------------------------
 * Animation: Initial hidden state (only on frontend, not editor)
 * -------------------------------------------------------------------------- */
.animated-blocks-row:not(.is-animated):not(.is-editor-preview) .animated-block-item {
    opacity: 0;
    transform: translateX(-100%);
    will-change: opacity, transform;
}

/* -----------------------------------------------------------------------------
 * Animation: Triggered state with staggered delays
 * -------------------------------------------------------------------------- */
.animated-blocks-row.is-animated .animated-block-item {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity var(--abr-animation-duration) var(--abr-timing-function),
        transform var(--abr-animation-duration) var(--abr-timing-function);
}

/* Stagger delays for up to 6 children */
.animated-blocks-row.is-animated .animated-block-item:nth-child(1) {
    transition-delay: 0ms;
}
.animated-blocks-row.is-animated .animated-block-item:nth-child(2) {
    transition-delay: calc(var(--abr-animation-stagger) * 1);
}
.animated-blocks-row.is-animated .animated-block-item:nth-child(3) {
    transition-delay: calc(var(--abr-animation-stagger) * 2);
}
.animated-blocks-row.is-animated .animated-block-item:nth-child(4) {
    transition-delay: calc(var(--abr-animation-stagger) * 3);
}
.animated-blocks-row.is-animated .animated-block-item:nth-child(5) {
    transition-delay: calc(var(--abr-animation-stagger) * 4);
}
.animated-blocks-row.is-animated .animated-block-item:nth-child(6) {
    transition-delay: calc(var(--abr-animation-stagger) * 5);
}


/* reverse z-order */
.animated-block-item:nth-child(1)  { z-index: 6; }
.animated-block-item:nth-child(2)  { z-index: 5; }
.animated-block-item:nth-child(3)  { z-index: 4; }
.animated-block-item:nth-child(4)  { z-index: 3; }
.animated-block-item:nth-child(5)  { z-index: 2; }
.animated-block-item:nth-child(6)  { z-index: 1; }

/* -----------------------------------------------------------------------------
 * Accessibility: Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animated-blocks-row:not(.is-animated) .animated-block-item {
        opacity: 1;
        transform: none;
    }

    .animated-blocks-row.is-animated .animated-block-item {
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
 * Editor: Always visible in preview
 * -------------------------------------------------------------------------- */
.animated-blocks-row.is-editor-preview .animated-block-item {
    opacity: 1;
    transform: none;
}


/* Disable animation */
.animated-blocks-row.animated-blocks-row.animated-blocks-row .animated-block-item {
    opacity: 1;
    transform: none;
    transition: none;
}