/* GQLite.com Logo Base Styles */

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

/* Base styles for the logo container */
.gqlite-logo {
  font-family: 'Fredoka One', 'Bebas Neue', 'Poppins', cursive, sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: -1px;
  background-size: 200% 200%;
  animation: pulse 4s ease-in-out infinite, float 6s ease-in-out infinite;
}

/* Tertiary colors on the RGB color wheel - evenly spaced */
/* Enhanced 3D text effects using text shadows with HSL calculations */
.gqlite-logo span:nth-child(1) {
  /* G - Red-Yellow tertiary color */
  color: rgb(255, 140, 0);
  --hue: 30;
  text-shadow:
    1px 1px 0px hsl(30, 100%, 60%),
    2px 2px 0px hsl(30, 100%, 40%),
    3px 3px 0px hsl(30, 100%, 30%),
    4px 4px 0px hsl(30, 100%, 20%),
    5px 5px 0px hsl(30, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(2) {
  /* Q - Yellow-Green tertiary color */
  color: rgb(140, 255, 0);
  --hue: 90;
  text-shadow:
    1px 1px 0px hsl(90, 100%, 60%),
    2px 2px 0px hsl(90, 100%, 40%),
    3px 3px 0px hsl(90, 100%, 30%),
    4px 4px 0px hsl(90, 100%, 20%),
    5px 5px 0px hsl(90, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(3) {
  /* L - Green-Cyan tertiary color */
  color: rgb(0, 255, 140);
  --hue: 150;
  text-shadow:
    1px 1px 0px hsl(150, 100%, 60%),
    2px 2px 0px hsl(150, 100%, 40%),
    3px 3px 0px hsl(150, 100%, 30%),
    4px 4px 0px hsl(150, 100%, 20%),
    5px 5px 0px hsl(150, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(4) {
  /* I - Cyan-Blue tertiary color */
  color: rgb(0, 140, 255);
  --hue: 210;
  text-shadow:
    1px 1px 0px hsl(210, 100%, 60%),
    2px 2px 0px hsl(210, 100%, 40%),
    3px 3px 0px hsl(210, 100%, 30%),
    4px 4px 0px hsl(210, 100%, 20%),
    5px 5px 0px hsl(210, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(5) {
  /* T - Blue-Purple tertiary color */
  color: rgb(140, 0, 255);
  --hue: 270;
  text-shadow:
    1px 1px 0px hsl(270, 100%, 60%),
    2px 2px 0px hsl(270, 100%, 40%),
    3px 3px 0px hsl(270, 100%, 30%),
    4px 4px 0px hsl(270, 100%, 20%),
    5px 5px 0px hsl(270, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(6) {
  /* E - Purple-Red tertiary color */
  color: rgb(255, 0, 140);
  --hue: 330;
  text-shadow:
    1px 1px 0px hsl(330, 100%, 60%),
    2px 2px 0px hsl(330, 100%, 40%),
    3px 3px 0px hsl(330, 100%, 30%),
    4px 4px 0px hsl(330, 100%, 20%),
    5px 5px 0px hsl(330, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(7) {
  /* . - Red-Yellow tertiary color (repeating pattern) */
  color: rgb(255, 140, 0);
  --hue: 30;
  text-shadow:
    1px 1px 0px hsl(30, 100%, 60%),
    2px 2px 0px hsl(30, 100%, 40%),
    3px 3px 0px hsl(30, 100%, 30%),
    4px 4px 0px hsl(30, 100%, 20%),
    5px 5px 0px hsl(30, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(8) {
  /* C - Yellow-Green tertiary color (repeating pattern) */
  color: rgb(140, 255, 0);
  --hue: 90;
  text-shadow:
    1px 1px 0px hsl(90, 100%, 60%),
    2px 2px 0px hsl(90, 100%, 40%),
    3px 3px 0px hsl(90, 100%, 30%),
    4px 4px 0px hsl(90, 100%, 20%),
    5px 5px 0px hsl(90, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(9) {
  /* O - Green-Cyan tertiary color (repeating pattern) */
  color: rgb(0, 255, 140);
  --hue: 150;
  text-shadow:
    1px 1px 0px hsl(150, 100%, 60%),
    2px 2px 0px hsl(150, 100%, 40%),
    3px 3px 0px hsl(150, 100%, 30%),
    4px 4px 0px hsl(150, 100%, 20%),
    5px 5px 0px hsl(150, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

.gqlite-logo span:nth-child(10) {
  /* M - Cyan-Blue tertiary color (repeating pattern) */
  color: rgb(0, 140, 255);
  --hue: 210;
  text-shadow:
    1px 1px 0px hsl(210, 100%, 60%),
    2px 2px 0px hsl(210, 100%, 40%),
    3px 3px 0px hsl(210, 100%, 30%),
    4px 4px 0px hsl(210, 100%, 20%),
    5px 5px 0px hsl(210, 100%, 10%),
    8px 8px 15px rgba(0, 0, 0, 0.5);
}

/* Hover animation effect for GQLite logo */
.gqlite-logo span {
  display: inline-block;
  transition: transform 0.3s ease, text-shadow 0.3s ease, color 0.3s ease;
  transform-origin: center;
}

.gqlite-logo:hover span {
  transform: translateY(-7px) scale(1.05);
  text-shadow:
    1px 1px 0px currentColor,
    2px 2px 0px hsl(calc(var(--hue, 0) + 20), 100%, 40%),
    3px 3px 0px hsl(calc(var(--hue, 0) + 20), 100%, 30%),
    4px 4px 0px hsl(calc(var(--hue, 0) + 20), 100%, 20%),
    5px 5px 0px hsl(calc(var(--hue, 0) + 20), 100%, 10%),
    10px 10px 20px rgba(0, 0, 0, 0.6);
}

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

/* Animation keyframes for base styles */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

/* Responsive adjustments for base styles */
@media (max-width: 1024px) {
  .gqlite-logo {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .gqlite-logo {
    font-size: 2.5rem;
  }
  
  .gqlite-logo span {
    text-shadow:
      1px 1px 0px hsl(calc(var(--hue, 0) + 20), 100%, 60%),
      2px 2px 0px hsl(calc(var(--hue, 0) + 20), 100%, 40%),
      3px 3px 0px hsl(calc(var(--hue, 0) + 20), 100%, 30%),
      4px 4px 0px hsl(calc(var(--hue, 0) + 20), 100%, 20%),
      5px 5px 10px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 480px) {
  .gqlite-logo {
    font-size: 2rem;
  }
  
  .gqlite-logo span {
    text-shadow:
      1px 1px 0px hsl(calc(var(--hue, 0) + 20), 100%, 60%),
      2px 2px 0px hsl(calc(var(--hue, 0) + 20), 100%, 40%),
      3px 3px 5px rgba(0, 0, 0, 0.4);
  }
}