/* =========================================================
   PARALLAX / SCROLL REVEAL SYSTEM
   ========================================================= */

/* Reveals start offset sideways; keep that from creating a horizontal scrollbar. */
html,
body {
    overflow-x: clip;
}

.parallax {
    --parallax-x: 0px;
    --parallax-y: 0px;
    --parallax-scale: 1;
    --parallax-rotate: 0deg;
    --parallax-duration: 900ms;
    --parallax-delay: 0ms;
    --parallax-ease: cubic-bezier(0.22, 1, 0.36, 1);

    opacity: 0;
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(var(--parallax-scale)) rotate(var(--parallax-rotate));
    transition: opacity var(--parallax-duration) var(--parallax-ease) var(--parallax-delay), transform var(--parallax-duration) var(--parallax-ease) var(--parallax-delay);
    will-change: transform, opacity;
}

/* ---------------------------------------------------------
   Visibility state
   --------------------------------------------------------- */

.parallax.is-visible {
    opacity: 1;
    --parallax-x: 0px;
    --parallax-y: 0px;
    --parallax-scale: 1;
    --parallax-rotate: 0deg;
}

/* ---------------------------------------------------------
   INTENSITY LEVELS
   --------------------------------------------------------- */

.parallax-1 {
    --parallax-y: 35px;
}

.parallax-2 {
    --parallax-y: 70px;
}

.parallax-3 {
    --parallax-y: 110px;
}

.parallax-4 {
    --parallax-y: 160px;
}

/* ---------------------------------------------------------
   DIRECTIONS
   --------------------------------------------------------- */

.parallax-left {
    --parallax-x: -100px;
}

.parallax-right {
    --parallax-x: 100px;
}

.parallax-up {
    --parallax-y: 100px;
}

.parallax-down {
    --parallax-y: -100px;
}

/* ---------------------------------------------------------
   SCALE / ZOOM
   --------------------------------------------------------- */

.parallax-zoom {
    --parallax-scale: 0.85;
}

.parallax-zoom-small {
    --parallax-scale: 0.95;
}

.parallax-zoom-large {
    --parallax-scale: 0.70;
}

/* ---------------------------------------------------------
   ROTATION
   --------------------------------------------------------- */

.parallax-rotate-left {
    --parallax-rotate: -8deg;
}

.parallax-rotate-right {
    --parallax-rotate: 8deg;
}

/* ---------------------------------------------------------
   FADE ONLY
   --------------------------------------------------------- */

.parallax-fade {
    transform: none;
}

/* ---------------------------------------------------------
   DELAYS
   --------------------------------------------------------- */

.parallax-delay-1 {
    --parallax-delay: 100ms;
}

.parallax-delay-2 {
    --parallax-delay: 200ms;
}

.parallax-delay-3 {
    --parallax-delay: 300ms;
}

.parallax-delay-4 {
    --parallax-delay: 400ms;
}

.parallax-delay-5 {
    --parallax-delay: 500ms;
}

/* ---------------------------------------------------------
   SPEED / DURATION
   --------------------------------------------------------- */

.parallax-fast {
    --parallax-duration: 500ms;
}

.parallax-slow {
    --parallax-duration: 1400ms;
}

.parallax-very-slow {
    --parallax-duration: 2000ms;
}

/* ---------------------------------------------------------
   CONTINUOUS SCROLL PARALLAX
   Used when .parallax-scroll is added.
   JavaScript updates --scroll-progress.
   --------------------------------------------------------- */

.parallax-scroll {
    --scroll-progress: 0;
    --scroll-distance: 80px;

    transform: translate3d(0, calc(var(--scroll-progress) * var(--scroll-distance)), 0) scale(var(--parallax-scale, 1));
    will-change: transform;
}

/* ---------------------------------------------------------
   DEPTH PRESETS  (use together with .parallax-scroll)
   Near layers move faster than the page, far layers slower, so
   neighbouring elements slide past each other as you scroll.
   Tip: put .parallax (the entrance) on a wrapper and
   .parallax-scroll (the depth drift) on the element inside it,
   because both use transform.
   --------------------------------------------------------- */

.depth-near     { --scroll-distance: 60px; }
.depth-mid      { --scroll-distance: 20px; }
.depth-far      { --scroll-distance: -60px; }
.depth-farthest { --scroll-distance: -110px; }

/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .parallax,
    .parallax-scroll {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}