/* GQLite.com Logo Punk Style - Focus on Letter Bounce Effect */

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

/* Punk style for GQLite.com - Creating a rebellious, edgy look with focus on letter dynamics */
.gqlite-logo-punk {
  position: relative;
  display: inline-block;
  transform: skew(-5deg);
  transition: transform 0.3s ease;
}

/* Base styling for individual letters */
.gqlite-logo-punk span {
  display: inline-block;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 
    2px 2px 0px #000,
    4px 4px 0px var(--punk-color),
    6px 6px 0px var(--punk-color);
  transform: rotate(-2deg) skew(-2deg) scale(1.1);
  transition: all 0.2s ease, transform 0.4s ease;
  animation: punk-idle 2s ease-in-out infinite alternate, punk-flicker 3s ease-in-out infinite alternate;
}

/* Color gradient for each character - Using punk-inspired colors */
.gqlite-logo-punk span:nth-child(1) {
  background-image: linear-gradient(135deg, #ff0055, #ff3388, #ff0055);
  --punk-color: #ff0055;
  transform: rotate(2deg) skew(2deg) scale(1.1);
}

.gqlite-logo-punk span:nth-child(2) {
  background-image: linear-gradient(135deg, #00ccff, #3399ff, #00ccff);
  --punk-color: #00ccff;
  transform: rotate(-3deg) skew(-3deg) scale(1.1);
  animation-delay: 0.1s;
}

.gqlite-logo-punk span:nth-child(3) {
  background-image: linear-gradient(135deg, #ff0055, #ff3388, #ff0055);
  --punk-color: #ff0055;
  transform: rotate(1deg) skew(1deg) scale(1.1);
  animation-delay: 0.2s;
}

.gqlite-logo-punk span:nth-child(4) {
  background-image: linear-gradient(135deg, #00ccff, #3399ff, #00ccff);
  --punk-color: #00ccff;
  transform: rotate(-2deg) skew(-2deg) scale(1.1);
  animation-delay: 0.3s;
}

.gqlite-logo-punk span:nth-child(5) {
  background-image: linear-gradient(135deg, #ff0055, #ff3388, #ff0055);
  --punk-color: #ff0055;
  transform: rotate(3deg) skew(3deg) scale(1.1);
  animation-delay: 0.4s;
}

.gqlite-logo-punk span:nth-child(6) {
  background-image: linear-gradient(135deg, #00ccff, #3399ff, #00ccff);
  --punk-color: #00ccff;
  transform: rotate(-1deg) skew(-1deg) scale(1.1);
  animation-delay: 0.5s;
}

.gqlite-logo-punk span:nth-child(7) {
  background-image: linear-gradient(135deg, #ff0055, #ff3388, #ff0055);
  --punk-color: #ff0055;
  transform: rotate(2deg) skew(2deg) scale(1.1);
  animation-delay: 0.6s;
}

.gqlite-logo-punk span:nth-child(8) {
  background-image: linear-gradient(135deg, #00ccff, #3399ff, #00ccff);
  --punk-color: #00ccff;
  transform: rotate(-3deg) skew(-3deg) scale(1.1);
  animation-delay: 0.7s;
}

.gqlite-logo-punk span:nth-child(9) {
  background-image: linear-gradient(135deg, #ff0055, #ff3388, #ff0055);
  --punk-color: #ff0055;
  transform: rotate(1deg) skew(1deg) scale(1.1);
  animation-delay: 0.8s;
}

.gqlite-logo-punk span:nth-child(10) {
  background-image: linear-gradient(135deg, #00ccff, #3399ff, #00ccff);
  --punk-color: #00ccff;
  transform: rotate(-2deg) skew(-2deg) scale(1.1);
  animation-delay: 0.9s;
}

/* Enhanced hover effect for the entire logo */
.gqlite-logo-punk:hover {
  transform: skew(-3deg) scale(1.05);
}

/* Dramatic hover effect for each letter - Emphasizing punk style bounce */
.gqlite-logo-punk:hover span {
  text-shadow: 
    2px 2px 0px #000,
    4px 4px 0px var(--punk-color),
    6px 6px 0px var(--punk-color),
    8px 8px 0px #000,
    10px 10px 15px rgba(0, 0, 0, 0.8);
  animation: punk-bounce 0.4s ease-in-out infinite alternate, punk-flicker 1s ease-in-out infinite alternate;
}

/* Animation keyframes for punk effects */

/* Idle state animation - Subtle movement */
@keyframes punk-idle {
  0% {
    transform: translateY(0) rotate(-2deg) skew(-2deg) scale(1.1);
  }
  50% {
    transform: translateY(-2px) rotate(1deg) skew(1deg) scale(1.1);
  }
  100% {
    transform: translateY(0) rotate(-2deg) skew(-2deg) scale(1.1);
  }
}

/* Flicker effect for gradient colors */
@keyframes punk-flicker {
  0%, 100% {
    opacity: 0.9;
    background-position: 0% 50%;
  }
  50% {
    opacity: 1;
    background-position: 100% 50%;
  }
}

/* Bounce effect for letters - Enhanced for punk style */
@keyframes punk-bounce {
  0% {
    transform: translateY(0) rotate(-2deg) skew(-2deg) scale(1.1);
  }
  50% {
    transform: translateY(-8px) rotate(3deg) skew(3deg) scale(1.15);
  }
  100% {
    transform: translateY(0) rotate(-2deg) skew(-2deg) scale(1.1);
  }
}

/* Responsive adjustments for punk style */
@media (max-width: 1024px) {
  .gqlite-logo-punk span {
    text-shadow: 
      1px 1px 0px #000,
      3px 3px 0px var(--punk-color),
      5px 5px 0px var(--punk-color);
  }
}

@media (max-width: 768px) {
  .gqlite-logo-punk span {
    text-shadow: 
      1px 1px 0px #000,
      2px 2px 0px var(--punk-color),
      4px 4px 0px var(--punk-color);
    animation: punk-idle 3s ease-in-out infinite alternate;
  }
  
  .gqlite-logo-punk:hover span {
    animation: punk-bounce 0.6s ease-in-out infinite alternate;
  }
}

@media (max-width: 480px) {
  .gqlite-logo-punk span {
    text-shadow: 
      1px 1px 0px #000,
      2px 2px 0px var(--punk-color);
  }
}