/* ============================================================
   BEINC — 3D Brands Cube Section
   Two phases (non-sticky, anchor-driven cube travel):
     Phase 1 — Arc Services Strip
     Phase 2 — Paths Movement (Target sub + Facts sub)
   The cube canvas is sticky to the section so it stays in
   viewport while content scrolls; cube position/scale is
   driven by anchor getBoundingClientRect() reads.
   ============================================================ */


/* ── SECTION ROOT ───────────────────────────────────────────── */
/* No isolation/z-index here — we want children's z-indexes (cards
   z-index: 5) to compete directly with the fixed canvas (z-index: 3
   at document root). That way cards visually sit ABOVE the cube on
   mobile when they overlap. */
.bc-section {
    position: relative;
    background: var(--color-black2);
    color: var(--color-white);
    overflow: clip;
}

/* ── INNER WRAPPER ────────────────────────────────────────────
   Wraps all section content. Carries the curtain-parallax
   transform (set by brand-cube-section.js's update() during
   the curtain range only).

   z-index: 4 puts this wrapper's stacking context ABOVE the
   fixed cube canvas (z:3 at root), so cards/text/buttons inside
   the wrapper paint above the cube canvas — preserving the
   "cards above cube" design.

   No `will-change` and no default transform: this wrapper is
   424vh tall on mobile, and pre-allocating a compositor layer
   of that size (~4MB at typical mobile resolutions) caused iOS
   Safari to throttle scroll across the whole page from memory
   pressure. The JS only writes a transform when needed (during
   the curtain rise range) — outside that range no layer is
   allocated. */
/* No z-index by default → no stacking trap, children's z-indexes
   propagate to body and compete with .bc-canvas (z:2) at the root.

   During desktop parallax, .bc-content gets a `transform` (creating a
   stacking context). All its children get trapped inside that context
   for the duration of the parallax — meaning text/cards briefly stack
   below the cube during the curtain rise. We accept this trade-off
   because it preserves the back-layer dashed lines staying behind the
   cube (the user's primary requirement). The parallax window is short
   (1–2s) and our-story rises over the cube anyway during it. */
.bc-content {
    position: relative;
}

/* Pre-promote to its own compositor layer ONLY on desktop, where the JS-
   driven curtain parallax writes transform per frame. */
@media (min-width: 1024px) {
    .bc-content {
        will-change: transform;
    }
}


/* ── CUBE CANVAS ────────────────────────────────────────────── */
/* Fixed to viewport, sibling of .bc-section so it's always at viewport
   top regardless of scroll. z-index: 2 places it between the back layer
   (z:1 — arc, vline, target lines, dividers, "Our Services") and the
   front layer (z:5 — text columns, View Our Work, fact cards). */
.bc-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    z-index: 2;
    display: block;
    opacity: 0;
    transition: opacity 0.2s linear;
}
.bc-canvas.is-active {
    opacity: 1;
}


/* ──────────────────────────────────────────────────────────────
   PHASE 1 — Arc Services Strip
   ────────────────────────────────────────────────────────────── */
