/* DeltaCrown About Page 2025 - Cinematic Esports Hero */

/* Hero particle background animation */
@keyframes float-particles {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.6;
  }
}

.hero-particle {
  animation: float-particles 6s ease-in-out infinite;
}

.hero-particle:nth-child(2) {
  animation-delay: 2s;
  animation-duration: 8s;
}

.hero-particle:nth-child(3) {
  animation-delay: 4s;
  animation-duration: 7s;
}

/* Scroll indicator pulse */
@keyframes scroll-pulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(10px);
    opacity: 1;
  }
}

.scroll-indicator {
  animation: scroll-pulse 2s ease-in-out infinite;
}

/* Logo glow enhancement */
.logo-glow {
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4))
          drop-shadow(0 0 60px rgba(108, 0, 255, 0.3))
          drop-shadow(0 0 90px rgba(0, 229, 255, 0.2));
  transition: filter 0.3s ease;
}

.logo-glow:hover {
  filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.6))
          drop-shadow(0 0 80px rgba(108, 0, 255, 0.5))
          drop-shadow(0 0 120px rgba(0, 229, 255, 0.4));
}

/* Text glow for hero headline - reduced intensity for clarity */
.text-glow {
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.3),
               0 0 20px rgba(108, 0, 255, 0.2),
               0 0 30px rgba(255, 215, 0, 0.1);
}

/* New vivid headline glow - sharp & elegant */
.hero-headline-glow {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9),
               0 4px 40px rgba(108, 0, 255, 0.15),
               0 0 60px rgba(0, 229, 255, 0.1);
  filter: contrast(1.1) saturate(1.2);
}

/* Premium button effects */
.btn-premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.btn-premium:hover::before {
  transform: translateX(100%);
}

/* Hero grid overlay */
.hero-grid {
  background-image: 
    linear-gradient(rgba(249, 115, 22, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at center, black, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 70%);
}