/* Editorial doc animation 2b — Ordenamiento y validación
   Light-section tuned. Controlled by .is-ready / .is-playing / .is-paused (pw-hero-anim.js).
   Timing matches design 2b; green corner replaces circular stamp. */

.editorial-anim--2b {
    --dur: 6.5s;
    --ea-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ea-accent: var(--color-accent);
    --ea-stage-fill: var(--color-card-bg-alt);
    --ea-doc-fill: var(--color-bg-alt);
    --ea-doc-stroke: var(--color-border-alt, var(--color-border));
    --ea-doc-fold: color-mix(in srgb, var(--color-card-bg-alt) 70%, var(--color-text-alt) 30%);
    --ea-line: color-mix(in srgb, var(--color-text-alt) 30%, transparent);

    width: 100%;
    max-width: none;
    margin-inline: auto;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.25s var(--ea-ease);
}

.editorial-anim--2b.is-ready,
.editorial-anim--2b.is-reduced {
    opacity: 1;
}

.editorial-anim--2b:not(.is-playing) .editorial-anim__animated,
.editorial-anim--2b.is-paused .editorial-anim__animated {
    animation-play-state: paused;
}

.editorial-anim--2b.is-playing .editorial-anim__animated {
    animation-play-state: running;
}

.editorial-anim--2b .editorial-anim__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.editorial-anim--2b .editorial-anim__stage {
    fill: var(--ea-stage-fill);
}

/* All docs share the same sort timeline — arrive together */
.editorial-anim--2b .editorial-anim__sort {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: editorialAnimSortIn var(--dur) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/*
 * Chaos-only micro-motion, locked to --dur (not a free-running loop).
 * Identity while sorted/checked so docs stay still once validated.
 */
.editorial-anim--2b .editorial-anim__wobble {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: editorialAnimWobbleChaos var(--dur) ease-in-out infinite;
    animation-delay: 0s !important;
    animation-duration: var(--dur) !important;
}

.editorial-anim--2b .editorial-anim__doc {
    fill: var(--ea-doc-fill);
    stroke: var(--ea-doc-stroke);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    stroke-miterlimit: 5;
}

.editorial-anim--2b .editorial-anim__doc-fold {
    fill: var(--ea-doc-fold);
}

.editorial-anim--2b .editorial-anim__doc-line {
    stroke: var(--ea-line);
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
}

.editorial-anim--2b .editorial-anim__doc-line--accent {
    stroke: var(--ea-accent);
}

.editorial-anim--2b .editorial-anim__tick {
    fill: var(--ea-accent);
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    animation: editorialAnimTickBar var(--dur) ease infinite;
    animation-delay: var(--delay, 0s);
}

.editorial-anim--2b .editorial-anim__corner-accent {
    fill: var(--ea-accent);
    opacity: 0;
    animation: editorialAnimCornerIn var(--dur) ease infinite;
    animation-delay: var(--delay, 0s);
}

/* Chaos → row (linger) → check → stack (linger) → back to chaos */
@keyframes editorialAnimSortIn {
    0% { transform: translate(var(--mx, 0), var(--my, 0)) rotate(var(--mr, 0deg)); }
    18% { transform: translate(0, -8px) rotate(0deg); }
    24% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(0, 0) rotate(0deg); }
    64% { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)); }
    88% { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)); }
    100% { transform: translate(var(--mx, 0), var(--my, 0)) rotate(var(--mr, 0deg)); }
}

/* Jitter only in chaos; still during row + stack */
@keyframes editorialAnimWobbleChaos {
    0% { transform: translate(2px, -2.5px) rotate(0.8deg); }
    6% { transform: translate(-2px, 2px) rotate(-0.7deg); }
    12% { transform: translate(1.5px, 2.5px) rotate(0.5deg); }
    18% { transform: translate(-1px, -1.5px) rotate(-0.4deg); }
    22%, 90% { transform: translate(0, 0) rotate(0deg); }
    94% { transform: translate(-2px, 1.5px) rotate(-0.6deg); }
    97% { transform: translate(2px, -2px) rotate(0.7deg); }
    100% { transform: translate(2px, -2.5px) rotate(0.8deg); }
}

/* Bars linger on checked row, then snap off as docs join */
@keyframes editorialAnimTickBar {
    0%, 26% { transform: scaleX(0); opacity: 0; }
    28% { transform: scaleX(0); opacity: 1; }
    36% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(1); opacity: 1; }
    52% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(0); opacity: 0; }
}

