/* GQLite.com Logo Poster Style */

/* Poster style for GQLite.com - creating a bold, propaganda poster appearance */
.gqlite-logo-poster {
  font-family: 'Bebas Neue', 'Fredoka One', 'Poppins', sans-serif;
  position: relative;
  letter-spacing: 1px;
  background: #FF0000;
  padding: 10px 15px;
  border: 3px solid #000000;
  box-shadow: 5px 5px 0px #000000;
  transform: rotate(-1deg);
}

.gqlite-logo-poster span {
  display: inline-block;
  color: #FFFFFF;
  text-shadow: 
    2px 2px 0px #000000,
    -2px -2px 0px #000000,
    2px -2px 0px #000000,
    -2px 2px 0px #000000;
  position: relative;
  transition: all 0.3s ease;
  animation: poster-vibrate 5s ease-in-out infinite;
}

/* Propaganda poster effect elements */
.gqlite-logo-poster::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.1) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px
  );
  pointer-events: none;
}

/* Star elements for poster style */
.gqlite-logo-poster::after {
  content: '★';
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 24px;
  color: #FFFF00;
  text-shadow: 2px 2px 0px #000000;
  transform: rotate(15deg);
  z-index: 1;
}

/* Hover effect for Poster logo */
.gqlite-logo-poster:hover {
  transform: rotate(0deg) scale(1.03);
}

.gqlite-logo-poster:hover span {
  animation: poster-shake 0.5s ease-in-out infinite;
  text-shadow: 
    3px 3px 0px #000000,
    -3px -3px 0px #000000,
    3px -3px 0px #000000,
    -3px 3px 0px #000000;
}

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

.gqlite-logo-poster:hover::after {
  animation: poster-spin 3s linear infinite;
}

/* Animation keyframes for Poster effects */
@keyframes poster-vibrate {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-1px); }
  75% { transform: translateY(1px); }
}

@keyframes poster-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

@keyframes poster-spin {
  0% { transform: rotate(15deg); }
  100% { transform: rotate(375deg); }
}

/* Responsive adjustments for Poster style */
@media (max-width: 1024px) {
  .gqlite-logo-poster {
    padding: 8px 12px;
    border-width: 2px;
    box-shadow: 4px 4px 0px #000000;
  }
  
  .gqlite-logo-poster 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;
  }
}

@media (max-width: 768px) {
  .gqlite-logo-poster {
    letter-spacing: 0px;
    padding: 6px 10px;
    border-width: 2px;
    box-shadow: 3px 3px 0px #000000;
  }
  
  .gqlite-logo-poster span {
    text-shadow: 
      1px 1px 0px #000000,
      -1px -1px 0px #000000,
      1px -1px 0px #000000,
      -1px 1px 0px #000000;
  }
  
  .gqlite-logo-poster::after {
    font-size: 20px;
    top: -12px;
    right: -12px;
  }
}

@media (max-width: 480px) {
  .gqlite-logo-poster {
    padding: 5px 8px;
    border-width: 1.5px;
    box-shadow: 2px 2px 0px #000000;
  }
  
  .gqlite-logo-poster::before {
    display: none;
  }
  
  .gqlite-logo-poster::after {
    font-size: 16px;
    top: -10px;
    right: -10px;
  }
}