/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 13 2026 | 23:36:13 */
/* =========================================================
   SCROLL ENTRANCE EFFECTS
   Add: fade-in
   Optional image mask: reveal-up
   ========================================================= */

.js .fade-in {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js .fade-in.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Bottom-to-top image mask */
.js .reveal-up {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    opacity 500ms ease,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal-up::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: #080808; /* Match your page background */
  transform: translateY(0);
}

.js .reveal-up.is-visible::before {
  animation: reveal-up-mask 1050ms cubic-bezier(0.76, 0, 0.24, 1) 200ms forwards;
}

@keyframes reveal-up-mask {
  to {
    transform: translateY(-101%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal-up::before {
    display: none;
    animation: none;
  }
}




/* =========================================================
   SHARED ELEMENTOR IMAGE STRUCTURE
   Add one class to an Elementor Image widget:
   image-hover
   image-ripple
   ========================================================= */

.image-hover,
.image-ripple {
  width: fit-content !important;
  max-width: 100%;
  align-self: flex-start;
  justify-self: start;
}

.image-hover > .elementor-widget-container,
.image-ripple > .elementor-widget-container {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  vertical-align: top;
}

.image-hover > .elementor-widget-container > a,
.image-ripple > .elementor-widget-container > a {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.image-hover img,
.image-ripple img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.image-hover img {
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 800ms ease;
}

.image-hover > .elementor-widget-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 rgba(170, 255, 0, 0);
  transition:
    border-color 600ms ease,
    box-shadow 600ms ease;
}

.image-hover:hover img {
  transform: scale(1.045);
  filter: brightness(1.06) contrast(1.03);
}

.image-hover:hover > .elementor-widget-container::after {
  border-color: rgba(170, 255, 0, 0.45);
  box-shadow: inset 0 0 32px rgba(170, 255, 0, 0.08);
}


/* =========================================================
   IMAGE RIPPLE
   ========================================================= */

.image-ripple {
  --ripple-x: 50%;
  --ripple-y: 50%;
}

.image-ripple img {
  filter: url("#water-ripple-filter") brightness(1) contrast(1);
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 800ms ease;
}

.image-ripple > .elementor-widget-container::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: repeating-radial-gradient(
    circle at var(--ripple-x) var(--ripple-y),
    transparent 0 28px,
    rgba(170, 255, 0, 0.18) 30px,
    transparent 33px 48px
  );
}

.image-ripple > .elementor-widget-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 rgba(170, 255, 0, 0);
  transition:
    border-color 600ms ease,
    box-shadow 600ms ease;
}

.image-ripple:hover img {
  transform: scale(1.045);
  filter: url("#water-ripple-filter") brightness(1.06) contrast(1.03);
}

.image-ripple:hover > .elementor-widget-container::before {
  animation: image-ripple-expand 1600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.image-ripple:hover > .elementor-widget-container::after {
  border-color: rgba(170, 255, 0, 0.4);
  box-shadow: inset 0 0 32px rgba(170, 255, 0, 0.08);
}

@keyframes image-ripple-expand {
  from {
    transform: scale(0.42);
    opacity: 0.72;
  }

  to {
    transform: scale(0.92);
    opacity: 0;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .js .fade-in,
  .js .fade-in.is-visible,
  .js .reveal-up,
  .js .reveal-up.is-visible {
    opacity: 1;
    visibility: visible;
    clip-path: none;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .image-hover img,
  .image-ripple img,
  .image-hover > .elementor-widget-container::after,
  .image-ripple > .elementor-widget-container::after {
    transition: none;
  }

  .image-hover:hover img,
  .image-ripple:hover img {
    transform: none;
  }

  .image-ripple > .elementor-widget-container::before {
    display: none;
  }
}


/* Elementor Builder only: keep animated items editable */
.elementor-editor-active .fade-in {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: none !important;
  transition: none !important;
}

.elementor-editor-active .reveal-up::before {
  display: none !important;
}


/* ==========================================================================
   SERVICE PAGER — THREE ITEMS PER VIEW
   Show only the active group without changing the section height.
   ========================================================================== */

.services-pager .services-page-next,
.services-pager .services-back {
  display: none !important;
}

.services-pager.is-showing-next .services-page-first,
.services-pager.is-showing-next .services-continue {
  display: none !important;
}

.services-pager.is-showing-next .services-page-next {
  display: flex !important;
}

.services-pager.is-showing-next .services-back {
  display: block !important;
}


/* ==========================================================================
   TEXT ANIMATION — CHARACTER FADE
   Animates generated characters while preserving word-level line wrapping.
   ========================================================================== */

.js .char-fade {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  word-break: normal;
  overflow-wrap: normal;
}

.js .char-fade .char-fade__word {
  display: inline-block;
  white-space: nowrap;
}

.js .char-fade .char-fade__character {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--character-index) * 12ms);
}

.js .char-fade.is-visible .char-fade__character {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .char-fade .char-fade__character {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   SECTION ENTRANCE — DEPTH ONLY
   Incoming sections settle forward; outgoing sections remain unchanged.
   ========================================================================== */

.curtain-depth-source,
.curtain-panel,
.curtain-content {
  perspective: 1400px;
}

.curtain-depth-source > .elementor-container,
.curtain-panel > .elementor-container,
.curtain-content > .elementor-container {
  position: relative;
  transform:
    translateZ(var(--curtain-z, 0px))
    rotateX(var(--curtain-rotate, 0deg))
    scale(var(--curtain-scale, 1));
  transform-origin: 50% 15%;
}

@media (prefers-reduced-motion: reduce) {
  .curtain-depth-source > .elementor-container,
  .curtain-panel > .elementor-container,
  .curtain-content > .elementor-container {
    transform: none;
  }
}