/**
 * ZaazBuilder — Parallax Styles
 */

/* ─── Parallax section base ─── */
.zb-section[data-parallax="true"] {
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── Background video + parallax (translate on .zb-parallax-video-wrap) ─── */
.zb-parallax-video-wrap {
  position: absolute;
  top: -25%;
  left: 0;
  right: 0;
  bottom: -25%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

.zb-parallax-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── GPU-accelerated parallax layer (injected by JS) ─── */
.zb-parallax-layer {
  position: absolute;
  top: -30%;
  left: 0;
  right: 0;
  bottom: -30%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── Ensure section content sits above parallax layer ─── */
.zb-section[data-parallax="true"] > .zb-container {
  position: relative;
  z-index: 1;
}

.zb-section[data-parallax="true"] > .zb-section-overlay {
  z-index: 0;
}

/* ─── Mobile: disable parallax fixed attachment (iOS compat) ─── */
@media (max-width: 768px) {
  .zb-section[data-parallax="true"] {
    background-attachment: scroll !important;
  }

  .zb-parallax-layer,
  .zb-parallax-video-wrap {
    top: 0;
    bottom: 0;
    transform: none !important;
    will-change: auto;
  }
}

/* ─── Reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  .zb-section[data-parallax="true"] {
    background-attachment: scroll !important;
  }

  .zb-parallax-layer,
  .zb-parallax-video-wrap {
    transform: none !important;
    will-change: auto;
    top: 0;
    bottom: 0;
  }
}