/* Custom Styles & Animation System for Eduardo Figueredo Landing Page */

@layer utilities {
  .btn-neon {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .btn-neon:hover {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.7);
  }
}

/* Base Body Scroll & Selection */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0E17;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3B82F6;
}

/* Marquee Animation */
.marquee-track {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.marquee-content {
  animation: scrollMarquee 28s linear infinite;
}

@keyframes scrollMarquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* 3D Tilt Card Base */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.15s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
}

.tilt-card:hover {
  box-shadow: 0 15px 35px -5px rgba(59, 130, 246, 0.25), 0 0 15px rgba(0, 212, 255, 0.15);
}

/* Custom Image Drag Comparison Slider */
#before-after-container {
  user-select: none;
  touch-action: none;
}

/* Glow effects */
.glow-border {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

/* FAQ Accordion Smooth Animation */
.faq-content {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.faq-item.active {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}

.faq-item.active .faq-toggle i {
  transform: rotate(180deg);
}

/* Counter Animation Glow */
.counter {
  background: linear-gradient(135deg, #FFFFFF 0%, #00D4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}