/* ================================
   SPLIT TEXT REVEAL (slide up)
=================================== */
.lenis {
  /* required for Lenis to allow scrolling while it controls the scroll container */
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.split-text-reveal-up .line {
  overflow: hidden;
}
.text-reveal-line-wrapper {
  overflow: hidden;
}

/* ================================
   SPLIT TEXT – CHAR FADE X
   Add class "split-text-char-fade" to any text widget
   Customize via --char-* CSS variables
=================================== */
.split-text-char-fade {
  --char-offset-x: 30px; /* positive = fade in from right */
  --char-offset-y: 0px;
  --char-stagger: 0.05s;
  --char-duration: 1.5s;
  --char-opacity-start: 0;
  --char-ease: power2.out;
}

/* Vertical variant - add class "split-text-char-fade-y" */
.split-text-char-fade-y {
  --char-offset-x: 0px;
  --char-offset-y: 30px; /* positive = fade in from below */
  --char-stagger: 0.05s;
  --char-duration: 1.5s;
  --char-opacity-start: 0;
  --char-ease: power2.out;
}

/* Scroll-scrubbed horizontal variant - add class "split-text-char-fade-scroll" */
.split-text-char-fade-scroll {
  --char-offset-x: 30px; /* positive = fade in from right */
  --char-offset-y: 0px;
  --char-stagger: 0.05s;
  --char-duration: 1.5s;
  --char-opacity-start: 0;
  --char-ease: power2.out;
  --char-scroll-start: top 85%;
  --char-scroll-end: top 40%;
}

/* Scroll-scrubbed vertical variant - add class "split-text-char-fade-y-scroll" */
.split-text-char-fade-y-scroll {
  --char-offset-x: 0px;
  --char-offset-y: 30px; /* positive = fade in from below */
  --char-stagger: 0.05s;
  --char-duration: 1.5s;
  --char-opacity-start: 0;
  --char-ease: power2.out;
  --char-scroll-start: top 85%;
  --char-scroll-end: top 40%;
}

/* Keep char splits from collapsing spaces while animating (live site only) */
/* Preserve spacing for SplitType spans */
.char {
  display: inline-block;
  white-space: pre;
  line-height: inherit;
}
.word {
  display: inline-block;
  white-space: normal;
  line-height: inherit;
  margin-right: 0;
}
.whitespace {
  display: inline;
  white-space: pre;
  line-height: inherit;
  font-size: inherit;
}

/* Prevent mid-word breaks for char splits */
.split-text-char-fade,
.split-text-char-fade-y,
.split-text-char-fade-scroll,
.split-text-char-fade-y-scroll,
.split-text-char-fade-y-blur,
.split-text-char-fade-y-blur-scroll {
  word-break: keep-all;
  overflow-wrap: normal;
}

.split-text-char-fade,
.split-text-char-fade-y,
.split-text-char-fade-scroll,
.split-text-char-fade-y-scroll,
.split-text-char-fade-y-blur,
.split-text-char-fade-y-blur-scroll,
.split-text-word-fade,
.split-text-word-fade-y,
.split-text-word-fade-scroll,
.split-text-word-fade-y-scroll,
.split-text-word-fade-y-blur,
.split-text-word-fade-y-blur-scroll {
  position: relative;
  z-index: 1;
}

.split-text-char-fade .word,
.split-text-char-fade-y .word,
.split-text-char-fade-scroll .word,
.split-text-char-fade-y-scroll .word,
.split-text-char-fade-y-blur .word,
.split-text-char-fade-y-blur-scroll .word {
  display: inline-block;
  white-space: normal;
}

.split-text-char-fade .whitespace,
.split-text-char-fade-y .whitespace,
.split-text-char-fade-scroll .whitespace,
.split-text-char-fade-y-scroll .whitespace,
.split-text-char-fade-y-blur .whitespace,
.split-text-char-fade-y-blur-scroll .whitespace {
  display: inline-block;
  white-space: pre;
}
.split-text-word-fade,
.split-text-word-fade-y,
.split-text-word-fade-scroll,
.split-text-word-fade-y-scroll,
.split-text-word-fade-y-blur,
.split-text-word-fade-y-blur-scroll {
  position: relative;
  z-index: 1;
}

/* Keep word splits from collapsing spaces or breaking line-height (live site only) */
body:not(.elementor-editor-active) .word {
  display: inline-block;
  white-space: normal;
  line-height: inherit;
}

/* Preserve spacing for whitespace nodes emitted/inserted by SplitType */
body:not(.elementor-editor-active) .whitespace {
  display: inline;
  white-space: normal;
  line-height: inherit;
  font-size: inherit;
}

/* ================================
   SPLIT TEXT – WORD FADE X
   Add class "split-text-word-fade" to any text widget
   Customize via --word-* CSS variables
=================================== */
.split-text-word-fade {
  --word-offset-x: 20px; /* positive = fade in from right */
  --word-offset-y: 0px;
  --word-stagger: 0.05s;
  --word-duration: 1.5s;
  --word-opacity-start: 0;
  --word-ease: power2.out;
}

/* Vertical variant - add class "split-text-word-fade-y" */
.split-text-word-fade-y {
  --word-offset-x: 0px;
  --word-offset-y: 30px; /* positive = fade in from below */
  --word-stagger: 0.1s;
  --word-duration: 1.5s;
  --word-opacity-start: 0;
  --word-ease: power2.out;
}

/* Scroll-scrubbed horizontal variant - add class "split-text-word-fade-scroll" */
.split-text-word-fade-scroll {
  --word-offset-x: 30px; /* positive = fade in from right */
  --word-offset-y: 0px;
  --word-stagger: 0.1s;
  --word-duration: 1.5s;
  --word-opacity-start: 0;
  --word-ease: power2.out;
  --word-scroll-start: top 85%;
  --word-scroll-end: top 40%;
}

/* Scroll-scrubbed vertical variant - add class "split-text-word-fade-y-scroll" */
.split-text-word-fade-y-scroll {
  --word-offset-x: 0px;
  --word-offset-y: 30px; /* positive = fade in from below */
  --word-stagger: 0.1s;
  --word-duration: 1.5s;
  --word-opacity-start: 0;
  --word-ease: power2.out;
  --word-scroll-start: top 85%;
  --word-scroll-end: top 40%;
}

/* Blur vertical variant - add class "split-text-word-fade-y-blur" */
.split-text-word-fade-y-blur {
  --word-offset-x: 0px;
  --word-offset-y: 30px; /* positive = fade in from below */
  --word-stagger: 0.1s;
  --word-duration: 1.5s;
  --word-opacity-start: 0;
  --word-ease: power2.out;
  --word-blur-start: 20px; /* initial blur on each word (px) */
}

/* Scroll-scrubbed blur vertical variant - add class "split-text-word-fade-y-blur-scroll" */
.split-text-word-fade-y-blur-scroll {
  --word-offset-x: 0px;
  --word-offset-y: 30px; /* positive = fade in from below */
  --word-stagger: 0.1s;
  --word-duration: 1.5s;
  --word-opacity-start: 0;
  --word-ease: power2.out;
  --word-blur-start: 20px; /* initial blur on each word (px) */
  --word-scroll-start: top 85%;
  --word-scroll-end: top 40%;
}

/* Char blur vertical variant */
.split-text-char-fade-y-blur {
  --char-offset-x: 0px;
  --char-offset-y: 30px; /* positive = fade in from below */
  --char-stagger: 0.05s;
  --char-duration: 1.5s;
  --char-opacity-start: 0;
  --char-ease: power2.out;
  --char-blur-start: 20px; /* initial blur on each char (px) */
}

/* Scroll-scrubbed char blur vertical variant */
.split-text-char-fade-y-blur-scroll {
  --char-offset-x: 0px;
  --char-offset-y: 30px; /* positive = fade in from below */
  --char-stagger: 0.05s;
  --char-duration: 1.5s;
  --char-opacity-start: 0;
  --char-ease: power2.out;
  --char-blur-start: 20px; /* initial blur on each char (px) */
  --char-scroll-start: top 85%;
  --char-scroll-end: top 40%;
}

/* ================================
   FADE UP (frontend only)
=================================== */
body:not(.elementor-editor-active) .anim-fade-up {
  opacity: 0;
  transform: translateY(20px);
}

/* Prevent initial flash before JS applies start states (live site only) */
.scroll-transform:not(.supercraft-scroll-zoom-bg):not(.scroll-zoom-bg-in):not(.scroll-zoom-bg-out),
.scroll-transform-scrub:not(.supercraft-scroll-zoom-bg):not(.scroll-zoom-bg-in):not(.scroll-zoom-bg-out),
.image-reveal,
.container-reveal {
  opacity: 0;
}

/* Prevent split-text flash before JS split/init on live site */
body:not(.elementor-editor-active) [class*="split-text-"]:not([data-anim-init="true"]) {
  opacity: 0;
}

/* ================================
   BLUR REVEAL (frontend only)
   - We only hide it on live site, not in editor
=================================== */
body:not(.elementor-editor-active) .blur-reveal {
  --animation-delay: 0s;
  --animation-duration: 1.5s;
  --move-distance: -20px;

  opacity: 0;
  filter: blur(20px);
  transform: translateY(var(--move-distance)) scale(1.1);
}

/* ================================
   SCROLL FILL TEXT – generic
   Works for any widget with class "scroll-fill-text"
=================================== */
.scroll-fill-text,
.scroll-fill-text .elementor-heading-title,
.scroll-fill-text p,
.scroll-fill-text span,
.scroll-fill-text h1,
.scroll-fill-text h2,
.scroll-fill-text h3,
.scroll-fill-text h4,
.scroll-fill-text h5,
.scroll-fill-text h6 {
  position: relative;
  /* gradient/clip/etc will be set by JS */
}

/* Ensure webkit prefix is always present for background-clip: text.
   Some browsers normalize el.style.webkitBackgroundClip away.
   The actual gradient values are injected by JS; this ensures the
   clip mode sticks even if the browser drops the inline -webkit- prefix. */
.scroll-fill-text .elementor-heading-title,
.scroll-fill-text p,
.scroll-fill-text h1,
.scroll-fill-text h2,
.scroll-fill-text h3,
.scroll-fill-text h4,
.scroll-fill-text h5,
.scroll-fill-text h6 {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Force child text elements to inherit transparent fill so
   Elementor's own color declarations don't override the effect */
.scroll-fill-text p span,
.scroll-fill-text p a,
.scroll-fill-text p strong,
.scroll-fill-text p em,
.scroll-fill-text h1 span,
.scroll-fill-text h2 span,
.scroll-fill-text h3 span,
.scroll-fill-text h4 span,
.scroll-fill-text h5 span,
.scroll-fill-text h6 span,
.scroll-fill-text .elementor-heading-title span {
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
}

/* ================================
   SCROLL TRANSFORM – customizable transform animation
   Works for any widget with class "scroll-transform"
   Control via CSS custom properties or data attributes
=================================== */
.scroll-transform:not(.supercraft-scroll-zoom-bg):not(.scroll-zoom-bg-in):not(.scroll-zoom-bg-out),
.scroll-transform-scrub:not(.supercraft-scroll-zoom-bg):not(.scroll-zoom-bg-in):not(.scroll-zoom-bg-out) {
  /* Initial state - set these via CSS or data attributes */
  --transform-start-x: 0px;
  --transform-start-y: 0px;
  --transform-start-rotate: 0deg;
  --transform-start-scale: 1;
  --transform-start-opacity: 0;
  --transform-start-blur: 0px;
  
  /* End state - set these via CSS or data attributes */
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-rotate: 0deg;
  --transform-end-scale: 1;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
  
  /* Animation settings */
  --transform-duration: 1s;
  --transform-delay: 0s;
  --transform-ease: power2.out;
  --transform-trigger: top 85%;
  
  /* Apply initial state - will be overridden by JS */
  transform: translateX(var(--transform-start-x)) translateY(var(--transform-start-y)) rotate(var(--transform-start-rotate));
  opacity: var(--transform-start-opacity);
  filter: blur(var(--transform-start-blur));
}

/* ================================
   SCROLL TRANSFORM PRESETS
   Add these classes along with "scroll-transform" for quick animations
   =================================== */

/* Fade in from left */
.scroll-transform.fade-left,
.scroll-transform-scrub.fade-left {
  --transform-start-x: -100px;
  --transform-start-y: 0px;
  --transform-start-opacity: 0;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
}

/* Fade in from right */
.scroll-transform.fade-right,
.scroll-transform-scrub.fade-right {
  --transform-start-x: 100px;
  --transform-start-y: 0px;
  --transform-start-opacity: 0;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
}

/* Fade in from bottom (up) */
.scroll-transform.fade-up,
.scroll-transform-scrub.fade-up {
  --transform-start-x: 0px;
  --transform-start-y: 50px;
  --transform-start-opacity: 0;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
}

/* Fade in from top (down) */
.scroll-transform.fade-down,
.scroll-transform-scrub.fade-down {
  --transform-start-x: 0px;
  --transform-start-y: -50px;
  --transform-start-opacity: 0;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
}

/* Zoom in with fade */
.scroll-transform.zoom-in,
.scroll-transform-scrub.zoom-in {
  --transform-start-x: 0px;
  --transform-start-y: 0px;
  --transform-start-scale: 0.8;
  --transform-start-opacity: 0;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-scale: 1;
  --transform-end-opacity: 1;
}

/* Zoom out with fade */
.scroll-transform.zoom-out,
.scroll-transform-scrub.zoom-out {
  --transform-start-x: 0px;
  --transform-start-y: 0px;
  --transform-start-scale: 1.2;
  --transform-start-opacity: 0;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-scale: 1;
  --transform-end-opacity: 1;
}

/* Blur fade in (center, no movement) */
.scroll-transform.blur-fade,
.scroll-transform-scrub.blur-fade {
  --transform-start-x: 0px;
  --transform-start-y: 0px;
  --transform-start-opacity: 0;
  --transform-start-blur: 20px;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
}

/* Blur fade in from left */
.scroll-transform.blur-fade-left,
.scroll-transform-scrub.blur-fade-left {
  --transform-start-x: -100px;
  --transform-start-y: 0px;
  --transform-start-opacity: 0;
  --transform-start-blur: 20px;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
}

/* Blur fade in from right */
.scroll-transform.blur-fade-right,
.scroll-transform-scrub.blur-fade-right {
  --transform-start-x: 100px;
  --transform-start-y: 0px;
  --transform-start-opacity: 0;
  --transform-start-blur: 20px;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
}

/* Blur fade in from bottom (up) */
.scroll-transform.blur-fade-up,
.scroll-transform-scrub.blur-fade-up {
  --transform-start-x: 0px;
  --transform-start-y: 50px;
  --transform-start-opacity: 0;
  --transform-start-blur: 20px;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
}

/* Blur fade in from top (down) */
.scroll-transform.blur-fade-down,
.scroll-transform-scrub.blur-fade-down {
  --transform-start-x: 0px;
  --transform-start-y: -50px;
  --transform-start-opacity: 0;
  --transform-start-blur: 20px;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
}

/* Blur zoom in (modern effect) */
.scroll-transform.blur-zoom-in,
.scroll-transform-scrub.blur-zoom-in {
  --transform-start-x: 0px;
  --transform-start-y: 0px;
  --transform-start-scale: 0.8;
  --transform-start-opacity: 0;
  --transform-start-blur: 15px;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-scale: 1;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
}

/* Blur zoom out (modern effect) */
.scroll-transform.blur-zoom-out,
.scroll-transform-scrub.blur-zoom-out {
  --transform-start-x: 0px;
  --transform-start-y: 0px;
  --transform-start-scale: 1.2;
  --transform-start-opacity: 0;
  --transform-start-blur: 15px;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-scale: 1;
  --transform-end-opacity: 1;
  --transform-end-blur: 0px;
}

/* Fade only (no movement) */
.scroll-transform.fade,
.scroll-transform-scrub.fade {
  --transform-start-x: 0px;
  --transform-start-y: 0px;
  --transform-start-opacity: 0;
  --transform-end-x: 0px;
  --transform-end-y: 0px;
  --transform-end-opacity: 1;
}

/* ================================
   BLUR BACKDROP (glassmorphism helper)
   Add class "blur-bg" to any container
   Use --blur-bg-strength / --blur-bg-webkit to customize blur px
=================================== */
.blur-bg {
  --blur-bg-strength: 8px;   /* fallback for backdrop-filter */
  --blur-bg-webkit: 14px;    /* fallback for -webkit-backdrop-filter */

  backdrop-filter: blur(var(--blur-bg-strength)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-bg-webkit)) saturate(180%);
}

/* ================================
   IMAGE REVEAL ANIMATION
   Smooth mask reveal with zoom effect for images
   Add class "image-reveal" to image container
=================================== */
.image-reveal {
  --reveal-direction: left; /* default direction */
}

body:not(.elementor-editor-active) .image-reveal {
  --reveal-duration: 1.5s;
  --reveal-delay: 0s;
  --reveal-ease: power2.out;
  --reveal-trigger: top 85%;
  --reveal-image-scale: 1.3;
  
  /* Initial state - hidden */
  visibility: hidden;
  overflow: hidden;
}

body:not(.elementor-editor-active) .image-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
/* ================================
   IMAGE REVEAL DIRECTION HELPERS
   Add one of these to control mask direction
   e.g. class="image-reveal image-reveal-right"
   Apply everywhere so preview/editor matches frontend.
=================================== */
.image-reveal-left { --reveal-direction: left; }
.image-reveal-right { --reveal-direction: right; }
.image-reveal-top { --reveal-direction: top; }
.image-reveal-bottom { --reveal-direction: bottom; }

/* Injected blocks for envelope preset */
.ir-block-1,
.ir-block-2 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 2;
}