/* Green corner: row check → off on join → same fade speed on stack */
@keyframes editorialAnimCornerIn {
    0%, 26% { opacity: 0; }
    36% { opacity: 1; }
    50% { opacity: 1; }
    52% { opacity: 0; }
    64% { opacity: 0; }
    74% { opacity: 1; }
    86% { opacity: 1; }
    92% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-anim--2b {
        opacity: 1;
        transition: none;
    }

    .editorial-anim--2b .editorial-anim__animated {
        animation: none !important;
    }

    .editorial-anim--2b .editorial-anim__sort {
        transform: none !important;
    }

    .editorial-anim--2b .editorial-anim__tick {
        transform: scaleX(1);
        opacity: 1;
    }

    .editorial-anim--2b .editorial-anim__corner-accent {
        opacity: 1;
    }
}

/* Responsive wrapper sizing — containers only; SVG scales via viewBox */
@media (max-width: 1024px) {
    .editorial-anim--2b {
        max-width: min(100%, 40rem);
        min-height: clamp(14rem, 26vw, 20rem);
    }
}

@media (max-width: 768px) {
    .editorial-anim--2b {
        max-width: min(100%, 32rem);
        min-height: clamp(12rem, 34vw, 18rem);
    }
}

@media (max-width: 480px) {
    .editorial-anim--2b {
        max-width: 100%;
        min-height: clamp(10rem, 46vw, 14rem);
    }
}

/* ── 2b-mini variant ──
   Same keyframes / timing as full 2b; 3 docs; unique element class hooks. */

.editorial-anim--2b-mini {
    --dur: 6.5s;
    --ea-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ea-accent: var(--color-accent);
    --ea-stage-fill: var(--color-card-bg-alt);
    --ea-doc-fill: var(--color-bg-alt);
    --ea-doc-stroke: var(--color-border-alt, var(--color-border));
    --ea-doc-fold: color-mix(in srgb, var(--color-card-bg-alt) 70%, var(--color-text-alt) 30%);
    --ea-line: color-mix(in srgb, var(--color-text-alt) 30%, transparent);

    width: 100%;
    max-width: none;
    margin-inline: auto;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.25s var(--ea-ease);
}

.editorial-anim--2b-mini.is-ready,
.editorial-anim--2b-mini.is-reduced {
    opacity: 1;
}

.editorial-anim--2b-mini:not(.is-playing) .editorial-anim-mini__animated,
.editorial-anim--2b-mini.is-paused .editorial-anim-mini__animated {
    animation-play-state: paused;
}

.editorial-anim--2b-mini.is-playing .editorial-anim-mini__animated {
    animation-play-state: running;
}

.editorial-anim--2b-mini .editorial-anim-mini__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.editorial-anim--2b-mini .editorial-anim-mini__stage {
    fill: var(--ea-stage-fill);
}

.editorial-anim--2b-mini .editorial-anim-mini__sort {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: editorialAnimSortIn var(--dur) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.editorial-anim--2b-mini .editorial-anim-mini__wobble {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: editorialAnimWobbleChaos var(--dur) ease-in-out infinite;
    animation-delay: 0s !important;
    animation-duration: var(--dur) !important;
}

.editorial-anim--2b-mini .editorial-anim-mini__doc {
    fill: var(--ea-doc-fill);
    stroke: var(--ea-doc-stroke);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    stroke-miterlimit: 5;
}

.editorial-anim--2b-mini .editorial-anim-mini__doc-fold {
    fill: var(--ea-doc-fold);
}

.editorial-anim--2b-mini .editorial-anim-mini__doc-line {
    stroke: var(--ea-line);
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
}

.editorial-anim--2b-mini .editorial-anim-mini__doc-line--accent {
    stroke: var(--ea-accent);
}

.editorial-anim--2b-mini .editorial-anim-mini__tick {
    fill: var(--ea-accent);
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    animation: editorialAnimTickBar var(--dur) ease infinite;
    animation-delay: var(--delay, 0s);
}

.editorial-anim--2b-mini .editorial-anim-mini__corner-accent {
    fill: var(--ea-accent);
    opacity: 0;
    animation: editorialAnimCornerIn var(--dur) ease infinite;
    animation-delay: var(--delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .editorial-anim--2b-mini {
        opacity: 1;
        transition: none;
    }

    .editorial-anim--2b-mini .editorial-anim-mini__animated {
        animation: none !important;
    }

    .editorial-anim--2b-mini .editorial-anim-mini__sort {
        transform: none !important;
    }

    .editorial-anim--2b-mini .editorial-anim-mini__tick {
        transform: scaleX(1);
        opacity: 1;
    }

    .editorial-anim--2b-mini .editorial-anim-mini__corner-accent {
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .editorial-anim--2b-mini {
        max-width: min(100%, 36rem);
        min-height: clamp(14rem, 26vw, 20rem);
    }
}

@media (max-width: 768px) {
    .editorial-anim--2b-mini {
        max-width: min(100%, 30rem);
        min-height: clamp(12rem, 34vw, 18rem);
    }
}

@media (max-width: 480px) {
    .editorial-anim--2b-mini {
        max-width: 100%;
        min-height: clamp(10rem, 46vw, 14rem);
    }
}