/* GQLite.com Logo Explosion Style */

/* Importing Google Fonts for consistency */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@800&family=Bebas+Neue&display=swap');

/* Explosion style for GQLite.com - creating a dynamic, explosive appearance */
.gqlite-logo-explosion {
  position: relative;
  animation: explosion-pulse 3s ease-in-out infinite;
}

.gqlite-logo-explosion span {
  display: inline-block;
  color: white;
  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;
  animation: explosion-float 4s ease-in-out infinite;
  transition: all 0.3s ease;
}

/* Color for each character - using vibrant, high-contrast colors */
.gqlite-logo-explosion span:nth-child(1) { /* G */
  color: #ff2400;
  animation-delay: 0s;
}

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

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

.gqlite-logo-explosion span:nth-child(4) { /* I */
  color: #0066ff;
  animation-delay: 0.3s;
}

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

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

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

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

.gqlite-logo-explosion span:nth-child(9) { /* O */
  color: #00ff66;
  animation-delay: 0.8s;
}

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

/* Explosion particle effect */
.gqlite-logo-explosion::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
  filter: blur(10px);
  animation: explosion-wave 3s ease-in-out infinite;
}

/* Explosion burst effect for each character */
.gqlite-logo-explosion span::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, currentColor 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
  filter: blur(10px);
  opacity: 0.3;
  animation: explosion-burst 2s ease-in-out infinite;
}

/* Hover effect for explosion logo */
.gqlite-logo-explosion:hover {
  animation-duration: 2s;
}

.gqlite-logo-explosion:hover span {
  animation: explosion-spread 0.8s ease-in-out infinite alternate, explosion-shake 0.2s ease-in-out infinite;
  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-explosion:hover span:nth-child(1) { transform: translateX(-10px) rotate(-5deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(2) { transform: translateX(10px) rotate(5deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(3) { transform: translateX(-8px) rotate(-4deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(4) { transform: translateX(8px) rotate(4deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(5) { transform: translateX(-12px) rotate(-6deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(6) { transform: translateX(12px) rotate(6deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(7) { transform: translateX(-5px) rotate(-3deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(8) { transform: translateX(5px) rotate(3deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(9) { transform: translateX(-9px) rotate(-5deg) scale(1.1); }
.gqlite-logo-explosion:hover span:nth-child(10) { transform: translateX(9px) rotate(5deg) scale(1.1); }

.gqlite-logo-explosion:hover::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  animation-duration: 2s;
}

.gqlite-logo-explosion:hover span::after {
  width: 150px;
  height: 150px;
  opacity: 0.5;
  animation-duration: 1.5s;
}

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

@keyframes explosion-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes explosion-wave {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.15; }
}

@keyframes explosion-burst {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
}

@keyframes explosion-spread {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

@keyframes explosion-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

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

@media (max-width: 768px) {
  .gqlite-logo-explosion 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-explosion::before {
    width: 200px;
    height: 200px;
    filter: blur(8px);
  }
  
  .gqlite-logo-explosion span::after {
    width: 60px;
    height: 60px;
    filter: blur(8px);
  }
}

@media (max-width: 480px) {
  .gqlite-logo-explosion 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-explosion::before {
    width: 150px;
    height: 150px;
    filter: blur(6px);
  }
  
  .gqlite-logo-explosion span::after {
    display: none;
  }
}