/* GQLite.com Logo Hero Style */

/* Hero style for GQLite.com - creating a powerful, superhero-like appearance */
.gqlite-logo-hero {
  font-family: 'Bebas Neue', 'Fredoka One', 'Poppins', sans-serif;
  position: relative;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.gqlite-logo-hero span {
  display: inline-block;
  color: #FFFFFF;
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px currentColor,
    0 0 40px rgba(255, 255, 255, 0.8);
  position: relative;
  transition: all 0.3s ease;
  animation: hero-pulse 3s ease-in-out infinite;
}

/* Hero colors for each character - using primary and secondary colors */
.gqlite-logo-hero span:nth-child(1) { /* G */
  color: #FF0000;
  animation-delay: 0s;
}

.gqlite-logo-hero span:nth-child(2) { /* Q */
  color: #0000FF;
  animation-delay: 0.1s;
}

.gqlite-logo-hero span:nth-child(3) { /* L */
  color: #FFD700;
  animation-delay: 0.2s;
}

.gqlite-logo-hero span:nth-child(4) { /* I */
  color: #00FF00;
  animation-delay: 0.3s;
}

.gqlite-logo-hero span:nth-child(5) { /* T */
  color: #FF69B4;
  animation-delay: 0.4s;
}

.gqlite-logo-hero span:nth-child(6) { /* E */
  color: #00FFFF;
  animation-delay: 0.5s;
}

.gqlite-logo-hero span:nth-child(7) { /* . */
  color: #FFFFFF;
  animation-delay: 0.6s;
}

.gqlite-logo-hero span:nth-child(8) { /* C */
  color: #FFA500;
  animation-delay: 0.7s;
}

.gqlite-logo-hero span:nth-child(9) { /* O */
  color: #9370DB;
  animation-delay: 0.8s;
}

.gqlite-logo-hero span:nth-child(10) { /* M */
  color: #FF1493;
  animation-delay: 0.9s;
}

/* Hero shield effect */
.gqlite-logo-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 150%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  z-index: -2;
  border-radius: 10px;
}

/* Hero light beam effect */
.gqlite-logo-hero::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 80%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  transform: translateX(-50%);
  z-index: -1;
  filter: blur(10px);
}

/* Hover effect for Hero logo */
.gqlite-logo-hero:hover span {
  animation: hero-fly 0.8s ease-in-out infinite alternate;
  text-shadow: 
    0 0 15px currentColor,
    0 0 30px currentColor,
    0 0 45px currentColor,
    0 0 60px rgba(255, 255, 255, 0.9);
}

.gqlite-logo-hero:hover span:nth-child(1) { transform: translateY(-10px) rotate(-5deg); }
.gqlite-logo-hero:hover span:nth-child(2) { transform: translateY(-10px) rotate(5deg); }
.gqlite-logo-hero:hover span:nth-child(3) { transform: translateY(-10px) rotate(-4deg); }
.gqlite-logo-hero:hover span:nth-child(4) { transform: translateY(-10px) rotate(4deg); }
.gqlite-logo-hero:hover span:nth-child(5) { transform: translateY(-10px) rotate(-5deg); }
.gqlite-logo-hero:hover span:nth-child(6) { transform: translateY(-10px) rotate(5deg); }
.gqlite-logo-hero:hover span:nth-child(7) { transform: translateY(-10px) rotate(-3deg); }
.gqlite-logo-hero:hover span:nth-child(8) { transform: translateY(-10px) rotate(3deg); }
.gqlite-logo-hero:hover span:nth-child(9) { transform: translateY(-10px) rotate(-5deg); }
.gqlite-logo-hero:hover span:nth-child(10) { transform: translateY(-10px) rotate(5deg); }

.gqlite-logo-hero:hover::before {
  width: 130%;
  height: 160%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
}

.gqlite-logo-hero:hover::after {
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

/* Animation keyframes for Hero effects */
@keyframes hero-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}

@keyframes hero-fly {
  0% { transform: translateY(-10px) rotate(var(--rotate, 0deg)); }
  100% { transform: translateY(-15px) rotate(var(--rotate, 0deg)); }
}

/* Responsive adjustments for Hero style */
@media (max-width: 1024px) {
  .gqlite-logo-hero span {
    text-shadow: 
      0 0 8px currentColor,
      0 0 16px currentColor,
      0 0 24px currentColor,
      0 0 32px rgba(255, 255, 255, 0.8);
  }
}

@media (max-width: 768px) {
  .gqlite-logo-hero {
    letter-spacing: -1px;
  }
  
  .gqlite-logo-hero span {
    text-shadow: 
      0 0 6px currentColor,
      0 0 12px currentColor,
      0 0 18px currentColor,
      0 0 24px rgba(255, 255, 255, 0.8);
  }
  
  .gqlite-logo-hero::after {
    height: 80px;
  }
}

@media (max-width: 480px) {
  .gqlite-logo-hero span {
    text-shadow: 
      0 0 4px currentColor,
      0 0 8px currentColor,
      0 0 12px currentColor,
      0 0 16px rgba(255, 255, 255, 0.8);
  }
  
  .gqlite-logo-hero::after {
    height: 60px;
  }
}