/* =========================
// TEXT REVEAL GSAP
// set opacity to 0 before js has initialized
// to avoid ugly flash, then we will be setting opacity: 1 via the active class
// ========================= */
body:not(.elementor-editor-active) .text-reveal:not(.active) {
  opacity: 0;
}

.text-reveal .line {
  overflow: hidden;
}

.text-reveal .word {
  display: inline-block;
}

/* =========================
// TUNE ELEMENTOR NATIVE TRANSITIONS
// those are similar to gsap fade in/out etc, 
// but do not repeat
// ========================= */

@keyframes customfadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
    /* less movement for subtler effect */
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes customfadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-10%, 0, 0);
    /* less movement for subtler effect */
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes customfadeInRight {
  from {
    opacity: 0;
    transform: translate3d(10%, 0, 0);
    /* less movement for subtler effect */
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes customfadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
    /* less movement for subtler effect */
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: customfadeInDown !important;
}

.fadeInLeft {
  animation-name: customfadeInLeft !important;
}

.fadeInRight {
  animation-name: customfadeInRight !important;
}

.fadeInUp {
  animation-name: customfadeInUp !important;
}

/* =========================
// GSAP Fade in transitions
// set opacity to 0 before js has initialized
// ========================= */

body:not(.elementor-editor-active) .gsapFadeInDown,
body:not(.elementor-editor-active) .gsapFadeInLeft,
body:not(.elementor-editor-active) .gsapFadeInRight,
body:not(.elementor-editor-active) .gsapFadeInUp,
body:not(.elementor-editor-active) .gsapFadeIn {
  opacity: 0;
}

/* =========================
// SPOTLIGHT HERO EFFECT
// ========================= */

/* The hero container */
.masked-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Dark overlay with a transparent circular spotlight */
.mask-overlay {
  /* Adjustable spotlight radius */
  --spot-size: 500px;
  /* change to any px value for a bigger/smaller circle */

  position: absolute;
  inset: 0;
  z-index: 0;
  /* keep the overlay behind the hero text */
  pointer-events: none;
  /* let all clicks pass through */

  /* Radial gradient: clear center, darker edges */
  background: radial-gradient(circle var(--spot-size) at 50% 50%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 80%);

  /* Fade-in when JS runs */
  opacity: 0;
  /* JS will animate to 1 */
  transition: opacity 0.3s ease;
  /* small fallback if JS is disabled */
}


/* ============================================================
   Scroll Mask Reveal
   ------------------------------------------------------------
   Purpose:
   - Element starts fully covered by a white mask
   - When the element enters the viewport, a `.reveal` class
     is added via IntersectionObserver
   - CSS animates the mask sliding from left to right,
     revealing the content underneath

   Notes:
   - JavaScript only toggles the `.reveal` class
   - All animation timing and easing is controlled here in CSS
   - Exit threshold is handled in JS to avoid early reset
   - Safe for Elementor widgets and containers

   Classes:
   - .gsap-mask-reveal        : wrapper element
   - .image-mask              : overlay mask
   - .gsap-mask-reveal.reveal : active reveal state
   ============================================================ */

.gsap-mask-reveal {
  position: relative;
  overflow: hidden;
}

.gsap-mask-reveal img {
  display: block;
  width: 100%;
  height: auto;
}

.gsap-mask-reveal .image-mask {
  position: absolute;
  inset: 0;
  transform: translateX(0%);
  /*transition: transform 0.9s ease;*/
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);

  pointer-events: none;
  background: #fff;
  z-index: 99;
}

.gsap-mask-reveal.reveal .image-mask {
  transform: translateX(100%);
}

/* ============================================================
   Hover Overlay + Center Icon (Compact)
   ------------------------------------------------------------
   Supported:
   - Elementor Image widget: .elementor-widget-image
   - Elementor Image Carousel: .elementor-widget-image-carousel

   Usage:
   - Add `gs-hover-overlay` to the widget
   - Hover the image link -> overlay + icon + subtle scale
   ============================================================ */
