/**
 * Custom Elementor Animations - Frontend Styles
 * Version: 2.1.0
 * With blur effects and FOUC prevention
 */

/* ========================================
   FOUC Prevention - Show content after JS loads
   ======================================== */

/* Basic FOUC prevention - all content types */
html:not(.ceua-loaded) .ceua-wave-target,
html:not(.ceua-loaded) .ceua-wave2-target,
html:not(.ceua-loaded) .ceua-text-target,
html:not(.ceua-loaded) .ceua-button-target,
html:not(.ceua-loaded) .ceua-image-target {
  opacity: 0;
  visibility: visible;
}

/* Fallback: Show all content after 3 seconds regardless */
@keyframes ceua-emergency-show {
  to {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

html:not(.ceua-loaded) .ceua-wave-target,
html:not(.ceua-loaded) .ceua-wave2-target,
html:not(.ceua-loaded) .ceua-text-target,
html:not(.ceua-loaded) .ceua-button-target,
html:not(.ceua-loaded) .ceua-image-target {
  animation: ceua-emergency-show 0.3s 3s forwards;
}

/* ========================================
   Wave Animation (H1/H2) - Word-based
   ======================================== */

.ceua-wave-target {
  visibility: hidden;
}

.ceua-wave-ready {
  visibility: visible;
}

.ceua-wave-word {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}


/* Allow special-text groups (treated as one word) to wrap responsively */
.ceua-wave-target .special-text.ceua-wave-word{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Blur variant */
html.ceua-wave-blur .ceua-wave-word {
  filter: blur(8px);
  will-change: transform, opacity, filter;
}

.ceua-wave-active .ceua-wave-word {
  animation: ceua-wave-up var(--ceua-wave-duration, 0.95s) cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--word-index) * var(--ceua-wave-stagger, 0.08s));
}

html.ceua-wave-blur .ceua-wave-active .ceua-wave-word {
  animation-name: ceua-wave-up-blur;
}

@keyframes ceua-wave-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ceua-wave-up-blur {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


.ceua-wave2-target {
  visibility: hidden;
}

.ceua-wave2-ready {
  display: block;
  visibility: visible;
}

/* ceua-wave2-unit: pure inline, never override color so .special-text colors survive */
.ceua-wave2-unit {
  display: inline;
}

/*
 * LINE MASK — the core of the reveal technique.
 * overflow:hidden acts as an invisible curtain.
 * The inner slides up from below → text appears to "cut in" through the baseline.
 *
 * Extra vertical room so descenders (g, p, y…) and ascenders aren't clipped.
 * The negative margin collapses that space back so line-spacing stays natural.
 */
.ceua-wave2-line {
  display: block;
  overflow: hidden;
  line-height: inherit;
  padding-top: 0.1em;
  padding-bottom: 0.18em;
  margin-top: -0.1em;
  margin-bottom: -0.18em;
}

.ceua-wave2-line:last-child {
  margin-bottom: 0;
}

/*
 * INNER — starts fully below the mask (translateY 105%) with a slight
 * clockwise tilt (rotate 4deg) for the "coming from an angle" feel.
 * No opacity needed — the parent clips it completely.
 */
.ceua-wave2-line-inner {
  display: block;
  transform: translateY(105%) rotate(4deg);
  transform-origin: left bottom;
  will-change: transform;
}

.ceua-wave2-active {
  visibility: visible;
}

.ceua-wave2-active .ceua-wave2-line-inner {
  animation: ceua-wave2-reveal var(--ceua-wave-duration, 0.9s)
    cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation-delay: calc(var(--ceua-line-index, 0) * 0.13s);
}

/* After animation: clean up GPU layer */
.ceua-wave2-active .ceua-wave2-line-inner.ceua-wave2-done {
  animation: none;
  transform: none;
  will-change: auto;
}

@keyframes ceua-wave2-reveal {
  0% {
    transform: translateY(105%) rotate(4deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* ========================================
   Text Fade Animation
   ======================================== */

html.ceua-text-enabled .ceua-text-target {
  opacity: 0;
}

/* Blur variant */
html.ceua-text-enabled.ceua-text-blur .ceua-text-target {
  filter: blur(6px);
  will-change: opacity, filter;
}

html.ceua-text-enabled .ceua-text-visible {
  opacity: 1;
  transition: opacity var(--ceua-text-duration, 0.6s) ease var(--ceua-text-delay, 0.2s);
}

html.ceua-text-enabled.ceua-text-blur .ceua-text-visible {
  filter: blur(0);
  transition: opacity var(--ceua-text-duration, 0.6s) ease var(--ceua-text-delay, 0.2s),
              filter var(--ceua-text-duration, 0.6s) ease var(--ceua-text-delay, 0.2s);
}

/* ========================================
   Button Fade Animation
   ======================================== */

html.ceua-button-enabled .ceua-button-target {
  opacity: 0;
}

/* Blur variant */
html.ceua-button-enabled.ceua-button-blur .ceua-button-target {
  filter: blur(5px);
  will-change: opacity, filter;
}

html.ceua-button-enabled .ceua-button-visible {
  opacity: 1;
  transition: opacity var(--ceua-button-duration, 0.5s) ease var(--ceua-button-delay, 0.1s);
}

html.ceua-button-enabled.ceua-button-blur .ceua-button-visible {
  filter: blur(0);
  transition: opacity var(--ceua-button-duration, 0.5s) ease var(--ceua-button-delay, 0.1s),
              filter var(--ceua-button-duration, 0.5s) ease var(--ceua-button-delay, 0.1s);
}

/* ========================================
   Image Fade Animation
   ======================================== */

html.ceua-image-enabled .ceua-image-target {
  opacity: 0;
}

/* Blur variant */
html.ceua-image-enabled.ceua-image-blur .ceua-image-target {
  filter: blur(10px);
  will-change: opacity, filter;
}

html.ceua-image-enabled .ceua-image-visible {
  opacity: 1;
  transition: opacity var(--ceua-image-duration, 0.5s) ease var(--ceua-image-delay, 0.1s);
}

html.ceua-image-enabled.ceua-image-blur .ceua-image-visible {
  filter: blur(0);
  transition: opacity var(--ceua-image-duration, 0.5s) ease var(--ceua-image-delay, 0.1s),
              filter var(--ceua-image-duration, 0.5s) ease var(--ceua-image-delay, 0.1s);
}

/* ========================================
   Background Image Fade Animation
   ======================================== */

html.ceua-bg-enabled .ceua-bg-host {
  position: relative;
}

html.ceua-bg-enabled .ceua-bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ceua-bg-duration, 0.5s) ease var(--ceua-bg-delay, 0.1s);
  z-index: 0;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-attachment: inherit;
}

/* Blur variant */
html.ceua-bg-enabled.ceua-bg-blur .ceua-bg-layer {
  filter: blur(15px);
  transition: opacity var(--ceua-bg-duration, 0.5s) ease var(--ceua-bg-delay, 0.1s),
              filter var(--ceua-bg-duration, 0.5s) ease var(--ceua-bg-delay, 0.1s);
}

html.ceua-bg-enabled .ceua-bg-visible .ceua-bg-layer {
  opacity: 1;
}

html.ceua-bg-enabled.ceua-bg-blur .ceua-bg-visible .ceua-bg-layer {
  filter: blur(0);
}

/* Preserve Elementor overlay z-index hierarchy */
html.ceua-bg-enabled .ceua-bg-host > .elementor-background-overlay,
html.ceua-bg-enabled .ceua-bg-host > .elementor-motion-effects-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keep content above background */
html.ceua-bg-enabled .ceua-bg-host > .elementor-container,
html.ceua-bg-enabled .ceua-bg-host > .e-con-inner,
html.ceua-bg-enabled .ceua-bg-host > .elementor-widget-wrap {
  position: relative;
  z-index: 2;
}

/* ========================================
   Glass Button Hover Effect
   ======================================== */

.ceua-glass-button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.25s ease;
  will-change: transform;
}

/* Gradient overlay */
.ceua-glass-button::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    140% 90% at 15% 0%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.1) 38%,
    rgba(255, 255, 255, 0) 72%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Shine effect */
.ceua-glass-button::after {
  content: "";
  position: absolute;
  top: -95%;
  left: -70%;
  width: 75%;
  height: 290%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 28%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.1) 72%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-180%) rotate(18deg);
  opacity: 0;
  filter: blur(1.2px);
  mix-blend-mode: screen;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
  will-change: transform;
}

