/* ScrollTrigger must reset/restore scroll immediately when measuring the page.
   This controls programmatic scrolling; native wheel/touch input is unchanged. */
:root.bb-heading-page { scroll-behavior: auto; }

/* Readable, ordinary document flow is the default, including without JavaScript. */
.bb-scroll-heading {
    --bb-heading-gutter: clamp(var(--bb-gutter-mobile), 2.2vw, 32px);
    --bb-heading-size: clamp(80px, 16.6667vw, 240px);
    --bb-heading-space: var(--bb-space-section);
    color: var(--bb-color-ink);
    background-color: var(--bb-color-paper);
    scroll-margin-top: var(--header-height, 96px);
}

.bb-scroll-heading__viewport {
    padding-block: var(--bb-heading-space);
}

.bb-scroll-heading__window {
    padding-inline: var(--bb-heading-gutter);
    /* Room for the display face and its slight overshoot, without changing spacing. */
    padding-block: calc(var(--bb-heading-size) * 0.09);
    margin-block: calc(var(--bb-heading-size) * -0.09);
}

.bb-scroll-heading__title {
    margin: 0;
    padding: 0;
    color: var(--bb-color-pink);
    font-family: var(--bb-font-display);
    font-size: var(--bb-heading-size);
    font-weight: 400;
    line-height: 0.8;
    letter-spacing: -0.0125em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.bb-scroll-heading__track {
    display: block;
    position: relative;
}

.bb-heading-loading .bb-scroll-heading__window { visibility: hidden; }
.bb-heading-loading .bb-scroll-heading__window,
.bb-scroll-heading.is-enhanced .bb-scroll-heading__window { overflow: clip; }
.bb-heading-loading .bb-scroll-heading__track,
.bb-scroll-heading.is-enhanced .bb-scroll-heading__track {
    width: max-content;
    white-space: nowrap;
    overflow-wrap: normal;
}
.bb-heading-loading .bb-scroll-heading__word,
.bb-scroll-heading.is-enhanced .bb-scroll-heading__word { display: inline-block; }
.bb-scroll-heading.is-animating .bb-scroll-heading__track,
.bb-scroll-heading.is-animating .bb-scroll-heading__word { will-change: transform; }

.bb-scroll-heading__description {
    width: min(100% - 2 * var(--bb-heading-gutter), 660px);
    margin: 24px auto 0;
    font-family: var(--bb-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
}

.bb-scroll-heading__description p { margin: 0 0 1em; }
.bb-scroll-heading__description > :last-child { margin-bottom: 0; }
.bb-scroll-heading__description a { color: inherit; text-decoration: underline; }
.bb-scroll-heading__description a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 767px) {
    .bb-scroll-heading { --bb-heading-space: var(--bb-space-section-mobile); }
}

@media (prefers-reduced-motion: reduce) {
    .bb-scroll-heading.is-enhanced .bb-scroll-heading__window { overflow: visible; }
    .bb-scroll-heading.is-enhanced .bb-scroll-heading__track {
        width: auto;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .bb-scroll-heading.is-enhanced .bb-scroll-heading__word { display: inline; }
    .bb-scroll-heading__track,
    .bb-scroll-heading__word { transform: none !important; will-change: auto !important; }
}