/* GQLite.com Logo Graffiti Style */

/* Importing Google Fonts for hand-drawn appearance */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@800&family=Bebas+Neue&family=Indie+Flower&family=Permanent+Marker&display=swap');

/* Graffiti style for GQLite.com - creating a hand-drawn, street art look */
.gqlite-logo-graffiti {
  font-family: 'Permanent Marker', 'Indie Flower', 'Fredoka One', cursive, sans-serif;
  position: relative;
  transform: skew(-1deg);
  letter-spacing: -1px;
  overflow: visible;
}

.gqlite-logo-graffiti 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;
  transform: rotate(var(--rotate, 0deg)) skew(var(--skew, 0deg));
  transition: all 0.3s ease;
  animation: graffiti-jitter 1s ease-in-out infinite alternate;
}

/* Color for each character - using vibrant graffiti colors */
.gqlite-logo-graffiti span:nth-child(1) { /* G */
  --rotate: -2deg;
  --skew: -1deg;
  color: #ff3e41;
  animation-delay: 0s;
}

.gqlite-logo-graffiti span:nth-child(2) { /* Q */
  --rotate: 1deg;
  --skew: 2deg;
  color: #4ecdc4;
  animation-delay: 0.1s;
}

.gqlite-logo-graffiti span:nth-child(3) { /* L */
  --rotate: -1deg;
  --skew: -2deg;
  color: #ffd166;
  animation-delay: 0.2s;
}

.gqlite-logo-graffiti span:nth-child(4) { /* I */
  --rotate: 2deg;
  --skew: 1deg;
  color: #ef476f;
  animation-delay: 0.3s;
}

.gqlite-logo-graffiti span:nth-child(5) { /* T */
  --rotate: -1deg;
  --skew: -2deg;
  color: #06d6a0;
  animation-delay: 0.4s;
}

.gqlite-logo-graffiti span:nth-child(6) { /* E */
  --rotate: 2deg;
  --skew: 1deg;
  color: #118ab2;
  animation-delay: 0.5s;
}

.gqlite-logo-graffiti span:nth-child(7) { /* . */
  --rotate: -3deg;
  --skew: -1deg;
  color: #073b4c;
  animation-delay: 0.6s;
}

.gqlite-logo-graffiti span:nth-child(8) { /* C */
  --rotate: 1deg;
  --skew: 2deg;
  color: #ff9f1c;
  animation-delay: 0.7s;
}

.gqlite-logo-graffiti span:nth-child(9) { /* O */
  --rotate: -2deg;
  --skew: -1deg;
  color: #e71d36;
  animation-delay: 0.8s;
}

.gqlite-logo-graffiti span:nth-child(10) { /* M */
  --rotate: 1deg;
  --skew: 1deg;
  color: #2ec4b6;
  animation-delay: 0.9s;
}

/* Spray paint effect for letters */
.gqlite-logo-graffiti span::before {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  color: currentColor;
  opacity: 0.5;
  transform: translate(2px, 2px);
  z-index: -1;
  filter: blur(1px);
}

.gqlite-logo-graffiti span::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  color: currentColor;
  opacity: 0.3;
  transform: translate(-2px, -2px);
  z-index: -1;
  filter: blur(1px);
}

/* Hover effect for graffiti logo */
.gqlite-logo-graffiti:hover span {
  transform: rotate(var(--rotate, 0deg)) skew(var(--skew, 0deg)) scale(1.1);
  animation: graffiti-bounce 0.5s ease-in-out infinite alternate;
}

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

/* Animation keyframes for graffiti effects */
@keyframes graffiti-jitter {
  0% { transform: rotate(var(--rotate, 0deg)) skew(var(--skew, 0deg)) translateX(0); }
  100% { transform: rotate(calc(var(--rotate, 0deg) * 1.2)) skew(calc(var(--skew, 0deg) * 1.2)) translateX(1px); }
}

@keyframes graffiti-bounce {
  0% { transform: rotate(var(--rotate, 0deg)) skew(var(--skew, 0deg)) translateY(0); }
  100% { transform: rotate(var(--rotate, 0deg)) skew(var(--skew, 0deg)) translateY(-5px); }
}

/* Responsive adjustments for graffiti style */
@media (max-width: 1024px) {
  .gqlite-logo-graffiti 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-graffiti {
    letter-spacing: -2px;
  }
  
  .gqlite-logo-graffiti 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-graffiti {
    letter-spacing: -2px;
  }
  
  .gqlite-logo-graffiti span::before,
  .gqlite-logo-graffiti span::after {
    display: none;
  }
}