/* scroll-pin.css — paste into Avada → Global Options → Custom CSS */

/* Pinned sections get a clean stacking context for the pin-spacer. */
.scroll-pin { position: relative; }

/* GSAP wraps pinned elements in a .pin-spacer div and sets position:fixed + an
   explicit inline width (= the captured element width at pin time).
   For full-viewport sections that sit inside a max-width wrapper this captured
   width can be narrower than 100vw, breaking edge-to-edge backgrounds.
   Force 100vw and left:0 so the background always bleeds to the screen edges. */
@media (min-width: 1200px) {
  .pin-spacer > .scroll-pin {
    width:      100vw !important;
    max-width:  100vw !important;  /* GSAP sets max-width in px — override it */
    left:       0     !important;
    box-sizing: border-box;
  }
}

/* ─── Solutions section ─────────────────────────────────────────────────── */

/* Clip panels that start below the container edge. */
.solutions-panels-container {
  position: relative !important;
  overflow: hidden !important;
}

/* Inactive nav links are muted; .active link is full opacity. */
@media (min-width: 1200px) {
  .scroll-solutions .solutions-link {
    transition: opacity 0.3s ease;
  }
  .scroll-solutions .solutions-link.active {
    opacity: 1;
  }
}

/* Force the color_change title to its revealed (white) state.
   Avada's ST for this element is created after ours, so killing it in JS
   has a race condition. CSS !important overrides GSAP's inline style always. */
.scroll-solutions .awb-title__scroll-reveal--color_change .line {
  /* background-position: 0% 0% !important; */
}

/* ─── Generic stacking section ──────────────────────────────────────────── */

/* .stack-panels-container is added by JS to the panels' shared parent.
   Desktop-only: buildStack runs only on desktop, and gsap.matchMedia reverts
   the absolute panel positioning below the breakpoint, so on mobile the panels
   sit in normal flow and this clip must not apply. */
@media (min-width: 1200px) {
  .stack-panels-container {
    position: relative !important;
    overflow: hidden !important;
  }
}

/* ─── Side-scroll (horizontal) section ──────────────────────────────────── */

/* Clip the horizontal track so off-screen items stay hidden until they scroll in.
   Desktop-only: buildSideScroll runs only on desktop and gsap.matchMedia reverts the
   flex-row layout below the breakpoint, so on mobile items must flow normally. */
@media (min-width: 1200px) {
  .side-scroll-reveal {
    overflow: hidden !important;
  }
}

/* Safety net: if a user prefers reduced motion, never leave anything hidden.
   (JS also bails out entirely in this case, so this is belt-and-suspenders.) */
@media (prefers-reduced-motion: reduce) {
  .scroll-pin .scroll-reveal,
  .scroll-pin .fusion-layout-column {
    opacity: 1 !important;
    transform: none !important;
  }
}