/* ==================================================================
   RS Motion — styles for the reusable motion components
   (companion of assets/js/rs-motion.js; see that file for usage)
   ------------------------------------------------------------------
   Everything here is transform/opacity only: no layout is affected,
   nothing paints outside its own compositor layer, and every effect
   is switched off under prefers-reduced-motion.
   ================================================================== */

/* ---------- 1. 3D abstract background host ---------- */
.rs-abstract {
    position: relative;
    isolation: isolate;           /* the canvas can't escape the host */
}

.rs-abstract__canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    z-index: -1;                  /* behind the host's own content */
    pointer-events: none;
}

/* ---------- 2. Pointer tilt ---------- */
.rs-tilt {
    will-change: transform;
}

/* ---------- 3. Scroll reveal (only when the JS is present) ---------- */
.rs-motion-js [data-rs-reveal] {
    opacity: 0;
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.rs-motion-js [data-rs-reveal="up"]    { transform: translate3d(0, 32px, 0); }
.rs-motion-js [data-rs-reveal="left"]  { transform: translate3d(-40px, 0, 0); }
.rs-motion-js [data-rs-reveal="right"] { transform: translate3d(40px, 0, 0); }
.rs-motion-js [data-rs-reveal="scale"] { transform: scale(.94); }
.rs-motion-js [data-rs-reveal].is-inview {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ---------- 4. Scroll parallax ---------- */
.rs-parallax { will-change: transform; }

/* ==================================================================
   HOMEPAGE HERO — #heroCarouselSection.rs-hero-motion
   ------------------------------------------------------------------
   · Static banner images stay in place as the no-WebGL / reduced-motion
     fallback and cross-fade out once the 3D scene has drawn its first frame.
   · Slide text + image get entrance/exit motion keyed off Bootstrap's own
     carousel classes (.active / .carousel-item-start / -end / -next / -prev).
   ================================================================== */
#heroCarouselSection.rs-abstract > .carousel {
    position: relative;
    z-index: 1;
}

#heroCarouselSection.rs-abstract .background-pattern {
    transition: opacity 1.2s ease;
}
#heroCarouselSection.rs-abstract--ready .carousel-item {
    background-color: transparent;
}
#heroCarouselSection.rs-abstract--ready .background-pattern {
    opacity: 0;
}

/* Entrance / exit of slide content.
   Driven by rs-motion.js ([data-rs-slides] on the carousel): it toggles
   .rs-in / .rs-out on each .carousel-item as Bootstrap moves the slides.
   Transitions (not filled keyframes) are used on purpose: a finished,
   filled compositor animation on the image column stopped painting on
   Chrome's GPU path, whereas transitions leave nothing behind.
   The slide that is active on page load keeps its image visible at once
   (.rs-initial) so the LCP image is never delayed. */
.rs-motion-js .rs-hero-motion .carousel-item .text-content > *,
.rs-motion-js .rs-hero-motion .carousel-item:not(.rs-initial) .image-container {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.rs-motion-js .rs-hero-motion .carousel-item .text-content > :nth-child(2) { transition-delay: .08s; }
.rs-motion-js .rs-hero-motion .carousel-item .text-content > :nth-child(3) { transition-delay: .16s; }
.rs-motion-js .rs-hero-motion .carousel-item:not(.rs-initial) .image-container {
    transform: translate3d(0, 24px, 0) scale(.97);
    transition-duration: .8s, .8s;
    transition-delay: .05s;
}
.rs-motion-js .rs-hero-motion .carousel-item.rs-in .text-content > *,
.rs-motion-js .rs-hero-motion .carousel-item.rs-in .image-container {
    opacity: 1;
    transform: none;
}
/* outgoing slide: quick lift-and-fade while Bootstrap slides it away */
.rs-motion-js .rs-hero-motion .carousel-item.rs-out .text-content > *,
.rs-motion-js .rs-hero-motion .carousel-item.rs-out .image-container {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
    transition-duration: .4s, .4s;
    transition-delay: 0s;
    transition-timing-function: ease-in, ease-in;
}

/* ---------- Reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
    .rs-motion-js [data-rs-reveal] { opacity: 1; transform: none; transition: none; }
    .rs-motion-js .rs-hero-motion .carousel-item .text-content > *,
    .rs-motion-js .rs-hero-motion .carousel-item .image-container { opacity: 1 !important; transform: none !important; transition: none !important; }
    .rs-tilt { transform: none !important; }
}