.bc-phase1 {
    position: relative;
    height: 100vh;
    height: 100lvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Arc strip — full-bleed, true curved band (annulus slice).
   The band shape, dashed borders, and text baseline are all drawn as
   SVG paths (computed by JS to match the SVG's actual pixel size, so
   the SVG never has to scale and text never deforms). */
.bc-arc {
    position: absolute;
    left: 50%;
    top: 50%;                /* .bc-arc TOP at viewport center
                                 → arc peak (SVG y=0) coincides with cube center */
    transform: translateX(-50%);
    width: 100vw;
    height: 28vh;
    pointer-events: none;
    z-index: 1;              /* below cube canvas */
    /* Edge fade applied to entire SVG (band + strokes + text fade together) */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.bc-arc__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Band fill — dark grey */
.bc-arc__band {
    fill: var(--color-black);    /* #262626 */
}

/* Top + bottom dashed strokes — match --guide-border style */
.bc-arc__border {
    fill: none;
    stroke: var(--color-grid);   /* #444 */
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.bc-arc__text {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(16px, 1.6vw, 26px);
    letter-spacing: var(--tracking-tight);
    fill: var(--color-white);
    /* Big gaps come from literal whitespace in the textPath
       (xml:space="preserve" on the <textPath> element). */
    white-space: pre;
}

/* "Our Services" CTA — z-index above the cube canvas. Vertical/horizontal
   placement of the Phase 1 CTA is JS-driven (config.ctaOffsetYVh / .ctaOffsetXVw). */
.bc-cta {
    position: relative;
    z-index: 5;              /* above cube canvas */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--color-white);
    color: var(--color-black2);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    border-radius: var(--radius);
    transition: opacity 0.2s var(--ease-gentle);
    cursor: pointer;
}
.bc-cta:hover { opacity: 0.88; }


/* Phase 1 anchor — invisible marker dead-center of viewport */
.bc-anchor {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}
.bc-anchor--phase1 {
    left: 50%;
    top: 50%;
}


/* ──────────────────────────────────────────────────────────────
   PHASE 2 — Paths Movement
   ────────────────────────────────────────────────────────────── */
.bc-phase2 {
    position: relative;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    /* No z-index — children's z-indexes propagate to bc-content's context
       so they can compete with .bc-canvas (z:2) directly. */
}

/* Vertical dashed line — spans entire Phase 2, fades at bottom.
   Positioned at the horizontal center of the middle column.
   Desktop: 50% (between col1 35% and col3 35%, center col is at 50%).
   Tablet: shifted right (col2 is at 70%-100%, center at 85%).
   Mobile: 50% (single col, centered). */
.bc-vline {
    position: absolute;
    top: var(--space-9);     /* starts a bit below phase2 top, above target row */
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: var(--guide-border);
    pointer-events: none;
    z-index: 1;              /* back layer — below cube canvas (z:2) */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 4%,
        #000 96%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 4%,
        #000 96%,
        transparent 100%
    );
}


/* ── TARGET SUBSECTION ─────────────────────────────────────── */
.bc-target {
    position: relative;
    min-height: 60vh;
    min-height: 60lvh;
    display: grid;
    grid-template-columns: minmax(0, 35%) minmax(0, 30%) minmax(0, 35%);
    align-items: center;
}

.bc-target__col {
    position: relative;
    z-index: 5;              /* text always above cube canvas */
}

.bc-target__col--why {
    text-align: right;
    padding-right: var(--space-9);
}
.bc-target__col--perception {
    text-align: left;
    padding-left: var(--space-9);
}

.bc-target__col--circle {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;              /* back layer — circle + hline are dashed lines, behind cube */
}

/* Why we exist + Perception text */
.bc-h-md {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-white);
    font-size: clamp(28px, 2.6vw, 40px);
    margin: 0 0 var(--space-5);
}
.bc-h-sm {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-white);
    font-size: clamp(22px, 1.9vw, 30px);
    margin: 0 0 var(--space-5);
}
.bc-body-xs {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
    color: var(--color-white);
    margin: 0;
    max-width: 32ch;
}
.bc-target__col--why .bc-body-xs   { margin-left: auto; }
.bc-target__col--perception .bc-body-xs { margin-right: auto; }

/* CTA inside col3 (View Our Work) */
.bc-cta--inline {
    position: relative;
    margin-top: var(--space-5);
}


/* ── DASHED CIRCLE + HORIZONTAL LINE (the "stack") ─────────── */
.bc-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* .bc-circle / .bc-hline width + height set via JS (config.circleVh / .hlineVh per breakpoint). */
.bc-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    border: var(--guide-border);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}

.bc-hline {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 0;
    border-bottom: var(--guide-border);
    transform: translate(-50%, -50%);
    will-change: transform;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 14%,
        #000 86%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 14%,
        #000 86%,
        transparent 100%
    );
}

/* The vertical-line top overshoots above the circle, matching
   the horizontal line's overshoot. Achieved by positioning the
   vline's top to start above the target subsection. */
.bc-target__circle-anchor {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
}


/* ── FACTS SUBSECTION ─────────────────────────────────────── */
/* Desktop: 3-col grid, 5 rows (3 card rows + 2 divider rows interleaved).
   Source order: 3 left cards, 3 right cards, 2 dividers. We assign each
   to its correct grid cell explicitly. */
.bc-facts {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 35%) minmax(0, 30%) minmax(0, 35%);
    grid-template-rows: auto auto auto auto auto;
    column-gap: 0;
    row-gap: 0;
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
}

