/* ================================
   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,
.scroll-transform-scrub,
.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 */
}

/* ================================
   SCROLL TRANSFORM – customizable transform animation
   Works for any widget with class "scroll-transform"
   Control via CSS custom properties or data attributes
=================================== */
.scroll-transform,
.scroll-transform-scrub {
  /* 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; }

/* ================================
   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; }