/* =========================================================
   IDYLEASE SCROLL REVEAL MOTION
   Clean motion layer for existing rz-reveal hooks.
   This file controls movement only. It does not change layout.
   ========================================================= */

.rz-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition:
        opacity 1050ms cubic-bezier(.22,.61,.36,1),
        transform 1050ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}

.rz-rise {
    transform: translate3d(0, 42px, 0);
}

.rz-left {
    transform: translate3d(-44px, 0, 0);
}

.rz-right {
    transform: translate3d(44px, 0, 0);
}

.rz-soft.rz-rise {
    transform: translate3d(0, 32px, 0);
}

.rz-soft.rz-left {
    transform: translate3d(-4px, 0, 0);
}

.rz-soft.rz-right {
    transform: translate3d(34px, 0, 0);
}

/* The sections Richard identified need a more appreciable scroll entrance. */
.idy-intro-section .rz-reveal,
.idy-media-parallax .rz-reveal,
.idy-story-tonal.rz-reveal,
.idy-story-tonal .rz-reveal,
.idy-journal-archive .rz-reveal,
.idy-zampella-legacy .rz-reveal {
    transition-duration: 1250ms;
    transition-timing-function: cubic-bezier(.19,1,.22,1);
}

.idy-intro-section .rz-reveal.rz-rise,
.idy-media-parallax .rz-reveal.rz-rise,
.idy-story-tonal.rz-reveal.rz-rise,
.idy-story-tonal .rz-reveal.rz-rise,
.idy-journal-archive .rz-reveal.rz-rise,
.idy-zampella-legacy .rz-reveal.rz-rise {
    transform: translate3d(0, 64px, 0);
}

.idy-intro-section .rz-reveal.rz-left,
.idy-media-parallax .rz-reveal.rz-left,
.idy-story-tonal .rz-reveal.rz-left,
.idy-journal-archive .rz-reveal.rz-left,
.idy-zampella-legacy .rz-reveal.rz-left {
    transform: translate3d(-58px, 0, 0);
}

.idy-intro-section .rz-reveal.rz-right,
.idy-media-parallax .rz-reveal.rz-right,
.idy-story-tonal .rz-reveal.rz-right,
.idy-journal-archive .rz-reveal.rz-right,
.idy-zampella-legacy .rz-reveal.rz-right {
    transform: translate3d(58px, 0, 0);
}

.rz-reveal.rz-visible,
.idy-intro-section .rz-reveal.rz-visible,
.idy-media-parallax .rz-reveal.rz-visible,
.idy-story-tonal.rz-reveal.rz-visible,
.idy-story-tonal .rz-reveal.rz-visible,
.idy-journal-archive .rz-reveal.rz-visible,
.idy-zampella-legacy .rz-reveal.rz-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Keep joined editorial story panels moving as one plate, not as split-apart tiles. */
.idy-story-tonal.rz-reveal .idy-story-tile,
.idy-story-tonal.rz-reveal .idy-story-grid {
    transform: none;
}



/* Simple page contract:
   rz-load = first body row load fade only, no movement.
   rz-reveal = scroll reveal movement.
*/
.rz-load {
    opacity: 0;
    transform: none !important;
    transition: opacity 1050ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity;
}

.rz-load.rz-visible {
    opacity: 1;
    transform: none !important;
}


/* Left column inward scroll motion.
   Gentler easing: slower, softer pull toward the divider.
   Visible on load through the rz-load parent; no opacity hiding here.
*/
.rz-inward-left {
    opacity: 1;
    transform: translate3d(-24px, 0, 0);
    transition:
        transform 1450ms cubic-bezier(.16, 1, .3, 1),
        opacity 1250ms cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}

.rz-inward-left.rz-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* Right column inward scroll motion.
   Visible on load through the rz-load parent; no opacity hiding here.
   On scroll, rz-visible pulls the right-column image/copy left toward the divider.
*/
.rz-inward-right {
    opacity: 1;
    transform: translate3d(24px, 0, 0);
    transition:
        transform 1050ms cubic-bezier(.22,.61,.36,1),
        opacity 1050ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.rz-inward-right.rz-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Hero text remains its own soft rise, after the image/gradient load state. */
html.js .idy-subhero .idy-subhero__content {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 1050ms cubic-bezier(.22,.61,.36,1),
        transform 1050ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}

html.js .idy-subhero .idy-subhero__content.rz-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* The <img> remains for preload, dimensions, indexing, and fallback,
   but the wrapper background is the visible first-paint image. */
html.js .idy-subhero 

/* Hero text remains its own soft rise. */
html.js .idy-subhero .idy-subhero__content {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 1050ms cubic-bezier(.22,.61,.36,1),
        transform 1050ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}

html.js .idy-subhero .idy-subhero__content.rz-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* Subhero no-flash fade:
   Initial paint is white. The hero image layer and gradient overlay fade up together.
   No no-JS image fallback is allowed to appear before the fade. */
.idy-subhero {
    background: #fff;
}

.idy-subhero .rz-hero-image-load {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* These selectors deliberately do NOT depend on html.js.
   They must apply at first paint, before JS changes no-js to js. */
.idy-subhero .rz-hero-image-load,
.idy-subhero .idy-subhero__overlay {
    opacity: 0;
    visibility: visible;
    transition: opacity 950ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity;
}

.idy-subhero .rz-hero-image-load.rz-visible,
.idy-subhero .idy-subhero__overlay.rz-visible {
    opacity: 1;
}

/* The child image remains in the markup for preload/source integrity,
   but it is never allowed to appear as a separate first-paint layer. */
.idy-subhero .rz-hero-image-load img {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* Hero text remains its own soft rise. */
html.js .idy-subhero .idy-subhero__content {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 1050ms cubic-bezier(.22,.61,.36,1),
        transform 1050ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}

html.js .idy-subhero .idy-subhero__content.rz-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .rz-reveal,
    .rz-load,
    .rz-inward-left,
    .rz-inward-right,
    .rz-rise,
    .rz-left,
    .rz-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}