.ir-block-1 {
  background-color: var(--ir-color1, transparent);
}

.ir-block-2 {
  background-color: var(--ir-color2, transparent);
}

/* ================================
   CONTAINER REVEAL ANIMATION
   Center-out or directional mask reveal for any block
   Add class "container-reveal" to the container
=================================== */
.container-reveal {
  --reveal-direction: center; /* center | left | right | top | bottom */
}

.container-reveal,
.container-reveal-scroll {
  --reveal-direction: center; /* center | left | right | top | bottom */
  position: relative;
  overflow: hidden;
  will-change: clip-path;
}

.container-reveal,
.container-reveal-scroll {
  --reveal-duration: 1.2s;
  --animation-delay: 0s;
  --reveal-ease: power2.out;
  --reveal-trigger: top 85%;
  --reveal-scroll-start: top 85%;
  --reveal-scroll-end: top 20%;
}

body:not(.elementor-editor-active) .container-reveal,
body:not(.elementor-editor-active) .container-reveal-scroll {
  visibility: hidden; /* hide until JS sets */
}

/* Direction helpers */
.container-reveal-left { --reveal-direction: left; }
.container-reveal-right { --reveal-direction: right; }
.container-reveal-top { --reveal-direction: top; }
.container-reveal-bottom { --reveal-direction: bottom; }
.container-reveal-center { --reveal-direction: center; }
.container-reveal-cinematic-gate { --reveal-direction: cinematic-gate; }
.container-reveal-block-curtain { --reveal-direction: block-curtain; }

