/**
 * Name Hover Effects CSS
 * Styles for advanced hover effects on name elements
 */

/* Base name element styles for GSAP effects */
.name {
  position: relative;
}

/* Text shadow layer */
.gsap-name-text-shadow {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 100%;
  height: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(1px);
}

/* Energy field layer */
.gsap-name-energy-field {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(8px);
  border-radius: 15px;
}

/* Ambient glow animation */
@keyframes nameAmbientPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1); 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1); 
  }
}

/* Hovering state class - Applied via JavaScript during hover */

/* Particle layer container */
.gsap-name-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: visible;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* Individual particles */
.gsap-name-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  filter: blur(0.5px);
}

/* Ambient glow layer */
.gsap-name-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
  filter: blur(20px);
  transform: translate(-50%, -50%);
  animation: nameAmbientPulse 4s ease-in-out infinite;
}

/* Disable ambient animation in low performance mode */
.gsap-low-performance .gsap-name-ambient-glow {
  animation: none;
}

/* Hover glow layer */
.gsap-name-hover-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(25px);
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

/* Performance mode indicators */
.gsap-low-performance .gsap-name-particles,
.gsap-low-performance .gsap-name-energy-field {
  display: none !important;
}

/* Theme-specific gradient backgrounds */

/* Dark theme gradients */
:root {
  --name-ambient-gradient-dark: radial-gradient(circle, rgba(255, 165, 0, 0.15) 0%, rgba(255, 140, 0, 0.08) 50%, transparent 100%);
  --name-hover-gradient-dark: radial-gradient(circle, rgba(255, 165, 0, 0.4) 0%, rgba(255, 140, 0, 0.2) 40%, rgba(255, 108, 0, 0.1) 70%, transparent 100%);
  --name-shadow-gradient-dark: linear-gradient(45deg, rgba(255, 165, 0, 0.6), rgba(255, 140, 0, 0.4), rgba(255, 108, 0, 0.6));
  --name-particle-color-dark: rgba(255, 165, 0, 0.8);
  --name-energy-gradient-dark: linear-gradient(45deg, rgba(255, 165, 0, 0.1), rgba(255, 140, 0, 0.15), rgba(255, 108, 0, 0.1), rgba(255, 165, 0, 0.05));
}

/* Light theme gradients */
[data-theme="light"] {
  --name-ambient-gradient-light: radial-gradient(circle, rgba(255, 140, 0, 0.12) 0%, rgba(255, 108, 0, 0.06) 50%, transparent 100%);
  --name-hover-gradient-light: radial-gradient(circle, rgba(255, 140, 0, 0.3) 0%, rgba(255, 108, 0, 0.15) 40%, rgba(255, 87, 34, 0.08) 70%, transparent 100%);
  --name-shadow-gradient-light: linear-gradient(45deg, rgba(255, 140, 0, 0.5), rgba(255, 108, 0, 0.3), rgba(255, 87, 34, 0.5));
  --name-particle-color-light: rgba(255, 140, 0, 0.7);
  --name-energy-gradient-light: linear-gradient(45deg, rgba(255, 140, 0, 0.08), rgba(255, 108, 0, 0.12), rgba(255, 87, 34, 0.08), rgba(255, 140, 0, 0.04));
}

/* Apply gradients via CSS variables (default to dark theme) */
.gsap-name-ambient-glow {
  background: var(--name-ambient-gradient-dark);
}

.gsap-name-hover-glow {
  background: var(--name-hover-gradient-dark);
}

.gsap-name-text-shadow {
  background: var(--name-shadow-gradient-dark);
}

.gsap-name-particle {
  background: var(--name-particle-color-dark);
}

.gsap-name-energy-field {
  background: var(--name-energy-gradient-dark);
}

/* Light theme overrides */
[data-theme="light"] .gsap-name-ambient-glow {
  background: var(--name-ambient-gradient-light);
}

[data-theme="light"] .gsap-name-hover-glow {
  background: var(--name-hover-gradient-light);
}

[data-theme="light"] .gsap-name-text-shadow {
  background: var(--name-shadow-gradient-light);
}

[data-theme="light"] .gsap-name-particle {
  background: var(--name-particle-color-light);
}

[data-theme="light"] .gsap-name-energy-field {
  background: var(--name-energy-gradient-light);
}