/* ============================================================
   Hover Overlay + Center Icon (Compact, Ordered)
   ------------------------------------------------------------
   Works for:
   - .gs-hover-overlay.elementor-widget-image
   - .gs-hover-overlay.elementor-widget-image-carousel

   Hover target is always the <a> wrapping the image
   ============================================================ */

:root {
  --gs-hover-dim: rgba(0, 0, 0, 0.45);
  --gs-hover-dur: 0.45s;
  --gs-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gs-hover-scale: 1.04;
  --gs-hover-icon: 54px;
}

/* clickable link (image widget + carousel slide) */
.gs-hover-overlay.elementor-widget-image a,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: inset 0 0 0 10px #ffffff;
}

/* image inside link */
.gs-hover-overlay.elementor-widget-image a img,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--gs-hover-dur) var(--gs-hover-ease);
  will-change: transform;
}

/* overlay + icon base */
.gs-hover-overlay.elementor-widget-image a::before,
.gs-hover-overlay.elementor-widget-image a::after,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* dark overlay */
.gs-hover-overlay.elementor-widget-image a::before {
  background: var(--gs-hover-dim);
  opacity: 0;
  transition: opacity var(--gs-hover-dur) var(--gs-hover-ease);
  z-index: 2;
}

.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide figure.swiper-slide-inner:before {
  background: var(--gs-hover-dim);
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--gs-hover-dur) var(--gs-hover-ease), transform var(--gs-hover-dur) var(--gs-hover-ease);
  opacity: 0;
}

.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a:hover figure.swiper-slide-inner:before {
  opacity: 1;
  z-index: 1;
}

/* center icon */
.gs-hover-overlay.elementor-widget-image a::after,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a::after {
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--gs-hover-icon) var(--gs-hover-icon);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--gs-hover-dur) var(--gs-hover-ease),
    transform var(--gs-hover-dur) var(--gs-hover-ease);
  z-index: 3;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'><rect x='0.5' y='0.5' width='53' height='53' rx='26.5' fill='%231F1F1F' fill-opacity='0.2'/><rect x='0.5' y='0.5' width='53' height='53' rx='26.5' stroke='white'/><line x1='20' y1='27' x2='34' y2='27' stroke='white'/><line x1='27' y1='34' x2='27' y2='20' stroke='white'/></svg>");
}

/* hover (per-link only, safe for carousel) */
.gs-hover-overlay.elementor-widget-image a:hover::before,
.gs-hover-overlay.elementor-widget-image a:hover::after,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a:hover::before,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a:hover::after {
  opacity: 1;
}

/* .gs-hover-overlay.elementor-widget-image a:hover::after,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a:hover::after {
  transform: scale(1);
} */

.gs-hover-overlay.elementor-widget-image a:hover img,
.gs-hover-overlay.elementor-widget-image-carousel .swiper-slide a:hover img {
  transform: scale(var(--gs-hover-scale));
}

/* =========================
// MOBILE PARALLAX
// images should slightly move as we scroll
// ========================= */

@media (max-width: 767px) {

  /* Clip and allow transform on all parallax wrappers */
  .mob-parallax {
    overflow: hidden;
    position: relative;
  }

  /* Make each slide fill the carousel width so neighbors don’t peek through 
  .mob-parallax .swiper-slide {
    flex: 0 0 100%;
    overflow: hidden;
    width: 100% !important;
  }
    */

  /* Target the moving element:
     - Elementor: .swiper-slide-inner
     - Custom Swiper: .swiper-slide > img
     - Stand-alone images: direct img child */
  .mob-parallax .swiper-slide-inner,
  .mob-parallax .swiper-slide>img,
  .mob-parallax>img {
    will-change: transform;
    transition: none;
    /* JS handles easing */
    transform-origin: center center;
    transform: scale(1.25);
    /* keep the bigger scale */
    display: block;
    width: 100%;
    height: auto;
  }

  .chisamo-mobile-show.mob-parallax,
  div#showcase-swiper {
    height: 300px;
  }

  .chisamo-mobile-show.mob-parallax img {
    height: 100%;
    object-fit: cover;
  }
}