/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pop-check {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes highlight-sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero__headline,
.hero__copy,
.hero__ctas {
  animation: fade-up 1s var(--ease-out) both;
}
.hero__copy { animation-delay: 0.12s; }
.hero__ctas { animation-delay: 0.24s; }
.hero__vinyl-wrap { animation: fade-in 1.4s var(--ease-out) both; animation-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .vinyl { animation: none; }
  .hero__headline, .hero__copy, .hero__ctas, .hero__vinyl-wrap {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.record-card__add.is-added svg,
.record-card__add.is-added span {
  animation: pop-check 0.4s var(--ease-out);
}