/* BiggMind motion kit (docs/design/motion-plan.md §4, prototype docs/design/concepts/motion-hero.html).
   Start states apply only under html.js, without html.reduce-motion and with prefers-reduced-motion: no-preference,
   so no-JS, reduced-motion and a failed script all show the final state. Only transform / opacity / clip-path /
   stroke-dashoffset move; nothing changes layout. */
:root {
    --m-ease: cubic-bezier(.22, 1, .36, 1);
    --m-fast: 150ms;
    --m-base: 420ms;
    --m-slow: 720ms;
    --m-stagger: 70ms;
    --m-spring: cubic-bezier(.2, .8, .2, 1); /* hover / press answers: critically damped feel, no overshoot */
}

/* Hero title line mask (built by motion.js; padding keeps accents and descenders inside the mask). */
.m-line {
    display: block;
    overflow: hidden;
    padding: .1em 0 .12em;
    margin: -.1em 0 -.12em;
}
.m-line__inner {
    display: block;
}
/* Sibling lines: the two negative margins collapse to the larger one, so pull the next line up by both
   paddings; the split title keeps exactly the height of the plain one (no layout shift). */
.m-line + .m-line {
    margin-top: -.22em;
}
/* The container must not let the first/last line's negative margins collapse through it, otherwise the split
   title grows by both paddings (measured: +13px on the hero h1). */
:has(> .m-line) {
    display: flow-root;
}
/* Hero scene (motion.js hero()): the stack waits for the GSAP start states, the steps for their measured place
   (a step moving while visible would count as a layout shift). Final frame without JS / with reduced motion. */
html.js .bm-scene:not(.is-placed) .bm-scene__steps {
    visibility: hidden;
}

html.reduce-motion [data-motion],
html.reduce-motion [data-motion] * {
    transition: none !important;
}

