@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3),
                0 0 20px rgba(255, 215, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7),
                0 0 50px rgba(255, 215, 0, 0.4);
  }
}

.glow-pulse {
  animation: glowPulse 2s infinite ease-in-out;
}

.glow-pulse-red {
  animation: redGlowPulse 2s infinite ease-in-out;
}

@keyframes redGlowPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4),
                0 0 16px rgba(220, 38, 38, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.8),
                0 0 40px rgba(220, 38, 38, 0.5);
  }
}

/* =========================================
   ELECTRICAL ARC EFFECT
========================================= */

.hero-title {
  position: relative;
  z-index: 2;
  text-shadow:
    0 0 4px rgba(255,255,255,0.9),
    0 0 10px rgba(59,130,246,0.15);
  animation: titleFlash 6s infinite;
}

.electric-arc {
  position: absolute;
  top: 50%;
  left: -40px;
  width: calc(100% + 80px);
  height: 80px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.9) 0%,
      rgba(59,130,246,0.7) 20%,
      rgba(59,130,246,0.35) 40%,
      transparent 75%
    );
  filter:
    blur(2px)
    drop-shadow(0 0 12px rgba(59,130,246,0.9))
    drop-shadow(0 0 24px rgba(59,130,246,0.6));
  animation: electricArc 6s infinite;
}

@keyframes electricArc {
  0%, 10%, 100% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.7);
  }

  12% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }

  15% {
    opacity: 0.35;
  }

  18% {
    opacity: 1;
  }

  22% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.85);
  }
}

@keyframes titleFlash {
  0%, 10%, 100% {
    text-shadow:
      0 0 4px rgba(255,255,255,0.9),
      0 0 10px rgba(59,130,246,0.15);
  }

  12%, 14% {
    text-shadow:
      0 0 8px rgba(255,255,255,1),
      0 0 18px rgba(59,130,246,0.8),
      0 0 35px rgba(59,130,246,0.45);
  }

  16% {
    text-shadow:
      0 0 4px rgba(255,255,255,0.9),
      0 0 10px rgba(59,130,246,0.15);
  }
}

/* =========================================
   GENERAL STYLES
========================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Dramatic hero reveal */
.hero-reveal {
  opacity: 0;
  transform: translateY(55px) scale(0.97);
  filter: blur(10px);
  transition:
    opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.45s;
}

.hero-reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.delay-100 { transition-delay: 0.15s; }
.delay-200 { transition-delay: 0.3s; }
.delay-300 { transition-delay: 0.45s; }
.delay-400 { transition-delay: 0.6s; }
.delay-500 { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .hero-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* =========================================
   REVIEWS SLIDER
========================================= */

.reviews-slider {
  overflow: hidden;
  width: 100%;
}

.reviews-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: scrollReviews 28s linear infinite;
}

.reviews-slider:hover .reviews-track {
  animation-play-state: paused;
}

.reviews-slider.paused .reviews-track {
  animation-play-state: paused;
}

.reviews-track.dragging {
  cursor: grabbing;
}

.review-card {
  width: 360px;
  min-height: 230px;
  padding: 2rem;
  border-radius: 1rem;
  background: linear-gradient(to bottom, #111827, rgba(0, 0, 0, 0.7));
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
  color: white;
  flex-shrink: 0;
}

.review-card p {
  color: #d1d5db;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.review-card h4 {
  color: #facc15;
  font-weight: 700;
}

.review-card span {
  color: #9ca3af;
  font-size: 0.9rem;
}

@keyframes scrollReviews {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}