/* Lotus - Dual Aspect Video
   Built to play nice with Flatsome visibility classes and avoid loading both video sources at once.
*/

.lotus-dual-video{
  position: relative;
  height: 100%;
  --ldv-radius: 0px;
}

.lotus-dual-video__inner{
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: var(--ldv-radius);
  transform: translateZ(0);
}

/* Parallax: JS updates --ldv-parallax-y on the wrapper */
.lotus-dual-video.ldv-has-parallax{ --ldv-parallax-y: 0px; }
.lotus-dual-video.ldv-has-parallax .lotus-dual-video__inner{
  transform: translate3d(0, var(--ldv-parallax-y), 0) scale(1.03);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce){
  .lotus-dual-video.ldv-has-parallax .lotus-dual-video__inner{
    transform: none !important;
  }
}


/* Keep video tags sized, but let Flatsome classes control which one is displayed */
.lotus-dual-video__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Background mode */
.lotus-dual-video--bg{
  height: 100% !important;
}

/* --------------------------
   Reveal-in-viewport effects
   -------------------------- */
.lotus-dual-video.ldv-reveal--fade,
.lotus-dual-video.ldv-reveal--fade-up,
.lotus-dual-video.ldv-reveal--zoom{
  opacity: 0;
  transform: translate3d(0,0,0);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

.lotus-dual-video.ldv-reveal--fade-up{
  transform: translate3d(0, 18px, 0);
}

.lotus-dual-video.ldv-reveal--zoom{
  transform: scale(0.985);
}

.lotus-dual-video.is-revealed{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .lotus-dual-video.ldv-reveal--fade,
  .lotus-dual-video.ldv-reveal--fade-up,
  .lotus-dual-video.ldv-reveal--zoom{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------
   Video Section wrapper
   -------------------------- */
.lotus-video-section{
  position: relative;
  overflow: hidden;
}

.lotus-video-section__bg{
  position: absolute;
  inset: 0;
}

.lotus-video-section__bg .lotus-dual-video,
.lotus-video-section__bg .lotus-dual-video__inner{
  height: 100%;
}

/* Overlay base */
.lotus-video-section__bg-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--ldv-overlay-opacity, 0.45);
  mix-blend-mode: var(--ldv-overlay-blend, normal);
}

/* Overlay modes */
.lotus-video-section__bg-overlay.ldv-overlay--none{
  display: none;
}

.lotus-video-section__bg-overlay.ldv-overlay--color{
  background: var(--ldv-overlay-color, rgba(0,0,0,0.5));
}

.lotus-video-section__bg-overlay.ldv-overlay--gradient{
  background: linear-gradient(var(--ldv-overlay-angle, 135deg), var(--ldv-overlay-color, rgba(0,0,0,0.6)), var(--ldv-overlay-color-2, rgba(0,0,0,0)));
}

.lotus-video-section__bg-overlay.ldv-overlay--grid{
  background-color: var(--ldv-overlay-color, rgba(0,0,0,0.5));
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: var(--ldv-overlay-size, 28px) var(--ldv-overlay-size, 28px);
}

.lotus-video-section__bg-overlay.ldv-overlay--dots{
  background-color: var(--ldv-overlay-color, rgba(0,0,0,0.5));
  background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: var(--ldv-overlay-size, 28px) var(--ldv-overlay-size, 28px);
  background-position: 0 0;
}

/* Tiny SVG noise (lightweight, repeats nicely) */
.lotus-video-section__bg-overlay.ldv-overlay--noise{
  background-color: var(--ldv-overlay-color, rgba(0,0,0,0.35));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.lotus-video-section__bg-overlay.ldv-overlay--image{
  background-image: var(--ldv-overlay-image);
  background-repeat: repeat;
  background-size: auto;
}

.lotus-video-section__bg-overlay.ldv-overlay--image.ldv-overlay-repeat--cover{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Content always above */
.lotus-video-section__content{
  position: relative;
  z-index: 1;
  width: 100%;
}