@media (prefers-reduced-motion: no-preference) {
    /* ---- generic contract ---- */
    /* Delays are per property, so hover colour answers (border-color, color) are never held back by a stagger. */
    html.js:not(.reduce-motion) [data-motion="rise"],
    html.js:not(.reduce-motion) [data-motion="stagger"] > * {
        --m-d: var(--m-delay, 0ms);
        opacity: 0;
        transform: translateY(var(--m-rise, 12px));
        transition: opacity var(--m-slow) var(--m-ease) var(--m-d), transform var(--m-slow) var(--m-ease) var(--m-d),
            border-color var(--m-fast), color var(--m-fast);
    }
    html.js:not(.reduce-motion) [data-motion="stagger"] > * {
        --m-d: calc(var(--m-delay, 0ms) + var(--i, 0) * var(--m-stagger));
    }

    html.js:not(.reduce-motion) [data-motion="pop"] > * {
        opacity: 0;
        transform: scale(var(--m-pop, .6));
        transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease);
        transition-delay: calc(var(--m-delay, 0ms) + var(--i, 0) * var(--m-stagger));
    }
    html.js:not(.reduce-motion) [data-motion="pop"].is-inview > * {
        opacity: 1;
        transform: none;
    }

    html.js:not(.reduce-motion) [data-motion="tint"] {
        background: transparent;
    }
    html.js:not(.reduce-motion) [data-motion="tint"]::before {
        clip-path: inset(0 100% 0 0);
        transition: clip-path var(--m-slow) var(--m-ease) var(--m-delay, 0ms);
    }
    html.js:not(.reduce-motion) [data-motion="tint"][data-motion-from="right"]::before { clip-path: inset(0 0 0 100%); }
    html.js:not(.reduce-motion) [data-motion="tint"].is-inview::before { clip-path: inset(0 0 0 0); }

    html.js:not(.reduce-motion) [data-motion="line"] {
        --p: 0;
        transition: transform 120ms linear;
    }

    html.js:not(.reduce-motion) .m-tabs__bar {
        transition: transform 260ms var(--m-ease);
    }
    html.js:not(.reduce-motion) [data-motion="rise"].is-inview,
    html.js:not(.reduce-motion) [data-motion="stagger"].is-inview > * {
        opacity: 1;
        transform: none;
    }

    html.js:not(.reduce-motion) [data-motion="sweep"] {
        clip-path: inset(0 100% 0 0);
        transition: clip-path var(--m-slow) var(--m-ease) var(--m-delay, 0ms);
    }
    html.js:not(.reduce-motion) [data-motion="sweep"][data-motion-from="right"] { clip-path: inset(0 0 0 100%); }
    html.js:not(.reduce-motion) [data-motion="sweep"][data-motion-from="top"] { clip-path: inset(0 0 100% 0); }
    html.js:not(.reduce-motion) [data-motion="sweep"].is-inview { clip-path: inset(0 0 0 0); }

    html.js:not(.reduce-motion) [data-motion="draw"] :is(path, line, polyline, polygon, circle, ellipse, rect) {
        stroke-dasharray: var(--len, 120);
        stroke-dashoffset: var(--len, 120);
        transition: stroke-dashoffset 640ms var(--m-ease) calc(var(--m-delay, 0ms) + 180ms);
    }
    html.js:not(.reduce-motion) [data-motion="draw"].is-inview :is(path, line, polyline, polygon, circle, ellipse, rect) {
        stroke-dashoffset: 0;
    }

    html.js:not(.reduce-motion) [data-motion="mask"]:not(.is-split) { opacity: 0; }
    html.js:not(.reduce-motion) [data-motion="mask"] .m-line__inner,
    html.js:not(.reduce-motion) [data-motion="hero"] h1 .m-line__inner {
        transform: translateY(112%);
        transition: transform var(--m-slow) var(--m-ease);
        transition-delay: calc(var(--m-delay, 0ms) + var(--i, 0) * 90ms);
    }
    html.js:not(.reduce-motion) [data-motion="mask"].is-inview .m-line__inner,
    html.js:not(.reduce-motion) [data-motion="hero"].is-inview h1 .m-line__inner {
        transform: none;
    }

    html.js:not(.reduce-motion) [data-motion="fan"] > * {
        transform-origin: 50% 100%;
        transition: transform var(--m-slow) var(--m-ease);
        transition-delay: calc(var(--m-delay, 0ms) + var(--i, 0) * var(--m-stagger));
    }

    /* ---- hero (J5b): words / line mask, lead-in, actions (concept 7 times: 450 / 570ms, 750ms) ---- */
    html.js:not(.reduce-motion) [data-motion="hero"] h1:not(.is-split) { opacity: 0; }
    html.js:not(.reduce-motion) [data-motion="hero"] .bm-eyebrow,
    html.js:not(.reduce-motion) [data-motion="hero"] .bm-hero__lead,
    html.js:not(.reduce-motion) [data-motion="hero"] .bm-hero__actions {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 750ms var(--m-ease), transform 750ms var(--m-ease);
    }
    html.js:not(.reduce-motion) [data-motion="hero"] .bm-eyebrow { transform: none; }
    html.js:not(.reduce-motion) [data-motion="hero"].is-inview .bm-hero__lead { transition-delay: 450ms; }
    html.js:not(.reduce-motion) [data-motion="hero"].is-inview .bm-hero__actions { transition-delay: 570ms; }
    html.js:not(.reduce-motion) [data-motion="hero"].is-inview :is(.bm-eyebrow, .bm-hero__lead, .bm-hero__actions) {
        opacity: 1;
        transform: none;
    }
    html.js:not(.reduce-motion) .bm-scene:not(.is-armed) .bm-scene__stage {
        visibility: hidden;
    }
}

[data-motion="fan"] > * {
    --fan-at: calc(var(--i, 0) - (var(--n, 1) - 1) / 2);
}
/* settled fan: the hovered / focused child straightens and comes 14px forward (spring answer, no delay) */
[data-motion="fan"].is-done > *,
html:not(.js) [data-motion="fan"] > *,
html.reduce-motion [data-motion="fan"] > * {
    transition: transform var(--m-fast) var(--m-spring);
    transition-delay: 0ms;
}
[data-motion="fan"].is-inview > :is(:hover, :focus-visible),
html:not(.js) [data-motion="fan"] > :is(:hover, :focus-visible) {
    z-index: 5;
    transform: translateX(calc(var(--fan-at, 0) * var(--fan-gap, 100px))) translateY(-14px);
}

/* tint: the background lives on ::before (final state without motion: full) */
[data-motion="tint"] {
    position: relative;
    isolation: isolate;
}
[data-motion="tint"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--t, var(--bm-brand-tint));
    pointer-events: none;
}

/* line: a rail filled with scaleX(--p); --p is 1 without motion */
[data-motion="line"] {
    display: block;
    height: 100%;
    transform: scaleX(var(--p, 1));
    transform-origin: 0 50%;
}

