/*
==========================================================
BEFORE / AFTER — before_after.css
==========================================================
WHAT IT IS:
A flexible comparison block for showing a before/after
transformation or visual difference between two states.

WHAT IT DOES:
Two display modes:
- Slider: two background images overlaid with a draggable
  range-input handle. CSS clip-path clips the "after" image
  to the right of the handle position.
- Transform: a single card. Before state is shown by default.
  After state is an absolute overlay (opacity: 0) that fades
  in on hover, :focus-within, or tap/click toggle. Before
  defines the card height; after overlays it exactly.

HOW TO USE:
1. Add the "Before / After" block to any page.
2. Choose Display Mode: Slider or Transform.
3. Slider: upload before/after images, set start position.
4. Transform: fill before/after titles, text, and chip items.
5. Both modes: optional eyebrow, heading, and intro text.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/


/* ── Base Block ────────────────────────────────────────────── */

.before_after {
    padding: var(--space-20) 0;
    background-color: var(--color-bg);
}

.before_after_wrapper {
    /* layout only — max-width and horizontal padding from .wrapper */
}


/* ── Section Header ────────────────────────────────────────── */

.before_after_header {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-12);
}

.ba_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.ba_heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--leading-tight);
}

.ba_intro {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.ba_intro p:last-child { margin-bottom: 0; }


/* ── Stage ─────────────────────────────────────────────────── */

.ba_stage {
    position: relative;
}


/* ── Slider Mode ───────────────────────────────────────────── */

.ba_slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    user-select: none;
    cursor: col-resize;
    aspect-ratio: 16 / 9;
    --ba-split: 50%;
    background-color: var(--color-bg-alt);
}

.ba_slider_before,
.ba_slider_after {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Before fills the full area as the base */
.ba_slider_before {
    z-index: 1;
}

/* After clips to reveal only from the handle rightward */
.ba_slider_after {
    z-index: 2;
    clip-path: inset(0 0 0 var(--ba-split));
}

/* Drag handle */
.ba_slider_handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-split);
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ba_slider_line {
    width: 2px;
    height: 100%;
    background-color: var(--color-white);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.ba_slider_thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Left/right chevron arrows inside the thumb */
.ba_slider_thumb::before,
.ba_slider_thumb::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
}

.ba_slider_thumb::before {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid var(--color-bg-dark);
    left: 9px;
}

.ba_slider_thumb::after {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid var(--color-bg-dark);
    right: 9px;
}

/* Range input: transparent overlay, handles all pointer/keyboard interaction */
.ba_slider_range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: col-resize;
    z-index: 5;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Before / After labels on the images */
.ba_slider_label {
    position: absolute;
    top: var(--space-4);
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.55);
    color: var(--color-text-inverse);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-md);
}

.ba_slider_label_before { left: var(--space-4); }
.ba_slider_label_after  { right: var(--space-4); }

/* Optional caption below the slider */
.ba_slider_caption {
    text-align: center;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

/* Contained slider style — constrains slider width */
.ba_slider_style_contained .ba_slider {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* ── Transform Mode ────────────────────────────────────────── */

/* Single card container — before is the base, after overlays on reveal */
.ba_transform {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* min-height set by .ba_transform_state_before (position: relative) */
}

/* Touch/pen devices: show pointer cursor as tap affordance */
@media (hover: none) {
    .ba_transform { cursor: pointer; }
}

/* Before state: position relative so it defines the card's height */
.ba_transform_state_before {
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / 1;
}

/* After state: absolute overlay, hidden by default */
.ba_transform_state_after {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Shared state styles */
.ba_transform_state {
    background-color: var(--color-bg-alt);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

/* All reveal states driven by JS classes — no CSS :hover used.
   Mouse hover → .ba_revealed via mouseenter/mouseleave
   Touch tap → .ba_revealed toggled via touchend
   Keyboard focus → .ba_focused via focus/blur */
.ba_transform.ba_revealed .ba_transform_state_after,
.ba_transform.ba_focused .ba_transform_state_after {
    opacity: 1;
}

/* Content area — sits above the background image overlay */
.ba_transform_content {
    position: relative;
    z-index: 2;
    padding: var(--space-10) var(--space-8);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Overlay on states that have a background image — improves text legibility */
.ba_transform_has_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.38) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Badge — "Before" or "After" label pill */
.ba_transform_badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-5);
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.ba_transform_has_bg .ba_transform_badge {
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Card heading */
.ba_transform_title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--leading-tight);
}

.ba_transform_has_bg .ba_transform_title {
    color: var(--color-text-inverse);
}

/* Card body text */
.ba_transform_text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-6) 0;
}

