/* Presentation layer for the custom vanilla-JavaScript scroll engine. */
html {
    scroll-behavior: auto;
    scroll-padding-top: 110px;
}

html.js-scroll-effects {
    scroll-behavior: auto !important;
}

.scroll-progress-line {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100000;
    height: 3px;
    pointer-events: none;
    background: var(--e-global-color-primary, var(--site-primary));
    box-shadow: 0 0 14px color-mix(in srgb, var(--e-global-color-primary, var(--site-primary)) 45%, transparent);
    transform: scaleX(0);
    transform-origin: right center;
    will-change: transform;
}

.js-scroll-effects :is([data-reveal], .reveal, .scroll-reveal),
.js-scroll-effects .stagger-reveal-item {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity .7s ease, transform .85s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.js-scroll-effects :is([data-reveal], .reveal, .scroll-reveal).in,
.js-scroll-effects .stagger-reveal-item.in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-chapter-nav] .active,
.chapter-nav .active {
    color: var(--e-global-color-primary, var(--site-primary));
}

/* Hero entrance choreography and depth layers. */
[data-hero-parallax] {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

[data-hero-background] {
    --hero-bg-x: 0px;
    --hero-bg-y: 0px;
    will-change: background-position, transform;
}

[data-hero-background]:not([data-hero-background-pseudo]) {
    background-position: calc(50% + var(--hero-bg-x)) calc(50% + var(--hero-bg-y)) !important;
}

[data-hero-background-pseudo="before"]::before,
[data-hero-background-pseudo="after"]::after {
    will-change: transform, opacity;
    opacity: 0;
    transition: opacity 1s ease, transform .1s linear;
}

[data-hero-background-pseudo="before"]::before {
    transform: translate3d(var(--hero-bg-x), var(--hero-bg-y), 0) scale(1.06) !important;
}

[data-hero-background-pseudo="after"]::after {
    transform: translate3d(var(--hero-bg-x), var(--hero-bg-y), 0) scale(1.06) !important;
}

[data-hero-parallax].hero-background-ready [data-hero-background-pseudo="before"]::before,
[data-hero-parallax].hero-background-ready [data-hero-background-pseudo="after"]::after {
    opacity: 1;
}

.js-scroll-effects .hero-animate-item {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    filter: blur(7px);
    transition:
        opacity .75s ease var(--hero-delay, 0ms),
        transform .9s cubic-bezier(.16, 1, .3, 1) var(--hero-delay, 0ms),
        filter .8s ease var(--hero-delay, 0ms);
    will-change: opacity, transform, filter, translate;
}

.js-scroll-effects .hero-animate-item.hero-animate-image {
    transform: translate3d(-52px, 24px, 0) scale(.94) rotate(-1.4deg);
    filter: blur(5px) saturate(.75);
}

.js-scroll-effects .hero-animate-item.in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    filter: none;
}

[data-hero-image] {
    transform-origin: 50% 65%;
    will-change: translate, rotate, transform;
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-scroll-effects :is([data-reveal], .reveal, .scroll-reveal),
    .js-scroll-effects .stagger-reveal-item,
    .js-scroll-effects .hero-animate-item {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    [data-hero-background-pseudo="before"]::before,
    [data-hero-background-pseudo="after"]::after {
        opacity: 1;
        transform: none !important;
        transition: none;
    }
}