/* Injected Staggered Color Block Curtain Overlay */
.cr-block-curtain-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  display: flex !important;
  pointer-events: none !important;
}

.cr-block-curtain-item {
  flex: 1 !important;
  height: 100% !important;
  background-color: var(--cr-block-color, #ff3b26);
  will-change: transform !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ===================================
   Text Reveal
=================================== */

.text-reveal {
  position: relative;
  overflow: hidden;
  display: inline-block; /* Important for bounding box wrapping the text exactly */
}

/* Base styles for the injected swipe blocks */
.tr-block-1,
.tr-block-2 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none; /* Let clicks pass through to text */
  z-index: 2; /* Sit on top of text */
}

.tr-block-1 {
  background-color: var(--tr-color1, transparent);
}

.tr-block-2 {
  background-color: var(--tr-color2, transparent);
}

/* The word inside the envelope */
.tr-word {
  display: inline-block;
  opacity: 0;
  position: relative;
  z-index: 1; /* Below the swipe blocks */
}

/* In editor preview, show the text initially unless previewing */
body.elementor-editor-active .text-reveal:not([data-supercraft-preview-play="yes"]) .tr-word {
  opacity: 1 !important;
}

/* Split Text: Mask Reveal Up */
.split-text-char-mask-up,
.split-text-char-mask-up-scroll,
.split-text-word-mask-up,
.split-text-word-mask-up-scroll {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  position: relative;
  z-index: 1;
}

.split-text-char-mask-up .char,
.split-text-char-mask-up-scroll .char,
.split-text-word-mask-up .word,
.split-text-word-mask-up-scroll .word {
  transform: translateY(var(--char-offset-y, 115px));
}

/* Hover Zoom Background Image Animation */
.supercraft-zoom-bg {
  position: relative !important;
  overflow: hidden !important;
}

.supercraft-zoom-bg::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.6s ease !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.supercraft-zoom-bg:hover::before,
.supercraft-zoom-bg.supercraft-zoom-bg-hovered::before {
  transform: scale(1.1) !important;
}

.supercraft-zoom-bg > .e-con-inner,
.supercraft-zoom-bg > .elementor-container,
.supercraft-zoom-bg > .elementor-widget-container,
.supercraft-zoom-bg > .e-parent-content {
  position: relative !important;
  z-index: 1 !important;
}

/* Scroll Zoom Background Image Animation */
.supercraft-scroll-zoom-bg,
.scroll-zoom-bg-in,
.scroll-zoom-bg-out {
  position: relative !important;
  overflow: hidden !important;
}

/* Hide parent static background when active so only ::before renders it */
.supercraft-scroll-zoom-bg[data-scroll-zoom-active],
.scroll-zoom-bg-in[data-scroll-zoom-active],
.scroll-zoom-bg-out[data-scroll-zoom-active] {
  background-image: none !important;
}

.supercraft-scroll-zoom-bg::before,
.scroll-zoom-bg-in::before,
.scroll-zoom-bg-out::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: scale(var(--supercraft-bg-scale, 1)) translateZ(0) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 0 !important;
  pointer-events: none !important;
  will-change: transform;
}