.ba_transform_has_bg .ba_transform_text {
    color: rgba(255, 255, 255, 0.8);
}

/* Chip list */
.ba_transform_chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

.ba_transform_chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    line-height: 1.4;
}

.ba_transform_has_bg .ba_transform_chip {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Interaction cue below the card */
.ba_transform_cue {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Background style modifiers */
.ba_transform_state.ba_bg_dark {
    background-color: var(--color-bg-dark);
}

.ba_transform_state.ba_bg_dark .ba_transform_title {
    color: var(--color-text-inverse);
}

.ba_transform_state.ba_bg_dark .ba_transform_text {
    color: rgba(255, 255, 255, 0.75);
}

.ba_transform_state.ba_bg_dark .ba_transform_chip {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.2);
}

.ba_transform_state.ba_bg_dark .ba_transform_badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.25);
}

.ba_transform_state.ba_bg_accent {
    background-color: var(--color-accent);
}

.ba_transform_state.ba_bg_accent .ba_transform_title,
.ba_transform_state.ba_bg_accent .ba_transform_badge {
    color: var(--color-text-inverse);
}

.ba_transform_state.ba_bg_accent .ba_transform_text {
    color: rgba(255, 255, 255, 0.85);
}

.ba_transform_state.ba_bg_accent .ba_transform_chip {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.3);
}


/* ── Section Variants (v4 pattern) — AFTER base rule ──────── */

.before_after_variant_default {
    background-color: var(--color-bg);
}

.before_after_variant_minimal {
    padding: var(--space-12) 0;
    background-color: transparent;
}

.before_after_variant_dark {
    background-color: var(--color-bg-dark);
}

.before_after_variant_dark .ba_heading {
    color: var(--color-text-inverse);
}

.before_after_variant_dark .ba_eyebrow {
    color: var(--color-accent);
}

.before_after_variant_dark .ba_intro {
    color: rgba(255, 255, 255, 0.7);
}

.before_after_variant_dark .ba_slider_caption,
.before_after_variant_dark .ba_transform_cue {
    color: rgba(255, 255, 255, 0.5);
}

/* Stubs — define per project in style.css §10 */
.before_after_variant_homepage_feature { /* see style.css §10 */ }
.before_after_variant_cards_feature    { /* see style.css §10 */ }
.before_after_variant_inner_banner     { /* see style.css §10 */ }

/* ── ByDeNero — split feature / Services transformation ─────── */

.before_after_variant_split_feature {
    position: relative;
    background-color: transparent;
    overflow: visible;
}

.before_after_variant_split_feature .before_after_wrapper {
    position: relative;
}

.before_after_variant_split_feature .before_after_header {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin-bottom: clamp(var(--space-16), 8vw, var(--space-24));
    padding: clamp(var(--space-8), 4vw, var(--space-12)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-bottom-color: transparent;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 12% 10%, rgba(245, 166, 35, 0.10), transparent 30%),
        radial-gradient(circle at 90% 0%, rgba(108, 164, 255, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.20) 68%, rgba(255, 255, 255, 0) 100%);
    box-shadow:
        0 18px 58px rgba(10, 15, 44, 0.20),
        0 0 34px rgba(108, 164, 255, 0.18),
        0 0 32px rgba(162, 89, 255, 0.14),
        0 0 42px rgba(245, 166, 35, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.28) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.72) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.72) 90%, transparent 100%);
}

.before_after_variant_split_feature .before_after_header::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-xl) - 1px);
    background:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.32;
    pointer-events: none;
}

.before_after_variant_split_feature .before_after_header::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.60), rgba(162, 89, 255, 0.48), transparent);
    box-shadow: 0 0 22px rgba(245, 166, 35, 0.18);
    pointer-events: none;
}

.before_after_variant_split_feature .ba_eyebrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -18%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0;
    padding: 0.72rem 1.35rem;
    border: 1px solid rgba(212, 114, 255, 0.34);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(10, 15, 44, 0.98), rgba(9, 12, 38, 0.96)),
        rgba(10, 15, 44, 0.96);
    color: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 16px 34px rgba(10, 15, 44, 0.30),
        0 0 26px rgba(162, 89, 255, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.before_after_variant_split_feature .ba_heading {
    position: relative;
    z-index: 1;
    max-width: 12ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-primary);
    font-size: clamp(2.4rem, 4.3vw, 4.3rem);
    line-height: 0.98;
    letter-spacing: 0;
    text-shadow:
        0 12px 30px rgba(255, 255, 255, 0.30),
        0 0 28px rgba(108, 164, 255, 0.14);
}