/* Left-column cards: rows 1, 3, 5 of grid (visual rows 1/2/3 with dividers between) */
.bc-card-slot[data-side="left"][data-row="1"]  { grid-column: 1; grid-row: 1; }
.bc-card-slot[data-side="left"][data-row="2"]  { grid-column: 1; grid-row: 3; }
.bc-card-slot[data-side="left"][data-row="3"]  { grid-column: 1; grid-row: 5; }

/* Right-column cards: rows 1, 3, 5 */
.bc-card-slot[data-side="right"][data-row="1"] { grid-column: 3; grid-row: 1; }
.bc-card-slot[data-side="right"][data-row="2"] { grid-column: 3; grid-row: 3; }
.bc-card-slot[data-side="right"][data-row="3"] { grid-column: 3; grid-row: 5; }

/* Dividers: rows 2, 4 — full bleed (escape padding) */
.bc-facts__divider {
    grid-column: 1 / -1;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    height: 0;
    border-bottom: var(--guide-border);
    pointer-events: none;
    z-index: 1;              /* back layer — row dividers between cards */
}
.bc-facts__divider--1 { grid-row: 2; }
.bc-facts__divider--2 { grid-row: 4; }

/* Card slot wrappers (so cards can shrink to one side without
   affecting their grid cell). No z-index — slot must NOT create a
   stacking context so its ::after pseudo (the row-divider dashed line)
   can escape to bc-content's context at z:1 (back layer). The card
   itself has explicit z:5 (front layer). */
.bc-card-slot {
    position: relative;
    padding: var(--space-7) 0;
    display: flex;
    min-width: 0;            /* don't let card content force grid wider */
}
.bc-card-slot[data-side="left"]  { justify-content: flex-start; }
.bc-card-slot[data-side="right"] { justify-content: flex-end; }


/* ── FACT CARD ─────────────────────────────────────────────── */
.bc-card {
    position: relative;
    z-index: 5;              /* front layer — above cube canvas (z:2) */
    background: var(--color-black);
    border: 1px dashed var(--color-grid);
    border-radius: var(--radius);
    padding: 20px;
    width: 100%;
    max-width: 100%;
    color: var(--color-white);
    will-change: width;
    transition: none;        /* JS controls width per-frame */
    box-sizing: border-box;
}

.bc-card__row {
    display: flex;
    align-items: center;
}
.bc-card__row--top {
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: var(--guide-border);
}
.bc-card__row--bot {
    justify-content: flex-end;
    padding-top: 14px;
}

.bc-card__num {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-size: clamp(40px, 4.4vw, 57px);
    color: var(--color-white);
}
.bc-card__label {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-size: clamp(20px, 2.2vw, 30px);
    color: var(--color-white);
}
.bc-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    color: var(--color-white);
    text-align: right;
    margin: 0;
}


/* ── TRAVERSAL + PAD-BOTTOM — now zero-height; section's bottom
       and the cube's unstick point are controlled by JS-driven
       config.sectionEndYVh + config.endPaddingVh on .bc-section. */
.bc-traversal { height: 0; }
.bc-pad-bottom { height: 0; }


