/* Interactive Visual Enhancements - EventsXp */

/* Global Floating Elements */
body {
  position: relative;
  overflow-x: hidden;
}

/* Animated Background Elements */
.floating-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.floating-element {
  position: absolute;
  background: rgba(19, 142, 158, 0.03);
  border-radius: 50%;
  animation: float-random 15s infinite linear;
}

.floating-element:nth-child(1) {
  width: 60px;
  height: 60px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 20s;
}

.floating-element:nth-child(2) {
  width: 40px;
  height: 40px;
  top: 60%;
  left: 80%;
  animation-delay: 5s;
  animation-duration: 25s;
}

.floating-element:nth-child(3) {
  width: 80px;
  height: 80px;
  top: 80%;
  left: 20%;
  animation-delay: 10s;
  animation-duration: 18s;
}

@keyframes float-random {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

/* Interactive Hover Glow Effects */
.btn,
.service-card,
.faq-item,
.journey-step {
  position: relative;
}

.btn::after,
.service-card::after,
.faq-item::after,
.journey-step::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    rgba(19, 142, 158, 0.1) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  z-index: -1;
  pointer-events: none;
}

.btn:hover::after,
.service-card:hover::after,
.faq-item:hover::after,
.journey-step:hover::after {
  width: 200px;
  height: 200px;
}

/* Parallax Scroll Elements */
.parallax-element {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
}

.parallax-shape-1 {
  top: 10%;
  right: 5%;
  width: 100px;
  height: 100px;
  background: linear-gradient(
    45deg,
    rgba(19, 142, 158, 0.05),
    rgba(19, 142, 158, 0.02)
  );
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transform: rotate(15deg);
  animation: parallax-float 6s ease-in-out infinite;
}

.parallax-shape-2 {
  bottom: 20%;
  left: 3%;
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    rgba(19, 142, 158, 0.04),
    rgba(19, 142, 158, 0.01)
  );
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transform: rotate(-20deg);
  animation: parallax-float 8s ease-in-out infinite reverse;
}

@keyframes parallax-float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(10deg);
  }
}

/* Mouse Follow Effect */
.cursor-follower {
  position: fixed;
  width: 20px;
  height: 20px;
  background: rgba(19, 142, 158, 0.1);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
  opacity: 0;
}

.cursor-follower.active {
  opacity: 1;
  transform: scale(2);
  background: rgba(19, 142, 158, 0.2);
}

/* Interactive Section Transitions */
section {
  position: relative;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(19, 142, 158, 0.3) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.8s ease;
}

section.in-view::before {
  opacity: 1;
}

/* Card Stack Effect for Service Cards */
.services-grid {
  perspective: 1000px;
}

.service-card {
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
}

/* Animated Gradient Borders */
@keyframes gradient-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-border::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #138e9e, transparent, #138e9e);
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  animation: gradient-border 3s ease infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.animated-border:hover::after {
  opacity: 1;
}

/* Scroll Progress Indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #138e9e, #0f7a87);
  z-index: 9999;
  transition: width 0.1s ease;
}

/* Interactive FAQ Toggle Enhancement */
.faq-toggle {
  position: relative;
  overflow: hidden;
}

.faq-toggle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(19, 142, 158, 0.1),
    transparent
  );
  transform: rotate(-45deg) translateY(100%);
  transition: transform 0.6s ease;
}

.faq-item:hover .faq-toggle::before {
  transform: rotate(-45deg) translateY(-100%);
}

/* Statistics Counter Visual Enhancement */
.stat-item {
  overflow: hidden;
}

.stat-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(19, 142, 158, 0.1),
    transparent
  );
  transition: left 0.8s ease;
}

.stat-item:hover::after {
  left: 100%;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .floating-elements {
    display: none; /* Disable on mobile for performance */
  }

  .parallax-element {
    display: none;
  }

  .cursor-follower {
    display: none;
  }

  .service-card:hover {
    transform: translateY(-8px); /* Reduced 3D effect on mobile */
  }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .floating-element,
  .parallax-shape-1,
  .parallax-shape-2 {
    animation: none;
  }

  .service-card:hover {
    transform: translateY(-5px);
  }

  * {
    transition-duration: 0.01ms !important;
  }
}