/* tabs: sliding underline (1px wide, scaled to the active tab's width) */
.m-tabs {
    position: relative;
}
.m-tabs__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 2px;
    background: var(--bm-brand);
    transform-origin: 0 50%;
    pointer-events: none;
}
/* fan final state (also the no-JS / reduced-motion state once --i/--n are known) */
[data-motion="fan"].is-inview > *,
html:not(.js) [data-motion="fan"] > * {
    transform: translateX(calc(var(--fan-at, 0) * var(--fan-gap, 100px))) rotate(calc(var(--fan-at, 0) * var(--fan-step, 4deg)));
}

/* ================= Home moments M3-M8 (docs/design/motion-plan.md §3) ================= */
/* Rhythm per moment (stagger / start scale / rise distance) */
.bm-section-head,
.bm-cta__dots { --m-stagger: 60ms; }
.bm-progs,
.bm-cards { --m-stagger: 80ms; }
.bm-next-demo__date { --m-pop: .9; }
.bm-band__media { --m-rise: 14px; }

/* M4 three steps: rail along the cards' top edge (step 1 -> 3), number pill fills with the brand colour */
.bm-steps-wrap {
    position: relative;
}
.bm-steps__line {
    position: absolute;
    z-index: 1;
    top: -.5px;
    left: 43px; /* centre of the first number pill (28px padding + half pill) */
    right: calc((100% - 48px) / 3 - 43px);
    height: 2px;
    background: var(--bm-border);
    pointer-events: none;
}
.bm-steps__line i {
    background: var(--bm-brand);
}
.bm-step__n span {
    position: relative;
    isolation: isolate;
    color: #fff;
}
.bm-step__n span::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--bm-brand);
}
@media (max-width: 991.98px) {
    .bm-steps__line { display: none; }
}

/* M5 programme / feature cards: border in the card colour, icon 2px up, arrow 4px right (150ms spring) */
.bm-card,
.bm-prog {
    transition: border-color var(--m-fast);
}
.bm-card__icon,
.bm-prog__head .bm-band__icon,
.bm-card .bm-link .bm-icon,
.bm-prog .bm-link .bm-icon {
    transition: transform var(--m-fast) var(--m-spring);
}
.bm-card:hover .bm-card__icon,
.bm-prog:hover .bm-prog__head .bm-band__icon {
    transform: translateY(-2px);
}
.bm-card:hover .bm-link .bm-icon,
.bm-prog:hover .bm-link .bm-icon {
    transform: translateX(4px);
}

/* M7 booklet shelf (home benefits, printable-resources tab): real covers fanned -6/-2/2/6deg */
.bm-shelf {
    --fan-gap: 60%;
    --fan-step: 4deg;
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--bm-radius-device);
    background: var(--t, var(--bm-brand-tint));
}
.bm-shelf::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 12%;
    height: 1px;
    background: var(--bm-border);
}
.bm-shelf__cover {
    position: absolute;
    left: 35.5%;
    bottom: 12%;
    z-index: 1;
    width: 29%;
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: 6px;
    background: #fff;
    transform-origin: 50% 100%;
}
.bm-shelf__cover img {
    display: block;
    width: 100%;
    height: auto;
}
.bm-shelf__cover:focus-visible {
    outline: 3px solid var(--bm-brand);
    outline-offset: 2px;
}

/* M8 FAQ accordion: arrow turn and the open item's rule, 220ms (Bootstrap animates the height) */
.bm-accordion .accordion-item {
    transition: border-color 220ms var(--m-ease);
}
.bm-accordion .accordion-button::after {
    transition: transform 220ms var(--m-ease);
}
.bm-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-bottom-color: var(--bm-brand);
}
html.reduce-motion .bm-accordion .accordion-item,
html.reduce-motion .bm-accordion .accordion-button::after {
    transition: none;
}

/* M8 underline tab bars (.bm-tabbar on inner pages) take the sliding bar */
.bm-inner .bm-tabbar.m-tabs a[aria-current="true"] {
    border-bottom-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    html.js:not(.reduce-motion) [data-motion="draw"] .bm-step__n span {
        color: var(--bm-brand);
        transition: color var(--m-base) var(--m-ease) 120ms;
    }
    html.js:not(.reduce-motion) [data-motion="draw"] .bm-step__n span::before {
        clip-path: inset(0 50% 0 50% round 999px);
        transition: clip-path var(--m-base) var(--m-ease);
    }
    html.js:not(.reduce-motion) [data-motion="draw"].is-inview .bm-step__n span { color: #fff; }
    html.js:not(.reduce-motion) [data-motion="draw"].is-inview .bm-step__n span::before { clip-path: inset(0 0 0 0 round 999px); }
}