.supercraft-scroll-zoom-bg > .e-con-inner,
.supercraft-scroll-zoom-bg > .elementor-container,
.supercraft-scroll-zoom-bg > .elementor-widget-container,
.supercraft-scroll-zoom-bg > .e-parent-content,
.scroll-zoom-bg-in > .e-con-inner,
.scroll-zoom-bg-in > .elementor-container,
.scroll-zoom-bg-in > .elementor-widget-container,
.scroll-zoom-bg-in > .e-parent-content,
.scroll-zoom-bg-out > .e-con-inner,
.scroll-zoom-bg-out > .elementor-container,
.scroll-zoom-bg-out > .elementor-widget-container,
.scroll-zoom-bg-out > .e-parent-content {
  position: relative !important;
  z-index: 1 !important;
}

/* ================================
   VIDEO GSAP OVERRIDES
   Force-show Elementor background video (Elementor hides it with inline display:none)
   The JS MutationObserver also enforces this at runtime.
=================================== */
.video-gsap-init > video,
.video-gsap-init video.elementor-background-video-hosted {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ================================
   ELEMENTOR STICKY SPACER DEFENSE
   Elementor Pro clones sticky containers ($element.clone()) into .elementor-sticky__spacer
   to preserve layout scroll height. This clones background videos, canvas, and fallback images.
   When a custom z-index is set on either the parent or inner container, both the active element
   and the spacer share that z-index. Because the spacer is inserted after the active element in DOM,
   it stacks ON TOP of the active sticky container, causing the frozen first frame to scroll over
   the scrubbing video.
   These rules ensure .elementor-sticky__spacer is completely invisible and never renders media.
=================================== */
.elementor-sticky__spacer {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background-image: none !important;
  background-color: transparent !important;
  z-index: -1 !important;
}

.elementor-sticky__spacer * {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Explicitly hide any media or video containers inside spacers with maximum specificity */
.elementor-sticky__spacer video,
.elementor-sticky__spacer canvas,
.elementor-sticky__spacer .elementor-background-video-container,
.elementor-sticky__spacer .elementor-background-slideshow,
.elementor-sticky__spacer video.elementor-background-video-hosted,
.elementor-sticky__spacer .video-gsap-init video,
.elementor-sticky__spacer .video-gsap-init video.elementor-background-video-hosted {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}