body {
  font-family: "Geist", sans-serif;
  touch-action: manipulation;
  font-optical-sizing: auto;
  /* Prevents double-tap zoom on mobile */
}

@font-face {
  font-family: "FK Raster Grotesk Blended";
  src: url("assets/FKRasterGrotesk-Blended.otf") format("opentype");
}

.font-display {
  font-family: "FK Raster Grotesk Blended", sans-serif;
}

/* Custom scrollbar for better aesthetics */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #2e3169;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #aeb8fb;
  border-radius: 4px;
}

#toast-notification {
  /* Re-added for error messages */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Custom styles for the color slider */
.color-slider-custom {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 28px;
  /* Matched slider height to knob height */
  /* A full hue spectrum gradient */
  background: linear-gradient(
    to right,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

/* Thumb for Webkit browsers (Chrome, Safari) */
.color-slider-custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  width: 28px;
  /* Use a CSS variable for the fill color, with white as a fallback */
  background-color: var(--thumb-color, #fff);
  border-radius: 50%;
  border: 3px solid white;
  /* White stroke */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  margin-top: 0;
  /* Center the knob on the equally tall track */
}

/* Thumb for Firefox */
.color-slider-custom::-moz-range-thumb {
  height: 28px;
  width: 28px;
  background-color: var(--thumb-color, #fff);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Custom spinner styles */
.gradient-spinner {
  width: 32px;
  /* Increased size for better visibility */
  height: 32px;
  background-image: url("assets/loader.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner for search results */
.search-loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  /* Matches mt-8 from previous text */
}

.search-loading-indicator .gradient-spinner {
  width: 48px;
  /* Slightly larger */
  height: 48px;
}

@keyframes slow-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

#search-background-element {
  /* Apply both animations simultaneously */
  animation: slow-rotate 80s linear infinite,
    pulsate 15s ease-in-out infinite;
}

/* Progress ring for song previews */
.progress-ring__circle {
  stroke-dasharray: 72; /* Perimeter of an 18x18 square: 18 * 4 = 72 */
  stroke-dashoffset: 72; /* Start with a full offset (invisible) */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.2s linear; /* Smooth updates */
}

/* Darken overlay when playing */
.is-playing .play-pause-btn {
  background-color: rgba(0, 0, 0, 0.6); /* Equivalent to bg-black/60 */
}

@keyframes pulse-accent {
  0%,
  100% {
    background-color: #2e3169; /* brand-fg */
  }
  50% {
    background-color: #473dd7; /* brand-accent */
  }
}

.pulse-once {
  animation: pulse-accent 1s ease-out;
}

@keyframes pulse-red {
  0%, 100% {
    background-color: #2E3169; /* brand-fg */
  }
  50% {
    background-color: #CE4148; /* A warning red */
  }
}

.pulse-limit {
  animation: pulse-red 0.5s ease-in-out;
}

@keyframes fade-out-remove {
  to {
    opacity: 0;
    transform: scale(0.95);
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
  }
}

.removing {
  animation: fade-out-remove 0.3s ease-out forwards;
}

/* Scaling Animations (Faster) */
@keyframes scale1 { from { transform: scale(0.85); } to { transform: scale(1.25); } }
@keyframes scale2 { from { transform: scale(1.15); } to { transform: scale(0.75); } }
@keyframes scale3 { from { transform: scale(0.9); } to { transform: scale(1.1); } }

@keyframes color-cycle {
  0%,
  100% {
    background-color: #2dc5ad;
  }
  33% { background-color: #368be9; }
  66% { background-color: #c248ff; }
}

/* --- Search Container Transition --- */
#search-container.is-active {
  top: 1rem; /* Equivalent to Tailwind's top-4 */
  left: 1rem; /* Equivalent to Tailwind's p-4 on the search screen */
  right: 1rem; /* Equivalent to Tailwind's p-4 on the search screen */
  bottom: auto;
}

/* New class to handle the exit animation */
#search-container.is-exiting {
  transform: translateY(-150%);
  opacity: 0;
}

/* --- Animated SVG Gradient Border --- */
#search-border-svg rect {
  /* Perimeter of a rounded rect: ~2*(w+h) - 2*PI*r + 2*PI*r = 2*(w+h).
     For a 100% width/height rect, a safe large value works well.
     Let's use a large number that will definitely cover it. */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  /* Combine transitions for smoother effect */
  transition: stroke-dashoffset 0.5s ease-in-out, fill 0.3s ease-in-out;
}

#search-container:focus-within #search-border-svg rect {
  stroke-dashoffset: 0;
}

/* --- Mood Screen --- */
#mood-knob {
  transition: top 0.2s ease-out, left 0.2s ease-out;
}

/* --- Mood Screen --- */
.mood-label {
  position: absolute;
  font-family: "Geist", sans-serif;
  color: #AEB8FB; /* text-brand-light */
  opacity: 0.6;
  font-size: 0.75rem; /* text-xs */
}

.mood-line-h, .mood-line-v {
  position: absolute;
  opacity: 0.5;
  background-color: transparent; /* Remove solid color */
}

.mood-line-h {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px; /* Made the line thicker */
  transform: translateY(-50%);
  /* Create a dashed line with a repeating gradient */
  background-image: repeating-linear-gradient(to right, #16183A 0, #16183A 6px, transparent 6px, transparent 14px);
}

.mood-line-v {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px; /* Made the line thicker */
  transform: translateX(-50%);
  /* Create a dashed line with a repeating gradient */
  background-image: repeating-linear-gradient(to bottom, #16183A 0, #16183A 6px, transparent 6px, transparent 14px);
}

/* --- Button Reset --- */