/* GQLite.com Logo Anime Style */

/* Anime style for GQLite.com - creating a vibrant, cartoonish appearance */
.gqlite-logo-anime {
  font-family: 'Fredoka One', 'Poppins', 'Bebas Neue', sans-serif;
  position: relative;
  letter-spacing: 1px;
  text-transform: uppercase;
}

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

/* Anime colors for each character - using vibrant, contrasting colors */
.gqlite-logo-anime span:nth-child(1) { /* G */
  color: #FF4444;
  animation-delay: 0s;
}

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

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

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

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

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

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

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

.gqlite-logo-anime span:nth-child(9) { /* O */
  color: #0088FF;
  animation-delay: 0.8s;
}

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

/* Sparkle effect for anime style */
.gqlite-logo-anime span::before {
  content: '✨';
  position: absolute;
  top: -20px;
  right: -15px;
  font-size: 16px;
  opacity: 0;
  animation: anime-sparkle 4s ease-in-out infinite;
}

.gqlite-logo-anime span:nth-child(1)::before { animation-delay: 0.5s; }
.gqlite-logo-anime span:nth-child(2)::before { animation-delay: 1.2s; }
.gqlite-logo-anime span:nth-child(3)::before { animation-delay: 0.8s; }
.gqlite-logo-anime span:nth-child(4)::before { animation-delay: 1.5s; }
.gqlite-logo-anime span:nth-child(5)::before { animation-delay: 2.0s; }
.gqlite-logo-anime span:nth-child(6)::before { animation-delay: 1.7s; }
.gqlite-logo-anime span:nth-child(7)::before { animation-delay: 2.3s; }
.gqlite-logo-anime span:nth-child(8)::before { animation-delay: 2.8s; }
.gqlite-logo-anime span:nth-child(9)::before { animation-delay: 3.2s; }
.gqlite-logo-anime span:nth-child(10)::before { animation-delay: 3.5s; }

/* Hover effect for Anime logo */
.gqlite-logo-anime:hover span {
  animation: anime-float 0.5s ease-in-out infinite alternate;
  text-shadow: 
    4px 4px 0px #000000,
    -4px -4px 0px #000000,
    4px -4px 0px #000000,
    -4px 4px 0px #000000,
    0 0 20px rgba(255, 255, 255, 0.9);
}

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

.gqlite-logo-anime:hover span::before {
  opacity: 1;
  animation: anime-sparkle-fast 1s ease-in-out infinite;
}

/* Animation keyframes for Anime effects */
@keyframes anime-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  75% { transform: translateY(5px); }
}

@keyframes anime-float {
  0% { transform: translateY(-8px) rotate(var(--rotate, 0deg)); }
  100% { transform: translateY(-12px) rotate(var(--rotate, 0deg)); }
}

@keyframes anime-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

@keyframes anime-sparkle-fast {
  0%, 100% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

/* Responsive adjustments for Anime style */
@media (max-width: 1024px) {
  .gqlite-logo-anime span {
    text-shadow: 
      2px 2px 0px #000000,
      -2px -2px 0px #000000,
      2px -2px 0px #000000,
      -2px 2px 0px #000000,
      0 0 8px rgba(255, 255, 255, 0.8);
  }
  
  .gqlite-logo-anime span::before {
    font-size: 14px;
    top: -18px;
    right: -13px;
  }
}

@media (max-width: 768px) {
  .gqlite-logo-anime {
    letter-spacing: 0px;
  }
  
  .gqlite-logo-anime span {
    text-shadow: 
      1.5px 1.5px 0px #000000,
      -1.5px -1.5px 0px #000000,
      1.5px -1.5px 0px #000000,
      -1.5px 1.5px 0px #000000,
      0 0 6px rgba(255, 255, 255, 0.8);
  }
  
  .gqlite-logo-anime span::before {
    font-size: 12px;
    top: -16px;
    right: -11px;
  }
}

@media (max-width: 480px) {
  .gqlite-logo-anime span {
    text-shadow: 
      1px 1px 0px #000000,
      -1px -1px 0px #000000,
      1px -1px 0px #000000,
      -1px 1px 0px #000000,
      0 0 4px rgba(255, 255, 255, 0.8);
  }
  
  .gqlite-logo-anime span::before {
    display: none;
  }
}