/* Shared keyframes and lightweight helper animation classes. */

@keyframes favoritePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 77, 103, 0.45);
  }
  35% {
    transform: scale(1.18);
    box-shadow: 0 0 18px 6px rgba(255, 77, 103, 0.35);
  }
  70% {
    transform: scale(0.96);
    box-shadow: 0 0 8px 3px rgba(99, 102, 241, 0.24);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 77, 103, 0);
  }
}

@keyframes progressGlow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

@keyframes spinButton {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes toastSlideIn {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }
  70% {
    transform: translateX(-6%);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 103, 0.32);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(255, 77, 103, 0);
  }
}

@keyframes rippleExpand {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  80% {
    opacity: 0.25;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes posterSpotlight {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(120%);
  }
}

.movie-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120px 60px at -10% 30%, rgba(255, 255, 255, 0.14), transparent 42%);
  transform: translateX(-120%);
  opacity: 0;
  transition: opacity var(--transition-medium);
  mix-blend-mode: screen;
}

.movie-card:hover .movie-poster::after,
.movie-card:focus .movie-poster::after {
  opacity: 0.8;
  animation: posterSpotlight 1.6s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
  .movie-poster::after {
    display: none;
  }
}

.animate-fade-in {
  animation: fadeInSoft 0.45s ease forwards;
}

.animate-slide-up {
  animation: slideUp 0.5s ease forwards;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease forwards;
}

@keyframes fadeInSoft {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.94);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}