/* Animex Elementor Addon Common Styles */

/* [Elite Performance v3.0]: Disable CSS transitions during JS animations */
.animex-motion-initialized,
.animex-motion-initialized * {
  transition: none !important;
}

.animex-motion-initialized {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

/* Advanced Heading */
.animex-advanced-heading {
  display: block;
}

.animex-advanced-heading .animex-heading-text {
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

/* Gradient Text Support */
.animex-heading-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Text Stroke Support */
.animex-heading-stroke {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
}

/* Text Icon Box */
.animex-text-icon-box {
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-sizing: border-box;
  overflow: hidden; /* Ensure background/border radius works well */
}

.animex-text-icon-box .animex-icon-wrapper {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  min-height: 50px; /* Ensure visibility */
}

/* Editor Specific Visibility */
.elementor-editor-active .animex-text-icon-box .animex-icon-wrapper:empty {
  border: 1px dashed #6c5ce7;
  min-width: 50px;
}

.animex-text-icon-box .animex-icon-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

.animex-text-icon-box .animex-icon-wrapper i {
  font-size: 50px;
  color: #6c5ce7; /* Fallback Primary Color */
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.animex-text-icon-box .animex-icon-wrapper svg {
  width: 50px;
  height: 50px;
  fill: #6c5ce7; /* Fallback Primary Color */
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.animex-text-icon-box .animex-content-wrapper {
  text-align: inherit;
}

.animex-text-icon-box .animex-title {
  margin: 0;
  transition: all 0.3s ease;
}

.animex-text-icon-box .animex-description {
  margin: 0;
  line-height: 1.6;
}

/* Hover Animations */
.animex-hover-grow:hover {
  transform: scale(1.05);
}
.animex-hover-shrink:hover {
  transform: scale(0.95);
}

.animex-hover-pulse:hover {
  animation: animex-pulse 1s infinite alternate;
}
@keyframes animex-pulse {
  to {
    transform: scale(1.08);
  }
}

.animex-hover-float:hover {
  transform: translateY(-10px);
}
.animex-hover-sink:hover {
  transform: translateY(10px);
}

.animex-hover-bob:hover {
  animation: animex-bob 0.8s infinite alternate;
}
@keyframes animex-bob {
  to {
    transform: translateY(-10px);
  }
}

.animex-hover-hang:hover {
  animation: animex-hang 0.8s infinite alternate;
}
@keyframes animex-hang {
  to {
    transform: translateY(10px);
  }
}

/* Button Base */
/* Button Base */
/* Button Base */
.animex-button:active {
  transform: translateY(1px);
}

.animex-button-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  line-height: 1;
}

.animex-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  transition: all 0.3s ease;
}

.animex-button-icon i,
.animex-button-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.animex-icon-reveal .animex-button-icon-wrapper {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

/* Button Variants */
.animex-button-variant-primary .animex-button {
  background-color: #6c5ce7;
  color: #fff;
}

.animex-button-variant-primary .animex-button:hover {
  background-color: #5b4bc4;
}

.animex-button-variant-outline .animex-button {
  background: transparent !important;
  border: 2px solid #6c5ce7;
  color: #6c5ce7;
}

.animex-button-variant-outline .animex-button:hover {
  background: #6c5ce7 !important;
  color: #fff;
}

.animex-button-variant-glass .animex-button {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  color: #fff;
}

.animex-button-variant-glass .animex-button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.animex-button-variant-gradient .animex-button {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: #fff;
  border: none;
}

.animex-button-variant-gradient .animex-button:hover {
  background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
}

.animex-button-variant-3d .animex-button {
  background-color: #6c5ce7;
  color: #fff;
  box-shadow: 0 6px 0 #4834d4;
  position: relative;
  top: 0;
  transition: all 0.1s ease;
}

.animex-button-variant-3d .animex-button:hover {
  top: 2px;
  box-shadow: 0 4px 0 #4834d4;
}

.animex-button-variant-3d .animex-button:active {
  top: 6px;
  box-shadow: 0 0 0 #4834d4;
}

/* Animex Motion (Scroll Animations) */
.animex-motion-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure editor content is visible and interactive even if animation states are applied */
.elementor-editor-active .animex-motion-hidden,
.elementor-editor-active [data-animex-settings],
.elementor-editor-active [data-animex-text-settings] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* Fix for SplitText potentially making text unselectable in editor */
.elementor-editor-active .animex-motion-initialized {
  overflow: visible !important;
}

/* Animex Logo Icon for Elementor Panel */
.animex-logo-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../images/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  top: -1px;
}

/* Animex Logo Badge for Widget Icons */
.animex-badge {
  position: static !important;
}

.animex-badge:after {
  content: "";
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 14px;
  height: 14px;
  background-image: url("../images/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100;
}

/* ── PRELOADER ─────────────────────────────────────────── */
#animex-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

#animex-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.animex-preloader-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #fff;
  border-radius: 50%;
  animation: animex-spin 1s linear infinite;
}

@keyframes animex-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Ensure motion hidden elements are strictly hidden until JS reveals them */
.animex-motion-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Lenis Smooth Scroll Support */
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* Ensure no markers add height to footer */
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
  display: none !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* WP Admin Bar Compatibility for Mobile */
@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
  }
}
