/* =============================================================================
 * Widget Divider — base styles
 * BEM root: .gtea-divider
 * Modifier: .gtea-divider--anim (animation active, set by PHP on frontend)
 * States:   .gtea-divider--painting  (viewport mode: CSS transition in flight)
 *           .gtea-divider--painted   (viewport mode: fully revealed, clip removed)
 * ============================================================================= */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.gtea-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
}

/* ── Line ────────────────────────────────────────────────────────────────── */

.gtea-divider__line {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2px;
    background: currentColor;
}

/* =============================================================================
 * Animation states
 * Technique: clip-path reveal from left to right.
 * clip-path: inset(0 RIGHT% 0 0) → RIGHT shrinks from 100% → 0% as line paints.
 * ============================================================================= */

/* Initial hidden state — applied when animation is active */
.gtea-divider--anim .gtea-divider__line {
    clip-path: inset(0 100% 0 0);
}

/* ── Viewport mode: CSS transition triggered by JS class addition ────────── */
/*
 * JS sets CSS vars --divider-duration and --divider-delay on the root element,
 * then adds .gtea-divider--painting. The browser transitions clip-path from
 * inset(0 100% 0 0) → inset(0 0% 0 0).
 */
.gtea-divider--anim.gtea-divider--painting .gtea-divider__line {
    clip-path: inset(0 0% 0 0);
    transition-property: clip-path;
    transition-duration: var(--divider-duration, 1500ms);
    transition-timing-function: ease-in-out;
    transition-delay: var(--divider-delay, 0ms);
}

/*
 * Fully revealed state. JS adds this class after the transition completes
 * (duration + delay + small buffer). Removing clip-path entirely prevents any
 * sub-pixel clipping and keeps the line stable at its final state.
 */
.gtea-divider--anim.gtea-divider--painted .gtea-divider__line {
    clip-path: none;
}

/* ── Scroll mode: clip-path driven via inline style by JS ───────────────── */
/*
 * JS overrides clip-path directly on .gtea-divider__line via element.style,
 * which takes precedence over the class-based initial state above.
 * No CSS transition is used in scroll mode — the value tracks scroll position
 * bidirectionally without easing delays.
 */