/* ──────────────────────────────────────────────────────────────
   TABLET (768 – 1023px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bc-arc {
        height: 22vh;
    }

    /* Target: 2-col, content left + circle right */
    .bc-target {
        grid-template-columns: minmax(0, 70%) minmax(0, 30%);
        min-height: 70vh;
    }
    .bc-target__col--why,
    .bc-target__col--perception {
        text-align: left;
        padding: 0;
        grid-column: 1;
    }
    .bc-target__col--why        { grid-row: 1; align-self: end; padding-bottom: var(--space-6); }
    .bc-target__col--perception { grid-row: 2; align-self: start; padding-top: var(--space-6); }
    .bc-target__col--circle     { grid-row: 1 / span 2; grid-column: 2; }

    .bc-target__col--why .bc-body-xs        { margin-left: 0; }
    .bc-target__col--perception .bc-body-xs { margin-right: 0; }

    /* Facts on tablet: 1-col stack, source order is the desired stack order. */
    .bc-facts {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }
    .bc-card-slot,
    .bc-card-slot[data-side="left"][data-row="1"],
    .bc-card-slot[data-side="left"][data-row="2"],
    .bc-card-slot[data-side="left"][data-row="3"],
    .bc-card-slot[data-side="right"][data-row="1"],
    .bc-card-slot[data-side="right"][data-row="2"],
    .bc-card-slot[data-side="right"][data-row="3"] {
        grid-column: auto;
        grid-row: auto;
        justify-content: flex-start;   /* tablet: cards anchor left, shrink right */
        max-width: 70%;                /* col1 occupies 70% of the section */
    }
    .bc-facts__divider {
        display: none;                 /* explicit dividers unused; ::after on slot draws them */
    }

    /* Tablet/mobile: each card-slot draws its own bottom divider (full-bleed).
       Slot is left-anchored at phase2's padding (var(--pad-x) = 4vw on tablet/mobile),
       so to reach viewport edge we offset by -4vw. */
    .bc-card-slot::after {
        content: "";
        position: absolute;
        left: -4vw;
        bottom: 0;
        width: 100vw;
        height: 0;
        border-bottom: var(--guide-border);
        pointer-events: none;
        z-index: 1;          /* back layer — below cube canvas (z:2) */
    }
    .bc-card-slot:last-of-type::after {
        display: none;                 /* no divider after last card */
    }

    /* Vline shifts to center of right column (col2 = 70%–100%, center = 85%).
       Bottom raised by half the parked cube height so vline's bottom edge
       aligns with the cube's vertical center when the cube sits on the
       section's bottom edge. Cube target size on tablet = 0.155 * vh →
       half = 0.0775 vh → 7.75vh ≈ 8vh. */
    .bc-vline {
        left: 85%;
        bottom: 8vh;
    }
}


/* ──────────────────────────────────────────────────────────────
   MOBILE (≤ 767px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Phase 1 shorter on mobile */
    .bc-phase1 {
        height: 60vh;
        height: 60lvh;
    }
    .bc-arc {
        height: 18vh;
    }
    .bc-cta {
        margin-top: 11vh;
    }

    /* Phase 2 — single column, everything stacks vertically.
       Order: target circle row → why-we-exist row → perception row → 6 cards → traversal. */
    .bc-target {
        display: block;
        min-height: auto;
        padding-top: var(--space-9);
    }

    /* Target circle column — first in source, becomes "row 1" */
    .bc-target__col--circle {
        display: flex;
        height: 60vh;
        height: 60lvh;
        order: 1;
    }
    .bc-target__col--why {
        order: 2;
        text-align: center;
        padding: var(--space-8) var(--space-5);
        margin-top: var(--space-5);
        background: var(--color-black2);
        position: relative;
        z-index: 5;
        /* Override tablet's align-self: end — on mobile's flex column the
           cross-axis is horizontal, so we want full width (stretch). */
        align-self: stretch;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 40px,
            #000 calc(100% - 40px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 40px,
            #000 calc(100% - 40px),
            transparent 100%
        );
    }
    .bc-target__col--perception {
        order: 3;
        text-align: center;
        padding: var(--space-8) var(--space-5);
        margin-top: var(--space-5);
        margin-bottom: var(--space-5);
        background: var(--color-black2);
        position: relative;
        z-index: 5;
        /* Override tablet's align-self: start — same reasoning as --why above. */
        align-self: stretch;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 40px,
            #000 calc(100% - 40px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 40px,
            #000 calc(100% - 40px),
            transparent 100%
        );
    }
    .bc-target__col--why .bc-body-xs,
    .bc-target__col--perception .bc-body-xs {
        margin-left: auto;
        margin-right: auto;
    }

    /* Source order remains [why, circle, perception]; flex `order`
       puts circle first visually. Use flex container. */
    .bc-target {
        display: flex;
        flex-direction: column;
    }

    /* Circle/hline sizes driven by JS — see config.circleVh / .hlineVh */

    /* Facts: single column, full-bleed dividers between rows */
    .bc-facts {
        display: flex;
        flex-direction: column;
        padding-top: var(--space-7);
        padding-bottom: 0;
    }
    .bc-card-slot {
        justify-content: center;     /* mobile: cards centered, expand to full at viewport center */
        padding: var(--space-7) 0;
    }
    .bc-facts__divider {
        margin-left: 50%;
    }

    /* Traversal not used — section height is JS-driven now */
    .bc-traversal { height: 0; }

    /* On mobile the cube canvas is BEHIND the text rows + cards (z 3 vs 5),
       which we already established. No change needed here. */

    /* Card text sizes — mobile-specific */
    .bc-card__num   { font-size: 44px; }
    .bc-card__label { font-size: 22px; }
    .bc-card__desc  { font-size: 12px; }

    /* Mobile vline back to centered (single column) — overrides tablet rule.
       Bottom raised by half the parked cube height so vline's bottom edge
       aligns with the cube's vertical center when the cube sits on the
       section's bottom edge. Cube target on mobile = 0.16 * vh → half = 8vh. */
    .bc-vline {
        left: 50%;
        bottom: 8vh;
    }

    /* Mobile cards: centered horizontally, max-width controlled by JS shrink/expand */
    .bc-card-slot,
    .bc-card-slot[data-side="left"][data-row="1"],
    .bc-card-slot[data-side="left"][data-row="2"],
    .bc-card-slot[data-side="left"][data-row="3"],
    .bc-card-slot[data-side="right"][data-row="1"],
    .bc-card-slot[data-side="right"][data-row="2"],
    .bc-card-slot[data-side="right"][data-row="3"] {
        justify-content: center;
        max-width: 100%;
    }



    /* ─────────────────────────────────────────────────────────
       MOBILE — VLINE SPANS THE FULL SECTION
       The vline is positioned absolute inside .bc-phase2, so it can only
       reach the bottom of phase2. The section's min-height is JS-driven
       (sectionEndYVh * vh) and on mobile that's larger than phase2's
       natural content height, so a gap appeared at the section bottom.

       Solution: make .bc-content (the wrapper around phase1/phase2) a
       flex column that fills the section, so phase2 grows to fill the
       remaining space after phase1. The vline (bottom: 8vh of phase2)
       then reaches up to 8vh above the section's true bottom — which
       is exactly where the parked cube's vertical center sits (cube
       target height is 16vh on mobile, so center is 8vh above section
       bottom on Leg D).
       ───────────────────────────────────────────────────────── */
    .bc-section {
        display: flex;
        flex-direction: column;
    }
    .bc-content {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    .bc-phase1 { flex-shrink: 0; }       /* keep at its fixed 60vh */
    .bc-phase2 { flex: 1 0 auto; }       /* grow to fill remaining space */
}


