/* GQLite.com Logo Pixel Style */

/* Pixel style for GQLite.com - creating a retro, pixelated appearance */
.gqlite-logo-pixel {
  font-family: 'Bebas Neue', monospace;
  position: relative;
  letter-spacing: -2px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.gqlite-logo-pixel span {
  display: inline-block;
  color: white;
  text-shadow: 
    2px 2px 0px #000,
    -2px -2px 0px #000,
    2px -2px 0px #000,
    -2px 2px 0px #000;
  position: relative;
  transition: all 0.2s ease;
  animation: pixel-idle 2s ease-in-out infinite;
}

/* Color for each character - using vibrant 8-bit/16-bit game colors */
.gqlite-logo-pixel span:nth-child(1) { /* G */
  color: #ff0000;
  animation-delay: 0s;
}

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

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

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

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

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

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

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

.gqlite-logo-pixel span:nth-child(9) { /* O */
  color: #80ff00;
  animation-delay: 0.8s;
}

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

/* Pixel border effect */
.gqlite-logo-pixel span::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}

/* Hover effect for pixel logo */
.gqlite-logo-pixel:hover span {
  transform: scale(1.05) rotate(var(--rotate, 0deg));
  animation: pixel-jump 0.3s ease-in-out infinite alternate;
}

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

/* Animation keyframes for pixel effects */
@keyframes pixel-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes pixel-jump {
  0% { transform: scale(1.05) rotate(var(--rotate, 0deg)) translateY(0); }
  100% { transform: scale(1.05) rotate(var(--rotate, 0deg)) translateY(-10px); }
}

/* Responsive adjustments for pixel style */
@media (max-width: 1024px) {
  .gqlite-logo-pixel span {
    text-shadow: 
      1.5px 1.5px 0px #000,
      -1.5px -1.5px 0px #000,
      1.5px -1.5px 0px #000,
      -1.5px 1.5px 0px #000;
  }
}

@media (max-width: 768px) {
  .gqlite-logo-pixel {
    letter-spacing: -3px;
  }
  
  .gqlite-logo-pixel span {
    text-shadow: 
      1px 1px 0px #000,
      -1px -1px 0px #000,
      1px -1px 0px #000,
      -1px 1px 0px #000;
  }
}

@media (max-width: 480px) {
  .gqlite-logo-pixel span::before {
    display: none;
  }
}