/*
 * Motion Module v2 — cinematic editorial.
 * Choreography: docs/motion-storyboard/MOTION-SYSTEM-V2.md
 * Editorial motion is progressive enhancement: no hidden/opacity:0 resting state,
 * except the hero and unrevealed content during .bh-motion-pending, which fades in on its own after 2.4s.
 */
:root {
    --bh-motion-ease: var(--bh-ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* ---------- Split typography ---------- */
bh-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
bh-char { display: inline-block; }
bh-word { display: inline-block; white-space: nowrap; }
/* Splitting never changes a container's own display; only the glyph boxes become inline-block. */
/* The clip box gets breathing room for glyph overshoot without changing the line box. */
.bh-split--rise { overflow: clip; padding-block: .08em; margin-block: -.08em; }

/* ---------- Hero ---------- */
.bh-hero__copy h1 > [data-motion="title"] { display: block; }
.bh-hero { overflow: clip; }
.bh-hero__lead-line { display: inline-block; }
/* Cinematic vignette; the shade itself is always present, only its edges deepen on load. */
.bh-hero__shade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 32% 46%, transparent 52%, rgba(8, 10, 12, .38) 100%);
    pointer-events: none;
}
/* Set by the inline head script only when motion will run; CSS releases it on its own. */
.bh-motion-pending .bh-hero__copy,
.bh-motion-pending .bh-hero__header,
.bh-motion-pending .bh-scroll-cue,
.bh-motion-pending :is(.bh-magazine, .article-shell main) [data-motion] {
    opacity: 0;
    animation: bh-pending-release 600ms ease-out 2.4s forwards;
}
/* Armed by bh-motion.js: waiting for its entrance. Removed in the same task that starts the
   animation, and by focus/anchor exposure, reduced-motion changes and print. */
.bh-motion-live .bh-armed { opacity: 0; }
@media print { .bh-armed { opacity: 1 !important; } }
@keyframes bh-pending-release { to { opacity: 1; } }
/* First paint already matches the title sequence's opening frame (bh-motion.js "settle"). */
.bh-motion-pending .bh-hero__image {
    scale: 1.09;
    animation: bh-pending-unscale 1600ms var(--bh-ease-expo) 2.4s forwards;
}
@media (max-width: 767px), (pointer: coarse) {
    .bh-motion-pending .bh-hero__image { scale: 1.05; }
}
@keyframes bh-pending-unscale { to { scale: 1; } }
.bh-motion-pending .bh-hero__shade::after {
    opacity: 0;
    animation: bh-pending-release 600ms ease-out 2.4s forwards;
}

@media (prefers-reduced-motion: no-preference) {
    html:not([data-editor-preview="true"]) .bh-scroll-cue.is-live > span {
        display: inline-block;
        animation: bh-cue-drift 2.8s var(--bh-ease-in-out, ease-in-out) infinite;
    }
}
@keyframes bh-cue-drift {
    0%, 100% { translate: 0 -3px; }
    50% { translate: 0 5px; }
}

/* ---------- Editorial rules and timelines ---------- */
[data-motion="line"] { transform-origin: left center; }
.date-divider > [data-motion="line"]:first-child { transform-origin: right center; }