.before_after_variant_split_feature .ba_intro {
    position: relative;
    z-index: 1;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    color: rgba(10, 15, 44, 0.90);
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.7;
    text-shadow: 0 10px 26px rgba(255, 255, 255, 0.24);
}

.before_after_variant_split_feature .ba_stage {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.before_after_variant_split_feature .ba_stage::before {
    content: "";
    position: absolute;
    inset: -42px -56px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 14% 16%, rgba(245, 166, 35, 0.13), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(108, 164, 255, 0.14), transparent 32%),
        radial-gradient(circle at 55% 96%, rgba(162, 89, 255, 0.17), transparent 38%),
        linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.030) 1px, transparent 1px),
        linear-gradient(135deg, rgba(5, 8, 27, 0.98), rgba(10, 15, 44, 0.84));
    background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
    border: 1px solid rgba(212, 114, 255, 0.22);
    box-shadow:
        inset 0 34px 92px rgba(0, 0, 0, 0.58),
        inset 0 -18px 62px rgba(162, 89, 255, 0.16),
        0 0 54px rgba(162, 89, 255, 0.16),
        0 0 58px rgba(245, 166, 35, 0.06),
        0 28px 78px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.before_after_variant_split_feature .ba_transform {
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 32px 84px rgba(0, 0, 0, 0.34),
        0 0 46px rgba(162, 89, 255, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.80) inset;
}

.before_after_variant_split_feature .ba_transform_state_before {
    aspect-ratio: 16 / 9;
    min-height: 430px;
}

.before_after_variant_split_feature .ba_transform_state {
    justify-content: center;
}

.before_after_variant_split_feature .ba_transform_state_before {
    background:
        radial-gradient(circle at 12% 12%, rgba(162, 89, 255, 0.18), transparent 32%),
        radial-gradient(circle at 84% 18%, rgba(245, 166, 35, 0.16), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 235, 244, 0.92));
}

.before_after_variant_split_feature .ba_transform_state_before::before,
.before_after_variant_split_feature .ba_transform_state_before::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-xl) - 1px);
    pointer-events: none;
}

.before_after_variant_split_feature .ba_transform_state_before::before {
    z-index: 1;
    background:
        linear-gradient(28deg, transparent 0 18%, rgba(245, 166, 35, 0.15) 18% 18.4%, transparent 18.4% 42%, rgba(162, 89, 255, 0.10) 42% 42.35%, transparent 42.35% 100%),
        linear-gradient(143deg, transparent 0 31%, rgba(162, 89, 255, 0.13) 31% 31.35%, transparent 31.35% 54%, rgba(245, 166, 35, 0.12) 54% 54.4%, transparent 54.4% 100%),
        linear-gradient(158deg, transparent 0 14%, rgba(10, 15, 44, 0.055) 14% 14.25%, transparent 14.25% 72%, rgba(245, 166, 35, 0.10) 72% 72.3%, transparent 72.3% 100%),
        linear-gradient(11deg, transparent 0 24%, rgba(162, 89, 255, 0.10) 24% 24.25%, transparent 24.25% 81%, rgba(10, 15, 44, 0.06) 81% 81.25%, transparent 81.25% 100%),
        linear-gradient(84deg, transparent 0 66%, rgba(10, 15, 44, 0.08) 66% 66.25%, transparent 66.25% 100%),
        repeating-linear-gradient(90deg, rgba(10, 15, 44, 0.035) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(10, 15, 44, 0.028) 0 1px, transparent 1px 38px);
    opacity: 0.72;
}

