@keyframes rv-up {
  from { opacity: 0; transform: translateY(var(--rv-y, 14px)); }
  to { opacity: 1; transform: none; }
}

@keyframes rv-left {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes eq-bar {
  0% { transform: scaleY(0.4); }
  25% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
  75% { transform: scaleY(0.9); }
  100% { transform: scaleY(0.5); }
}

.rv {
  animation: rv-up var(--rv-dur, 0.35s) cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0s) backwards;
}

.rv-left {
  animation: rv-left 0.3s cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0s) backwards;
}

.card-hover {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
}

.eq-bar {
  animation: eq-bar var(--eq-dur, 2.2s) ease-in-out var(--eq-delay, 0s) infinite;
  transform-origin: bottom;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .rv,
  html:not(.force-motion) .rv-left,
  html:not(.force-motion) .eq-bar {
    animation: none !important;
  }
  html:not(.force-motion) .card-hover,
  html:not(.force-motion) .card-hover:hover {
    transition: none;
    transform: none;
  }
}

html.force-still .rv,
html.force-still .rv-left,
html.force-still .eq-bar {
  animation: none !important;
}

html.force-still .card-hover,
html.force-still .card-hover:hover {
  transition: none;
  transform: none;
}