:root {
  --timescale: 1; /* Global animation speed multiplier - 1 = normal, 2 = 2x slower, 0.5 = 2x faster */
  --footer-fade-duration: calc(300ms * var(--timescale));
  --footer-slide-duration: calc(900ms * var(--timescale));
  --content-delay: calc(50ms * var(--timescale));
  --search-slide-up-duration: calc(700ms * var(--timescale));
  --search-slide-down-duration: calc(400ms * var(--timescale));
  --content-transition-duration: calc(400ms * var(--timescale));
  --fade-in-duration: calc(400ms * var(--timescale));
  --fade-out-duration: calc(250ms * var(--timescale));
  --dropdown-slide-duration: calc(200ms * var(--timescale));
}

mark {
  background-color: #fed7aa;
  border-radius: 0.25rem;
}

.fade-in { animation: fadeIn var(--fade-in-duration) ease-in-out; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-fade-in {
  animation: fadeIn var(--fade-in-duration) ease-in-out;
}

.content-transition { transition: opacity var(--content-transition-duration) ease-in-out; }
.content-hidden { opacity: 0; }

.footer-fade-transition { transition: opacity var(--footer-fade-duration) ease-out; }
.footer-slide-transition { transition: all var(--footer-slide-duration) ease-out; }

.dropdown-transition {
  transition: all var(--dropdown-slide-duration) ease-out;
}

.dropdown-hidden {
  opacity: 0;
  transform: translateY(-8px);
}

/* Welcome screen styles */
#welcomeScreen {
  animation: fadeIn var(--fade-in-duration) ease-in-out;
}

#favoritesDropdown {
  animation: fadeIn calc(var(--fade-in-duration) * 1.2) ease-in-out 200ms both;
}