/* ============================================================
   stpCarDeals — animations.css
   Keyframes + scroll-reveal + parallax + micro-interactions
   ============================================================ */

/* ---- Keyframes ------------------------------------------- */
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

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

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

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulseFav {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Scroll-reveal system -------------------------------- */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1);
}

[data-animate="slide-left"] {
  transform: translateX(-20px);
}

[data-animate="slide-right"] {
  transform: translateX(20px);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* ---- Skeleton shimmer ------------------------------------ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ---- Parallax -------------------------------------------- */
.hero-parallax-bg {
  will-change: transform;
}

/* ---- Favourite pulse ------------------------------------- */
.btn-fav.pulse {
  animation: pulseFav .4s ease-out forwards;
}

/* ---- Card hover lift ------------------------------------- */
.car-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.car-card:hover {
  transform: translateY(-3px);
}

/* ---- Alpine x-collapse helper (no plugin) ---------------- */
[x-collapse] {
  overflow: hidden;
  transition: height .25s ease, opacity .25s ease;
}

/* ---- Toast slide-in -------------------------------------- */
.stp-toast {
  animation: fadeUp .3s cubic-bezier(.22,1,.36,1) both;
}

/* ---- Page-level fade-up (first load) --------------------- */
.page-enter {
  animation: fadeUp .4s ease-out both;
}