[data-motion-timeline] > article {
    position: relative;
    transition: opacity 400ms ease;
}
[data-motion-timeline] > article::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--bh-accent, #a44b37);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms var(--bh-ease-in-out) var(--chapter-delay, 0ms), height 300ms ease;
}
[data-motion-timeline] > article:is(.is-in-view, .is-read)::after { transform: scaleX(1); }
[data-motion-timeline] > article > span { transition: color 300ms ease; }
[data-motion-timeline] > article.is-in-view > span { color: var(--bh-accent, #a44b37); }
/* The step at the reading line is current; earlier steps stay fully readable. */
.bh-motion-live [data-motion-timeline] > article.is-current::after { height: 4px; }
.bh-motion-live [data-motion-timeline] > article.is-current > span { color: var(--bh-accent-ink, #a8583d); }
.bh-motion-live [data-motion-timeline]:has(> .is-current) > article:not(.is-current, .is-read) { opacity: .78; }

.bh-about-brand__mark [data-motion="title"],
.bh-about-cta h2 [data-motion="title"] { display: block; }
.case-editorial .case-solution-table > article,
.pricing-fee-list > div,
.bh-about-proof__list > div { position: relative; }
.case-editorial .case-solution-table > article::after,
.pricing-fee-list > div::after,
.bh-about-proof__list > div::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--bh-accent, #a44b37);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1000ms var(--bh-ease-in-out);
}
.case-editorial .case-solution-table > article.is-in-view::after,
.pricing-fee-list > div.is-in-view::after,
.bh-about-proof__list > div.is-in-view::after { transform: scaleX(1); }

.bh-reading-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    background: var(--bh-accent, #a44b37);
    transform: scaleX(var(--reading-progress, 0));
    transform-origin: left;
    pointer-events: none;
    z-index: 100;
}

/* ---------- Magazine navigation: page progress + tuck while reading ---------- */
.bh-motion-live .bh-mag-nav {
    transition: transform 520ms var(--bh-ease-expo), box-shadow 300ms ease;
}
.bh-motion-live .bh-mag-nav.is-tucked {
    transform: translateY(calc(-100% - 2px));
}
.bh-nav-progress::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--bh-accent, #a44b37);
    transform: scaleX(var(--bh-page-progress, 0));
    transform-origin: left;
    pointer-events: none;
}

/* ---------- Links and actions ---------- */
.contact-method-card { transition: background-color 220ms ease, border-color 220ms ease, translate 420ms var(--bh-ease-expo); }
.contact-copy-button[data-copy-state="success"] { box-shadow: inset 0 -3px #538869; }
.contact-copy-button[data-copy-state="error"] { box-shadow: inset 0 -3px #ac4937; }
.bh-faq-directory summary i { transition: transform 280ms var(--bh-ease-spring); }
/* Native details remain the state owner, including Enter/Space and no-JS behavior. */
@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
    .bh-faq-directory details::details-content {
        interpolate-size: allow-keywords;
        block-size: 0;
        opacity: 0;
        overflow: clip;
        transition: block-size 320ms var(--bh-ease-out), opacity 220ms ease, content-visibility 320ms allow-discrete;
    }
    .bh-faq-directory details[open]::details-content { block-size: auto; opacity: 1; }
}
@media (max-width: 767px) {
    [data-motion-timeline] > article::after {
        inset: 0 auto 0 0;
        height: auto;
        width: 2px;
        transform: scaleY(0);
        transform-origin: top;
    }
    [data-motion-timeline] > article:is(.is-in-view, .is-read)::after { transform: scaleY(1); }
    .bh-motion-live [data-motion-timeline] > article.is-current::after { height: auto; width: 4px; }
}

.bh-mag-nav nav a,
.bh-footer a,
.case-editorial__related a {
    text-underline-offset: .3em;
    transition: color 180ms ease, text-underline-offset 180ms ease;
}
.bh-mag-nav nav a:is(:hover, :focus-visible),
.bh-footer a:is(:hover, :focus-visible),
.case-editorial__related a:is(:hover, :focus-visible) {
    text-underline-offset: .5em;
}
.case-related-arrow {
    display: inline-block;
    transition: translate 260ms var(--bh-ease-spring);
}
.case-editorial__related a:focus-visible .case-related-arrow { translate: 4px 0; }
.case-editorial__related a:focus-visible .case-related-arrow--previous { translate: -4px 0; }
.bh-services__grid > a {
    position: relative;
    transition: translate 420ms var(--bh-ease-expo), background-color 220ms ease, border-color 220ms ease;
}
.bh-services__grid > a:focus-visible { translate: 0 -6px; }

/* Hover/focus decoration — never in the editor preview, where pointer drags must not move elements. */
@media (prefers-reduced-motion: no-preference) {
    /* Arrow glyphs lean toward their destination. */
    :root:not([data-editor-preview="true"]) .bh-arrow-link::after { transition: translate 320ms var(--bh-ease-spring); }
    :root:not([data-editor-preview="true"]) .bh-arrow-link:is(:hover, :focus-visible)::after { translate: 2px -2px; }

    /* Text links draw an accent underline over their resting rule. */
    :root:not([data-editor-preview="true"]) :is(.bh-text-link, .bh-cta.bh-cta--text) {
        background-image: linear-gradient(var(--bh-accent-ink, #a8583d), var(--bh-accent-ink, #a8583d));
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0% 2px;
        transition: background-size 520ms var(--bh-ease-expo), color 180ms ease;
    }
    :root:not([data-editor-preview="true"]) :is(.bh-text-link, .bh-cta.bh-cta--text):is(:hover, :focus-visible) { background-size: 100% 2px; }

    /* Primary actions fill upward with the accent instead of switching colour at once. */
    :root:not([data-editor-preview="true"]) .bh-cta.bh-cta--primary:not(.bh-action--fill) {
        transition: background-color var(--bh-motion-fast) ease, border-color var(--bh-motion-fast) ease, color var(--bh-motion-fast) ease,
            transform var(--bh-motion-fast) ease, translate 600ms var(--bh-ease-spring), box-shadow 480ms var(--bh-ease-expo);
    }
    :root:not([data-editor-preview="true"]) .bh-cta.bh-cta--primary:not(.bh-action--fill):is(:hover, :focus-visible) {
        background-color: var(--bh-ink);
        box-shadow: inset 0 -6em 0 0 var(--bh-accent-ink, #a8583d);
    }
}

@media (hover: hover) and (pointer: fine) {
    .bh-services__grid > a:hover { translate: 0 -6px; }
    .case-editorial__related a:hover .case-related-arrow { translate: 4px 0; }
    .case-editorial__related a:hover .case-related-arrow--previous { translate: -4px 0; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    /* Service cards: an accent rule sweeps across the top edge. */
    :root:not([data-editor-preview="true"]) .bh-services__grid > a::before {
        content: "";
        position: absolute;
        inset: -1px 0 auto;
        height: 3px;
        background: var(--bh-accent, #a44b37);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 520ms var(--bh-ease-expo);
        pointer-events: none;
    }
    :root:not([data-editor-preview="true"]) .bh-services__grid > a:is(:hover, :focus-visible)::before { transform: scaleX(1); transform-origin: left; }
    :root:not([data-editor-preview="true"]) .bh-services__grid > a > span:first-child { display: inline-block; transition: translate 420ms var(--bh-ease-expo); }
    :root:not([data-editor-preview="true"]) .bh-services__grid > a:hover > span:first-child { translate: 6px 0; }

    :root:not([data-editor-preview="true"]) .pricing-card { transition: translate 420ms var(--bh-ease-expo), box-shadow 420ms ease; }
    :root:not([data-editor-preview="true"]) :is(.contact-method-card, .pricing-card):hover { translate: 0 -5px; }
    :root:not([data-editor-preview="true"]) .pricing-card:hover { box-shadow: 0 22px 50px rgba(23, 27, 32, .1); }

    :root:not([data-editor-preview="true"]) :is(.bh-about-life__gallery, .case-screen-gallery, .journal-list__visual, .article-related__grid) img {
        transition: scale 900ms var(--bh-ease-expo), transform var(--bh-motion-standard) ease;
    }
    :root:not([data-editor-preview="true"]) :is(.bh-about-life__gallery, .case-screen-gallery) figure:hover img { scale: 1.035; }
}

/* ---------- Pointer layer (JS adds these classes on fine pointers only) ---------- */
.bh-magnetic { transition-property: background-color, border-color, color, transform, translate, box-shadow; }
.bh-cta.bh-magnetic,
.bh-magnetic {
    transition-duration: var(--bh-motion-fast), var(--bh-motion-fast), var(--bh-motion-fast), var(--bh-motion-fast), 650ms, 480ms;
    transition-timing-function: ease, ease, ease, ease, var(--bh-ease-spring), var(--bh-ease-expo);
}
.bh-magnetic:hover { transition-duration: var(--bh-motion-fast), var(--bh-motion-fast), var(--bh-motion-fast), var(--bh-motion-fast), 160ms, 480ms; }

.bh-parallax img { scale: 1.08; }

.bh-tilt {
    position: relative;
    transition: transform 900ms var(--bh-ease-expo);
}
.bh-tilt:hover { transition-duration: 160ms; }
.bh-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at var(--bh-glare-x, 50%) var(--bh-glare-y, 50%), rgba(255, 255, 255, .26), transparent 58%);
    mix-blend-mode: soft-light;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}
.bh-tilt:hover .bh-glare { opacity: 1; }

.bh-cursor {
    position: fixed;
    z-index: 2147483000;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
}
.bh-cursor.is-visible { opacity: 1; }
.bh-cursor.is-hidden { opacity: 0; }
.bh-cursor::before {
    content: "";
    position: absolute;
    top: -9px;
    left: -9px;
    width: 18px;
    height: 18px;
    border: 1px solid #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
    transition: scale 420ms var(--bh-ease-expo), background-color 300ms ease, border-color 300ms ease;
}
.bh-cursor.is-link::before { scale: 2.3; background: rgba(255, 255, 255, .9); }
.bh-cursor.is-pressed::before { scale: .7; }
.bh-cursor.is-link.is-pressed::before { scale: 1.8; }
.bh-cursor__label {
    position: absolute;
    top: -46px;
    left: -46px;
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border-radius: 50%;
    background: var(--bh-accent-ink, #a8583d);
    color: #fff;
    font-family: var(--bh-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    scale: 0;
    transition: scale 520ms var(--bh-ease-expo);
}
.bh-cursor.is-label::before { scale: 0; }
.bh-cursor.is-label .bh-cursor__label { scale: 1; }

/* ---------- Project checkup ---------- */
.checkup-progress { position: relative; padding-bottom: 12px; }
.checkup-progress::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--bh-accent, #a44b37);
    transform: scaleX(var(--checkup-progress, 0));
    transform-origin: left;
    transition: transform 520ms var(--bh-ease-expo);
}
.checkup-fieldset[aria-invalid="true"] { outline: 1px solid #9b3026; outline-offset: 8px; }
.checkup-choice input:checked + label { box-shadow: inset 3px 0 var(--bh-accent, #a44b37); }
@media (prefers-reduced-motion: no-preference) {
    html:not([data-editor-preview="true"]) .checkup-choice label { transition: box-shadow 240ms ease, background-color 240ms ease; }
    html:not([data-editor-preview="true"]) .checkup-choice input:checked + label { animation: bh-choice-press 360ms var(--bh-ease-spring); }
}
@keyframes bh-choice-press {
    0% { scale: 1; }
    40% { scale: .97; }
    100% { scale: 1; }
}
.checkup-submit[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-inline-start: .7em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bh-submit-spin 800ms linear infinite;
}
@keyframes bh-submit-spin { to { rotate: 360deg; } }

/* ---------- Page transitions (cross-document View Transitions; ignored elsewhere) ---------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
.bh-hero__header .bh-wordmark,
.article-shell > .bh-mag-nav .bh-wordmark { view-transition-name: bh-wordmark; }
::view-transition-old(root) {
    animation: bh-page-leave 520ms var(--bh-ease-in-out) both;
}
::view-transition-new(root) {
    animation: bh-page-enter 900ms var(--bh-ease-expo) 120ms both;
}
::view-transition-group(bh-wordmark) { animation-duration: 700ms; animation-timing-function: var(--bh-ease-expo); }
@keyframes bh-page-leave {
    to { opacity: .35; scale: .97; translate: 0 -2vh; filter: brightness(.7); }
}
@keyframes bh-page-enter {
    from { clip-path: inset(100% 0 0 0); translate: 0 6vh; }
    to { clip-path: inset(0 0 0 0); translate: 0 0; }
}

/* ---------- Reduced motion and editor preview: no motion anywhere ---------- */
@media (prefers-reduced-motion: reduce) {
    html:root { scroll-behavior: auto !important; }
    [data-motion], [data-motion] > *, bh-char,
    .bh-services__grid > a, .case-related-arrow, .checkup-progress::after,
    .checkup-choice label, .checkup-submit::after, .bh-mag-nav {
        animation: none !important;
        transition: none !important;
        translate: none !important;
        scale: none !important;
        clip-path: none !important;
    }
    [data-motion-timeline] > article,
    [data-motion-timeline] > article::after,
    [data-motion-timeline] > article > span,
    .case-editorial .case-solution-table > article::after,
    .pricing-fee-list > div::after,
    .bh-about-proof__list > div::after,
    .bh-faq-directory summary i,
    .bh-faq-directory details::details-content { transition: none !important; }
    [data-motion-timeline] > article::after { transform: none; }
    .bh-motion-pending .bh-hero__copy,
    .bh-motion-pending .bh-hero__header,
    .bh-motion-pending .bh-scroll-cue,
    .bh-motion-pending [data-motion],
    .bh-motion-pending .bh-hero__shade::after,
    .bh-armed { opacity: 1; animation: none; }
    .bh-motion-pending .bh-hero__image { scale: none; animation: none; }
}
html[data-editor-preview="true"] .case-related-arrow,
html[data-editor-preview="true"] [data-motion],
html[data-editor-preview="true"] [data-motion] > * {
    animation: none !important;
    transition: none !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
}
html[data-editor-preview="true"]::view-transition-group(*),
html[data-editor-preview="true"]::view-transition-old(*),
html[data-editor-preview="true"]::view-transition-new(*) { animation: none !important; }