/*!*****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/blocks/vision-sequence/main.css ***!
  \*****************************************************************************************************************************************************************************************/
/*
 * Vision Sequence — Pure CSS animated text cycle
 *
 * Uses CSS custom properties for dynamic timing.
 * Each sentence gets an equal slice of the loop duration.
 * animation-delay is calculated per-line via --vs-index / --vs-total.
 *
 * Keyframes use percentage-based timing so they scale
 * automatically when loopDuration changes.
 */

/* ── Layout ─────────────────────────────────────────────── */

.vision-sequence {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 10px 0;
    min-height: 15rem;
}

.vision-sequence.left {
    align-items: flex-start;
    text-align: left;
}

.vision-sequence.right {
    align-items: flex-end;
    text-align: right;
}

.vision-sequence__stage {
    position: relative;
    width: 100%;
    max-width: 900px;
    min-height: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Sentence lines ─────────────────────────────────────── */

.vision-sequence__line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 800px;
    margin: 0;
    font-family: var(--wp--preset--font-family--eca-bricolage, sans-serif);
    font-size: var(--wp--preset--font-size--gigantic, 3.2rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--wp--preset--color--eca-black, #504532);
    text-align: inherit;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(20px);
    will-change: opacity, transform;
    pointer-events: none;
}

/* ── Animation keyframes ──────────────────────────────────
 *
 * Each sentence is visible for (100% / total) of the loop.
 * For 4 sentences: visible from 0% to 25%, invisible 25-100%.
 *
 * Timeline per sentence:
 *   0%          — start invisible, 20px below
 *   fade-in     — visible after ~15% of its slice
 *   hold        — stays visible for emphasis
 *   fade-out    — starts fading at ~85% of its slice
 *   slice-end   — fully faded, slight upward drift
 *   100%        — invisible for remaining slices
 *
 * For 4 sentences (25% per slice):
 *   0% → 3.75% = fade in
 *   3.75% → 21.25% = hold
 *   21.25% → 25% = fade out
 *   25% → 100% = hidden
 */

@keyframes vs-cycle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(20px);
    }
    3.75% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
    21.25% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
    25% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-10px);
    }
}

/* ── Apply animation to all lines ─────────────────────────
 *
 * All lines share the same keyframes but with staggered delays.
 * Delay = (index / total) × loopDuration
 * This creates the sequential one-at-a-time effect.
 *
 * The animation shorthand sets name/duration/easing/iteration;
 * animation-delay is overridden per-line via custom properties.
 */

.vision-sequence__line {
    animation-name: vs-cycle;
    animation-duration: var(--vs-loop-duration, 16s);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: calc((var(--vs-index, 0) / var(--vs-total, 4)) * var(--vs-loop-duration, 16s));
}

/* ── Escalation: final sentence slightly bolder ─────────── */

.vision-sequence__line:last-child {
    font-weight: 700;
}

/* ── CTA ────────────────────────────────────────────────── */

.vision-sequence__cta {
    margin-top: 3rem;
    opacity: 0;
    animation: vs-cta-reveal var(--vs-loop-duration, 16s) cubic-bezier(0.33, 1, 0.68, 1) 0s infinite;
}

@keyframes vs-cta-reveal {
    0%,
    78% {
        opacity: 0;
        transform: translateY(10px);
    }
    85%,
    93% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.vision-sequence__cta-link,
.vision-sequence__cta-text {
    font-family: var(--wp--preset--font-family--eca-nunito, sans-serif);
    font-size: var(--wp--preset--font-size--p-big, 1.25rem);
    font-weight: 500;
    color: var(--wp--preset--color--eca-beige, var(--wp--preset--color--eca-beige));
    text-decoration: none;
    letter-spacing: 0.05rem;
    transition: color 0.3s ease;
}

.vision-sequence__cta-link:hover {
    color: var(--wp--preset--color--eca-yellow, var(--wp--preset--color--eca-yellow));
}

/* ── Editor overrides ───────────────────────────────────── */

.editor-styles-wrapper .vision-sequence__line,
.block-editor-block-list__layout .vision-sequence__line {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    animation: none;
    pointer-events: auto;
    margin-bottom: 1rem;
}

.editor-styles-wrapper .vision-sequence__cta,
.block-editor-block-list__layout .vision-sequence__cta {
    opacity: 1;
    animation: none;
}

.editor-styles-wrapper .vision-sequence__stage,
.block-editor-block-list__layout .vision-sequence__stage {
    min-height: auto;
    flex-direction: column;
}

.vision-sequence__line-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.vision-sequence__remove {
    flex-shrink: 0;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    line-height: 1;
}

.vision-sequence__add {
    margin-top: 0.5rem;
    align-self: center;
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .vision-sequence__line {
        animation: none;
        opacity: 0;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 1rem;
    }

    .vision-sequence__line:first-child {
        opacity: 1;
    }

    .vision-sequence__cta {
        animation: none;
        opacity: 1;
    }
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 783px) {
    .vision-sequence {
        padding: 3rem var(--wp--preset--spacing--mobile-padding, 6vw);
        min-height: 30vh;
    }

    .vision-sequence__stage {
        min-height: 8em;
    }

    .vision-sequence__line {
        font-size: var(--wp--preset--font-size--heading-1, 3rem);
    }
}


/*# sourceMappingURL=index.css.map*/