/* =========================================================
   JOHN MULHOLLAND — REVEAL MOTION / NO DOM-LOAD SCROLL MOVEMENT

   - rz-load: longer fade-up on DOM load.
   - rz-reveal: hidden on load, but NO transition until first scroll.
   - First scroll adds html.rz-scroll-started, then reveal items animate.
   ========================================================= */

/* LOAD ITEMS: hero + bio/video */
html.js .rz-load {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 1500ms cubic-bezier(.22, .61, .36, 1),
        transform 1500ms cubic-bezier(.22, .61, .36, 1);
}

/* SCROLL ITEMS: hidden on DOM load, but no transition yet */
html.js .rz-reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition: none;
    pointer-events: none;
}

/* Direction: load + reveal */
html.js .rz-load.rz-rise,
html.js .rz-reveal.rz-rise {
    transform: translate3d(0, 30px, 0);
}

html.js .rz-load.rz-left,
html.js .rz-reveal.rz-left {
    transform: translate3d(34px, 0, 0);
}

html.js .rz-load.rz-right,
html.js .rz-reveal.rz-right {
    transform: translate3d(-34px, 0, 0);
}

/* Softer direction */
html.js .rz-load.rz-soft.rz-rise,
html.js .rz-reveal.rz-soft.rz-rise {
    transform: translate3d(0, 22px, 0);
}

html.js .rz-load.rz-soft.rz-right,
html.js .rz-reveal.rz-soft.rz-right {
    transform: translate3d(-26px, 0, 0);
}

html.js .rz-load.rz-soft.rz-left,
html.js .rz-reveal.rz-soft.rz-left {
    transform: translate3d(26px, 0, 0);
}

/* Only after first scroll do scroll reveal items get transition */
html.js.rz-scroll-started .rz-reveal {
    transition:
        opacity 950ms cubic-bezier(.22, .61, .36, 1),
        transform 950ms cubic-bezier(.22, .61, .36, 1);
}

html.js.rz-scroll-started .rz-reveal.rz-slow {
    transition-duration: 1250ms;
}

/* Visible state */
html.js .rz-load.rz-visible,
html.js.rz-scroll-started .rz-reveal.rz-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html.js .rz-load,
    html.js .rz-reveal,
    html.js .rz-rise,
    html.js .rz-left,
    html.js .rz-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: auto !important;
    }
}
/* ABOUT PAGE — MOBILE BIO/VIDEO MOTION CONTAINMENT */
@media (max-width: 767px) {

    html.js .aboutPage .aboutBioPanel.rz-load,
    html.js .aboutPage .aboutBioPanel.rz-reveal,
    html.js .aboutPage .aboutVideoPanel.rz-load,
    html.js .aboutPage .aboutVideoPanel.rz-reveal {
        transform: translate3d(0, 0, 0) !important;
    }
}