/* FILE: src/css/style.css */

/*
   FINAL (Corrected & Responsive): Symmetrical Wave Background
   - Uses vh for all vertical sizing and positioning for perfect consistency.
   - Correctly positions waves to frame the content without overlapping.
   - Horizontally centers the waves using calc() for robustness.
*/
body {
  position: relative;
  width: 100%;
  background-color: #f0f4f8;
}

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

/* Base styles shared by ALL waves */
.wave {
  position: absolute;
  border-radius: 45%;
  /* Sizing is now based on viewport height for consistency */
  width: 200vh;
  height: 200vh;
  /* Center the large circle horizontally */
  left: calc(50% - 100vh);
  animation: wave_motion 30s infinite linear;
  will-change: transform;
}

/* --- BOTTOM WAVES --- */
/* Corrected positions to push waves mostly off-screen */
.wave-bottom-1 {
  background: #d8b4fe; /* Lavender */
  bottom: -190vh;
  opacity: 0.3;
  animation-duration: 40s;
}

.wave-bottom-2 {
  background: #a7f3d0; /* Mint Green */
  bottom: -188vh;
  opacity: 0.4;
  animation-duration: 35s;
  animation-direction: reverse;
}

.wave-bottom-3 {
  background: #a3bffa; /* Soft Blue */
  bottom: -186vh;
  opacity: 0.5;
  animation-duration: 30s;
}

.wave-bottom-4 {
  background: #818cf8; /* Deeper Blue */
  bottom: -185vh;
  opacity: 0.6;
  animation-duration: 25s;
  animation-direction: reverse;
}

/* --- TOP WAVES (Mirrored) --- */
.wave-top-1 {
  background: #d8b4fe; /* Lavender */
  top: -190vh; /* Mirrored position */
  opacity: 0.3;
  animation-duration: 40s;
  animation-direction: reverse;
}

.wave-top-2 {
  background: #a7f3d0; /* Mint Green */
  top: -188vh;
  opacity: 0.4;
  animation-duration: 35s;
}

.wave-top-3 {
  background: #a3bffa; /* Soft Blue */
  top: -186vh;
  opacity: 0.5;
  animation-duration: 30s;
  animation-direction: reverse;
}

.wave-top-4 {
  background: #818cf8; /* Deeper Blue */
  top: -185vh;
  opacity: 0.6;
  animation-duration: 25s;
}

@keyframes wave_motion {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ... (rest of your CSS) ... */
/* Answered buttons default style */
.answered-case {
  background-color: #64748b !important; /* slate-500 */
  color: white !important;
}

.answered-case:hover {
  background-color: #475569 !important; /* slate-600 */
}

/* Active question overrides everything with a gradient */
.active-jump-button {
  background-image: linear-gradient(
    to right,
    #6366f1,
    #8b5cf6
  ) !important; /* indigo-500 to violet-500 */
  color: white !important;
  border-color: transparent !important;
}

/* Keyframe animation for the fade-in-up effect */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth screen transitions */
.screen:not(.active) {
  display: none;
}

.screen.active {
  animation: fadeInUp 0.4s ease forwards;
}