@keyframes fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes progress {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes swim {
  from { left: -2rem; }
  to   { left: calc(100% - 2rem); }
}

.animate-fadeIn {
  animation: fadeIn .3s ease-out forwards;
}

.animate-progress {
  position: relative;
  overflow: hidden;
}

.animate-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color), var(--color));
  opacity: 0.15;
}

.animate-fish {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: swim 10s linear forwards;
  font-size: 1.5rem;
}