/* Lo-Fi Valley - Shared Styles */

/* Base Body Gradient */

body {
  background: linear-gradient(
    135deg,
    #4a3c2f 0%,
    #3a4f5c 35%,
    #8b7ba8 70%,
    #6b5444 100%
  );
  background-attachment: fixed;
  min-height: 100vh;
}

/* Glass Morphism Effect */
.glass {
  background: rgba(255, 248, 240, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 248, 240, 0.15);
}

/* Floating Animation - Cartoon Bounce */
.floating {
  animation: bounce 8s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-12px) rotate(-8deg) scale(1.15);
  }
  50% {
    transform: translateY(-20px) rotate(0deg) scale(1.2);
  }
  75% {
    transform: translateY(-12px) rotate(8deg) scale(1.15);
  }
}

/* Fade In Animation - Subtle Pop */
.fade-in {
  opacity: 0;
  animation: popIn 0.8s ease-out forwards;
}

/* Staggered animation delays */
.fade-in-delay-1 {
  animation-delay: 0.1s;
}
.fade-in-delay-2 {
  animation-delay: 0.3s;
}
.fade-in-delay-3 {
  animation-delay: 0.5s;
}
.fade-in-delay-4 {
  animation-delay: 0.7s;
}
.fade-in-delay-5 {
  animation-delay: 0.9s;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.03);
  }
  80% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Slide Up Animation - CTA Button */
.slide-up {
  opacity: 0;
  animation: slideUp 0.7s ease-out forwards;
  animation-delay: 1.2s;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Letter Pop Animation */
.letter-pop {
  display: inline-block;
  opacity: 0;
  animation: letterPop 0.4s ease-out forwards;
}

.letter-pop-container {
  display: block;
  text-align: center;
}

@keyframes letterPop {
  0% {
    opacity: 0;
    transform: translateX(10px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Volume Slider Styling */
.volume-slider {
  background: linear-gradient(
    to right,
    #b5a5c9 0%,
    #b5a5c9 50%,
    rgba(255, 248, 240, 0.2) 50%,
    rgba(255, 248, 240, 0.2) 100%
  );
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff8f0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff8f0;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Marquee Animation */
.marquee-container {
  width: 140px;
}

.marquee-track {
  display: flex;
  width: fit-content;
  animation: marquee 8s linear infinite;
}

.marquee-text {
  padding-right: 2rem;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Discord Pop Animation */
.discord-pop {
  opacity: 0;
  animation: discordPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: 3.4s; /* Starts after the slogan animation completes */
}

@keyframes discordPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  50% {
    transform: scale(1.15) rotate(10deg);
  }
  75% {
    transform: scale(0.95) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Screen Reader Only (Accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}