/**
 * Parallax Drift — CSS
 * Version: 1.1.0
 */

/* ── <img> wrapper ───────────────────────────────────────────────────────────
   JS creates this shell around <img> elements to clip the oversized inner div */

.parallax-drift-wrapper {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    line-height: 0; /* removes inline gap below <img> */
}

/* ── Inner element (the thing that moves) ────────────────────────────────── */

.parallax-drift-inner {
    will-change: transform;
    display: block;
}

/* Image variant — fills the wrapper */
.parallax-drift-inner--img {
    /* width/height/margin set dynamically by JS (oversize calc) */
}

.parallax-drift-inner--img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Background variant — absolutely positioned layer behind host's content.
   width/height/top/left are set dynamically by JS (oversize calc).        */
.parallax-drift-inner--bg {
    position: absolute;
    z-index: 0;
    /* background-image, size, position, repeat set by JS */
}

/* ── Ensure host div's direct children stay above the bg layer ────────────
   JS also sets position:relative + z-index:1 inline, but this provides
   a fallback for any child that receives neither.                         */
.parallax-drift > *:not(.parallax-drift-inner--bg),
.parallax-drift-slow > *:not(.parallax-drift-inner--bg),
.parallax-drift-strong > *:not(.parallax-drift-inner--bg),
.parallax-drift-reverse > *:not(.parallax-drift-inner--bg) {
    position: relative;
    z-index: 1;
}

/* ── Reduced-motion override ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .parallax-drift-inner {
        transform: none !important;
    }
}