.before_after_variant_split_feature .ba_transform_state_before::after {
    content: "plugin notice\A unused script\A conflict detected\A template override\A deprecated setting\A render-blocking\A update failed\A admin clutter";
    z-index: 1;
    inset: 16px;
    background:
        radial-gradient(circle at 16% 22%, rgba(245, 166, 35, 0.18) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 34%, rgba(162, 89, 255, 0.15) 0 2px, transparent 3px),
        radial-gradient(circle at 66% 74%, rgba(10, 15, 44, 0.10) 0 2px, transparent 3px);
    border: 1px dashed rgba(10, 15, 44, 0.13);
    color: rgba(10, 15, 44, 0.16);
    font-family: var(--font-accent);
    font-size: clamp(0.65rem, 0.92vw, 0.82rem);
    font-weight: var(--weight-semi);
    letter-spacing: 0.16em;
    line-height: 2.85;
    padding: clamp(var(--space-4), 4vw, var(--space-8));
    text-shadow:
        34vw -5vh 0 rgba(10, 15, 44, 0.08),
        55vw 10vh 0 rgba(162, 89, 255, 0.07),
        47vw 31vh 0 rgba(245, 166, 35, 0.08),
        5vw 35vh 0 rgba(10, 15, 44, 0.07);
    text-transform: uppercase;
    white-space: pre-line;
    opacity: 0.52;
}

.before_after_variant_split_feature .ba_transform_state_after {
    background:
        radial-gradient(circle at 14% 18%, rgba(245, 166, 35, 0.18), transparent 30%),
        radial-gradient(circle at 92% 14%, rgba(108, 164, 255, 0.15), transparent 34%),
        linear-gradient(135deg, rgba(8, 12, 36, 0.96), rgba(10, 15, 44, 0.88));
}

.before_after_variant_split_feature .ba_transform_state_after::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-xl) - 1px);
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: 0.40;
    pointer-events: none;
    z-index: 1;
}

.before_after_variant_split_feature .ba_transform_state_after::after {
    content: "";
    position: absolute;
    inset: clamp(var(--space-5), 5vw, var(--space-12));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(90deg, transparent 0 49.8%, rgba(245, 166, 35, 0.18) 49.8% 50.2%, transparent 50.2% 100%),
        radial-gradient(circle at 50% 20%, rgba(245, 166, 35, 0.20) 0 3px, transparent 4px),
        radial-gradient(circle at 50% 50%, rgba(108, 164, 255, 0.22) 0 3px, transparent 4px),
        radial-gradient(circle at 50% 80%, rgba(162, 89, 255, 0.22) 0 3px, transparent 4px);
    opacity: 0.52;
    pointer-events: none;
    z-index: 1;
}