/* ──────────────────────────────────────────────────────────────
   TEXT REVEALS (cross-breakpoint)
   Block-level only — no line / letter splitting.

   These rules use SEMANTIC SELECTORS (.bc-h-md, .bc-card__num, …)
   so the hidden state is applied at first paint, BEFORE any JS
   runs. That avoids the classic "tag with JS" flicker where the
   element is briefly visible at opacity 1 before the class lands.

   JS only needs to add .is-in (per-element via IntersectionObserver)
   to flip each item into view. Card numbers ALSO get a scramble
   effect on top of the fade via RandomTextScramble.scramble.
   ────────────────────────────────────────────────────────────── */

/* Headings, body copy, card label/description, inline CTAs:
   fade up (translateY + opacity). */
.bc-section .bc-h-md,
.bc-section .bc-h-sm,
.bc-section .bc-body-xs,
.bc-section .bc-card__label,
.bc-section .bc-card__desc,
.bc-section .bc-cta--inline {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--bc-text-delay, 0s);
    will-change: transform, opacity;
}

/* Phase 1 CTA "Our Services" + card numbers — opacity ONLY.
   Their transform is owned by JS (applyCta) or by inline updates from
   the scramble utility, so a CSS transform here would conflict. */
.bc-section .bc-phase1 > .bc-cta,
.bc-section .bc-card__num {
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--bc-text-delay, 0s);
    will-change: opacity;
}

/* Revealed state — JS adds .is-in via IO. Combined with the rules
   above, this transitions opacity (and transform where applicable). */
.bc-section .bc-h-md.is-in,
.bc-section .bc-h-sm.is-in,
.bc-section .bc-body-xs.is-in,
.bc-section .bc-card__label.is-in,
.bc-section .bc-card__desc.is-in,
.bc-section .bc-cta--inline.is-in,
.bc-section .bc-phase1 > .bc-cta.is-in,
.bc-section .bc-card__num.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bc-section .bc-h-md,
    .bc-section .bc-h-sm,
    .bc-section .bc-body-xs,
    .bc-section .bc-card__label,
    .bc-section .bc-card__desc,
    .bc-section .bc-cta--inline,
    .bc-section .bc-phase1 > .bc-cta,
    .bc-section .bc-card__num {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}