/* Pages are drawn as soon as they arrive: the opening of each page enters with a CSS animation
   that needs no script, and scroll-reveal.js only animates what lies further down. Only the
   homepage's content waits, behind its opening animation, until the script takes over. */
html.vz-intro-active[data-reveal-status="loading"] .vz-home {
    visibility: hidden;
}
@keyframes vzEnter {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}
html:not(.vz-intro-active) :is(
    .work-page > .work-heading,
    .services-hero > *, .levels-breadcrumb, .levels-hero > *, .about-hero > *,
    .contact-breadcrumb, .contact-hero > *,
    .case-breadcrumb, .case-hero > *, .proposal-hero > *,
    .vz-hero-copy > *, .vz-hero-visual
) {
    animation: vzEnter .8s ease both;
}
html:not(.vz-intro-active) :is(.services-hero, .levels-hero, .about-hero, .contact-hero, .case-hero, .proposal-hero, .vz-hero-copy) > :nth-child(2) { animation-delay: .08s; }
html:not(.vz-intro-active) :is(.services-hero, .levels-hero, .about-hero, .contact-hero, .case-hero, .proposal-hero, .vz-hero-copy) > :nth-child(3) { animation-delay: .16s; }
html:not(.vz-intro-active) :is(.services-hero, .levels-hero, .about-hero, .contact-hero, .case-hero, .proposal-hero, .vz-hero-copy) > :nth-child(n+4) { animation-delay: .24s; }
html:not(.vz-intro-active) .vz-hero-visual { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
    html :is(
        .work-page > .work-heading,
        .services-hero > *, .levels-breadcrumb, .levels-hero > *, .about-hero > *,
        .contact-breadcrumb, .contact-hero > *,
        .case-breadcrumb, .case-hero > *, .proposal-hero > *,
        .vz-hero-copy > *, .vz-hero-visual
    ) {
        animation: none;
    }
}

html:has(.inner-page) {
    scrollbar-width: thin;
    scrollbar-color: #141516 #141516;
}

html:has(.inner-page.is-scrolling) {
    scrollbar-color: #777876 #141516;
}

html:has(body.inner-page)::-webkit-scrollbar {
    width: 5px;
}

html:has(body.inner-page)::-webkit-scrollbar-track {
    background: #141516;
}

html:has(body.inner-page)::-webkit-scrollbar-thumb {
    background: #141516;
    border-radius: 999px;
}

html:has(body.inner-page.is-scrolling)::-webkit-scrollbar-thumb {
    background: #777876;
}

.scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.is-pending {
    opacity: 0;
    transform: translateY(40px);
    transition: none;
    pointer-events: none;
}
@media print {
    .scroll-reveal, .scroll-reveal.is-pending {
        opacity: 1;
        transform: none;
        transition: none;
        pointer-events: auto;
    }
}