.ceua-glass-button:hover {
  transform: scale(1.03) translateZ(0);
}

.ceua-glass-button:hover::before {
  opacity: 1;
}

.ceua-glass-button:hover::after {
  transform: translateX(360%) rotate(18deg);
  opacity: 1;
}

/* ========================================
   Accessibility: Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  /* Force show all content immediately */
  html:not(.ceua-loaded) .ceua-wave-target,
  html:not(.ceua-loaded) .ceua-wave2-target,
  html:not(.ceua-loaded) .ceua-text-target,
  html:not(.ceua-loaded) .ceua-button-target,
  html:not(.ceua-loaded) .ceua-image-target {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }
  
  .ceua-wave-target {
    visibility: visible !important;
  }
  .ceua-wave2-target {
  visibility: visible !important;
}

.ceua-wave2-line-inner {
  transform: none !important;
  animation: none !important;
}

  .ceua-wave-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  
  html.ceua-text-enabled .ceua-text-target,
  html.ceua-button-enabled .ceua-button-target,
  html.ceua-image-enabled .ceua-image-target {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  
  html.ceua-bg-enabled .ceua-bg-layer {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  
  .ceua-glass-button,
  .ceua-glass-button::before,
  .ceua-glass-button::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ========================================
   Mobile Disable (Below 1024px)
   ======================================== */

@media (max-width: 1024px) {
  /* Disable wave on mobile if requested */
  html.ceua-wave-disable-mobile .ceua-wave-target {
    visibility: visible !important;
    opacity: 1 !important;
  }
  html.ceua-wave-disable-mobile .ceua-wave2-target {
  visibility: visible !important;
  opacity: 1 !important;
}

html.ceua-wave-disable-mobile .ceua-wave2-line-inner {
  transform: none !important;
  animation: none !important;
}
  
  html.ceua-wave-disable-mobile .ceua-wave-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  
  /* Disable text fade on mobile if requested */
  html.ceua-text-disable-mobile.ceua-text-enabled .ceua-text-target {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  
  /* Disable button fade on mobile if requested */
  html.ceua-button-disable-mobile.ceua-button-enabled .ceua-button-target {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  
  /* Disable image fade on mobile if requested */
  html.ceua-image-disable-mobile.ceua-image-enabled .ceua-image-target {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  
  /* Disable background fade on mobile if requested */
  html.ceua-bg-disable-mobile.ceua-bg-enabled .ceua-bg-layer {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}