/* ==========================================================================
   MERIDIAN — Animations & motion
   ========================================================================== */

@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn{
  from{ opacity: 0; } to{ opacity: 1; }
}
@keyframes scaleIn{
  from{ opacity: 0; transform: scale(0.94); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes skeleton-loading{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0 50%; }
}
@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes toastIn{
  from{ opacity: 0; transform: translateX(24px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes toastOut{
  from{ opacity: 1; transform: translateX(0); }
  to{ opacity: 0; transform: translateX(24px); }
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}
@keyframes badgePop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.35); }
  100%{ transform: scale(1); }
}

/* Entrance reveal — toggled by ui.js via IntersectionObserver */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

.hero-copy{ animation: fadeInUp 700ms var(--ease) both; }
.hero-visual{ animation: fadeInUp 800ms var(--ease) 120ms both; }
.hero-badge-card{ animation: fadeInUp 900ms var(--ease) 300ms both; }
.hero-dot-grid{ animation: floatY 6s ease-in-out infinite; }

.icon-badge.is-bumped{ animation: badgePop 420ms var(--ease); }

.cart-toast{
  animation: toastIn 260ms var(--ease) both;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-sm) var(--sp-md);
  display: flex; align-items: center; gap: var(--sp-sm);
  min-width: 280px; max-width: 340px;
}
.cart-toast.is-leaving{ animation: toastOut 220ms var(--ease) both; }
.cart-toast i{ color: var(--color-success); font-size: 1.1rem; }
.cart-toast strong{ display: block; font-size: var(--fs-sm); }
.cart-toast span{ font-size: var(--fs-xs); color: var(--color-text-muted); }

.spinner{
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--color-border); border-top-color: var(--color-accent);
  animation: spin 700ms linear infinite; display: inline-block;
}
.spinner-lg{ width: 34px; height: 34px; border-width: 3px; }

@media (prefers-reduced-motion: reduce){
  .hero-dot-grid{ animation: none; }
}