.before_after_variant_split_feature .ba_transform_content {
    justify-content: center;
    max-width: 680px;
    padding: clamp(var(--space-8), 5vw, var(--space-16));
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_content {
    align-items: center;
    color: var(--color-primary);
    justify-content: flex-start;
    max-width: none;
    text-align: center;
    transform: none;
    width: 100%;
}

.before_after_variant_split_feature .ba_transform_state_after .ba_transform_content {
    align-self: center;
    color: var(--color-text-inverse);
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 780px;
    text-align: center;
    width: min(100%, 780px);
}

.before_after_variant_split_feature .ba_transform_badge {
    width: fit-content;
    margin-bottom: var(--space-5);
    padding: 0.46rem 0.9rem;
    border: 1px solid rgba(162, 89, 255, 0.24);
    background:
        linear-gradient(135deg, rgba(162, 89, 255, 0.12), rgba(245, 166, 35, 0.08)),
        rgba(255, 255, 255, 0.78);
    color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(10, 15, 44, 0.08);
}

.before_after_variant_split_feature .ba_transform_state_after .ba_transform_badge {
    border-color: rgba(245, 166, 35, 0.32);
    background:
        linear-gradient(135deg, rgba(245, 166, 35, 0.18), rgba(162, 89, 255, 0.10)),
        rgba(10, 15, 44, 0.58);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 22px rgba(245, 166, 35, 0.12);
}

.before_after_variant_split_feature .ba_transform_title {
    max-width: 12ch;
    color: var(--color-primary);
    font-size: clamp(2.1rem, 3.2vw, 3.25rem);
    line-height: 1;
    letter-spacing: 0;
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_title {
    margin-left: auto;
    margin-right: auto;
}

.before_after_variant_split_feature .ba_transform_state_after .ba_transform_title {
    color: var(--color-text-inverse);
    margin-left: auto;
    margin-right: auto;
}

.before_after_variant_split_feature .ba_transform_text {
    max-width: 52ch;
    color: rgba(10, 15, 44, 0.72);
    font-size: clamp(1rem, 1.06vw, 1.12rem);
    line-height: 1.68;
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_text {
    margin-left: auto;
    margin-right: auto;
}

.before_after_variant_split_feature .ba_transform_state_after .ba_transform_text {
    color: rgba(255, 255, 255, 0.78);
    margin-left: auto;
    margin-right: auto;
}

.before_after_variant_split_feature .ba_transform_chips {
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chips {
    display: block;
    max-width: none;
    min-height: clamp(190px, 19vw, 250px);
    margin-top: auto;
    padding-top: var(--space-1);
    position: relative;
    width: 100%;
}

.before_after_variant_split_feature .ba_transform_state_after .ba_transform_chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 640px);
    gap: var(--space-3);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-5);
}

.before_after_variant_split_feature .ba_transform_chip {
    min-height: 38px;
    padding: 0.58rem 0.95rem;
    border: 1px solid rgba(162, 89, 255, 0.20);
    background:
        linear-gradient(135deg, rgba(162, 89, 255, 0.13), rgba(245, 166, 35, 0.08)),
        rgba(255, 255, 255, 0.82);
    color: var(--color-primary);
    font-weight: var(--weight-semi);
    box-shadow:
        0 10px 24px rgba(10, 15, 44, 0.10),
        0 0 18px rgba(162, 89, 255, 0.08) inset;
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip {
    min-height: 32px;
    margin: 0.22rem 0.18rem;
    padding: 0.44rem 0.68rem;
    border-color: rgba(245, 166, 35, 0.28);
    background:
        linear-gradient(135deg, rgba(245, 166, 35, 0.16), rgba(162, 89, 255, 0.08)),
        rgba(255, 255, 255, 0.76);
    color: rgba(10, 15, 44, 0.86);
    font-size: clamp(0.72rem, 0.95vw, 0.88rem);
    box-shadow:
        0 7px 18px rgba(10, 15, 44, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.58) inset;
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(6n + 1) {
    transform: translate(-4px, 8px) rotate(-4deg);
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(6n + 2) {
    margin-left: 1.4rem;
    transform: translate(8px, -7px) rotate(2.5deg);
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(6n + 3) {
    margin-right: 1.1rem;
    transform: translate(-10px, 14px) rotate(4deg);
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(6n + 4) {
    transform: translate(15px, 3px) rotate(-1.5deg);
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(6n + 5) {
    margin-left: 0.7rem;
    transform: translate(-7px, -10px) rotate(3deg);
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(6n) {
    margin-right: 1.3rem;
    transform: translate(11px, 12px) rotate(-2deg);
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(4n) {
    padding-left: 0.9rem;
    padding-right: 1.25rem;
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(5n) {
    max-width: 13rem;
}

.before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(7n) {
    border-style: dashed;
    color: rgba(10, 15, 44, 0.72);
}

@media (min-width: 769px) {

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip {
        position: absolute;
        margin: 0;
        white-space: nowrap;
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(1) {
        top: 8%;
        left: 4%;
        transform: rotate(-5deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(2) {
        top: 1%;
        left: 31%;
        transform: rotate(2deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(3) {
        top: 9%;
        left: 58%;
        transform: rotate(4deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(4) {
        top: 34%;
        left: 10%;
        transform: rotate(-1deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(5) {
        top: 22%;
        left: 45%;
        transform: rotate(-4deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(6) {
        top: 34%;
        left: 72%;
        transform: rotate(2deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(7) {
        top: 54%;
        left: 6%;
        transform: rotate(3deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(8) {
        top: 47%;
        left: 28%;
        transform: rotate(-3deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(9) {
        top: 52%;
        left: 55%;
        transform: rotate(2deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(10) {
        top: 43%;
        left: 79%;
        transform: rotate(-2deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(11) {
        top: 73%;
        left: 15%;
        transform: rotate(-4deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(12) {
        top: 69%;
        left: 42%;
        transform: rotate(3deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(13) {
        top: 70%;
        left: 70%;
        transform: rotate(-1deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(14) {
        top: 82%;
        left: 4%;
        transform: rotate(2deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(15) {
        top: 86%;
        left: 50%;
        transform: rotate(-3deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(16) {
        top: 6%;
        left: 78%;
        transform: rotate(-2deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(17) {
        top: 60%;
        left: 83%;
        transform: rotate(4deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(18) {
        top: 20%;
        left: 17%;
        transform: rotate(-3deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(19) {
        top: 84%;
        left: 27%;
        transform: rotate(2deg);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip:nth-child(20) {
        top: 25%;
        left: 66%;
        transform: rotate(-4deg);
    }
}

.before_after_variant_split_feature .ba_transform_state_after .ba_transform_chip {
    border-color: rgba(245, 166, 35, 0.24);
    background:
        linear-gradient(135deg, rgba(108, 164, 255, 0.20), rgba(245, 166, 35, 0.11)),
        rgba(255, 255, 255, 0.08);
    color: var(--color-text-inverse);
    justify-content: center;
    text-align: center;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        0 0 18px rgba(245, 166, 35, 0.08) inset;
}

.before_after_variant_split_feature .ba_transform_cue {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin: var(--space-6) auto 0;
    padding: 0.52rem 1rem;
    border: 1px solid rgba(212, 114, 255, 0.22);
    border-radius: var(--radius-full);
    background: rgba(10, 15, 44, 0.64);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 0 22px rgba(162, 89, 255, 0.12);
}

.before_after_variant_split_feature .ba_slider {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xl);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.34),
        0 0 54px rgba(162, 89, 255, 0.16);
}


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


@media (max-width: 768px) {

    .before_after {
        padding: var(--space-12) 0;
    }

    .ba_heading {
        font-size: var(--text-2xl);
    }

    .before_after_header {
        margin-bottom: var(--space-8);
    }

    .ba_transform_content {
        padding: var(--space-8) var(--space-6);
    }

    .ba_transform_title {
        font-size: var(--text-lg);
    }

    .before_after_variant_split_feature .before_after_header {
        margin-bottom: var(--space-16);
        padding: var(--space-16) var(--space-6) var(--space-8);
    }

    .before_after_variant_split_feature .ba_heading {
        max-width: 14ch;
        font-size: clamp(2.1rem, 8vw, 3rem);
    }

    .before_after_variant_split_feature .ba_intro {
        font-size: var(--text-base);
        line-height: 1.6;
    }

    .before_after_variant_split_feature .ba_stage::before {
        inset: -24px;
        border-radius: var(--radius-xl);
    }

    .before_after_variant_split_feature .ba_transform_state_before {
        aspect-ratio: auto;
        min-height: 520px;
    }

    .before_after_variant_split_feature .ba_transform_content {
        padding: var(--space-8) var(--space-6);
    }

    .before_after_variant_split_feature .ba_transform_title {
        max-width: 14ch;
        font-size: clamp(2rem, 7vw, 2.55rem);
    }

    .before_after_variant_split_feature .ba_transform_chips {
        justify-content: flex-start;
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        min-height: auto;
        margin-top: var(--space-5);
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip {
        position: static;
        margin: 0;
        white-space: normal;
    }

    .before_after_variant_split_feature .ba_transform_state_after .ba_transform_chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .before_after {
        padding: var(--space-10) 0;
    }

    .ba_heading {
        font-size: var(--text-xl);
    }

    .ba_slider {
        border-radius: var(--radius-md);
    }

    .ba_transform_content {
        padding: var(--space-6) var(--space-5);
    }

    .before_after_variant_split_feature .ba_eyebrow,
    .before_after_variant_split_feature .ba_transform_badge,
    .before_after_variant_split_feature .ba_transform_cue {
        font-size: 0.66rem;
        white-space: normal;
    }

    .before_after_variant_split_feature .ba_stage::before {
        inset: -16px;
        border-radius: var(--radius-lg);
    }

    .before_after_variant_split_feature .ba_transform {
        border-radius: var(--radius-lg);
    }

    .before_after_variant_split_feature .before_after_header {
        margin-bottom: var(--space-12);
        padding: var(--space-16) var(--space-5) var(--space-8);
    }

    .before_after_variant_split_feature .ba_transform_state_before {
        min-height: 560px;
    }

    .before_after_variant_split_feature .ba_transform_content {
        padding: var(--space-6) var(--space-5);
    }

    .before_after_variant_split_feature .ba_transform_title {
        font-size: clamp(1.85rem, 10vw, 2.3rem);
    }

    .before_after_variant_split_feature .ba_transform_text {
        font-size: var(--text-base);
        line-height: 1.6;
    }

    .before_after_variant_split_feature .ba_transform_chip {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_content {
        transform: none;
    }

    .before_after_variant_split_feature .ba_transform_state_before .ba_transform_chip {
        transform: none !important;
    }

    .before_after_variant_split_feature .ba_transform_state_after .ba_transform_chips {
        grid-template-columns: 1fr;
    }
}