/* ============================================================
   EXPRESSIVE NOVA — animations.css
   ============================================================ */

/* ── Keyframes ── */

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

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

@keyframes clipUp {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

@keyframes cartBadgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes cartSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

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

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

@keyframes bounceIn {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Scroll reveal ── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity  650ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 650ms cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity  550ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 550ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clip-reveal.is-visible {
  clip-path: inset(0 0 0% 0);
}

/* ── Hero entry ── */
.hero-animate { animation: fadeUp 800ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.hero-animate-1 { animation-delay: 0ms; }
.hero-animate-2 { animation-delay: 100ms; }
.hero-animate-3 { animation-delay: 200ms; }
.hero-animate-4 { animation-delay: 320ms; }
.hero-animate-mosaic { animation: fadeIn 1000ms ease 400ms both; }

/* ── Cart badge pop ── */
.badge-pop {
  animation: cartBadgePop 350ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ── Skeleton shimmer (loading state) ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .clip-reveal {
    transition: opacity 300ms ease;
    transform: none;
    clip-path: none;
  }
  .clip-reveal.is-visible { clip-path: none; }
  .hero-animate { animation: fadeIn 400ms ease both; }
  .marquee-track { animation: none; }
}