/**
 * 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-text-target,
html:not(.ceua-loaded) .ceua-button-target,
html:not(.ceua-loaded) .ceua-image-target {
  opacity: 0;
  visibility: hidden;
}

/* Flicker Prevention - More aggressive hiding until ready */
html.:not(.) .ceua-wave-target,
html.:not(.) .ceua-text-target {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show content once animations are initialized */
html. .ceua-wave-target,
html. .ceua-text-target {
  visibility: visible !important;
}

/* 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-text-target,
html:not(.ceua-loaded) .ceua-button-target,
html:not(.ceua-loaded) .ceua-image-target {
  animation: ceua-emergency-show 0.3s 3s forwards;
}

/* Additional fallback for flicker prevention */
html.:not(.) .ceua-wave-target,
html.:not(.) .ceua-text-target {
  animation: ceua-emergency-show 0.3s 2.5s 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;
}

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

/* ========================================
   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-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-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: 1023px) {
  /* 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-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;
  }
}