/* =====================================================
   MOONPIZE — animations.css
   ===================================================== */

/* ── Fade In Up (IntersectionObserver trigger) ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ── Fade In Scale ── */
.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Slide In Left ── */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Slide In Right ── */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Hero entrance ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-tag     { animation: heroFadeUp .6s ease .2s both; }
.hero-title   { animation: heroFadeUp .6s ease .35s both; }
.hero-sub     { animation: heroFadeUp .6s ease .5s both; }
.hero-ctas    { animation: heroFadeUp .6s ease .65s both; }
.hero-stats   { animation: heroFadeUp .6s ease .8s both; }

/* ── Pulse (CTA draw attention) ── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, .5); }
  50%       { box-shadow: 0 0 0 12px rgba(211, 47, 47, 0); }
}
.btn-pulse { animation: pulse 2.5s infinite; }

/* ── Spin loader ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 3px solid rgba(211,47,47,.2);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ── Bounce (scroll indicator) ── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.bounce { animation: bounce 1.8s ease-in-out infinite; }

/* ── Float (decorative elements) ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(3deg); }
  66%       { transform: translateY(-4px) rotate(-2deg); }
}
.float { animation: float 5s ease-in-out infinite; }

/* ── Shimmer (skeleton loader) ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Slide down (mobile nav) ── */
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.nav-mobile.open { animation: slideDown .3s ease; }

/* ── Cart notification shake ── */
@keyframes cartShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}
.cart-shake { animation: cartShake .4s ease; }

/* ── Toast notification ── */
@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
.toast {
  position: fixed;
  top: calc(80px + env(safe-area-inset-top));
  right: 16px;
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  z-index: 3000;
  animation: toastIn .35s ease;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-lg);
  max-width: min(320px, calc(100vw - 32px));
}
.toast.success { border-left: 4px solid var(--green); }
.toast.error   { border-left: 4px solid var(--red); }
.toast.hiding  { animation: toastOut .35s ease forwards; }

/* ── Counter number animation ── */
@keyframes countUp {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
.count-animate { animation: countUp .4s cubic-bezier(.34,1.56,.64,1); }

/* ── Star rating fill ── */
@keyframes starFill {
  from { transform: scale(0) rotate(-30deg); }
  to   { transform: scale(1) rotate(0deg); }
}
.star-anim { display: inline-block; animation: starFill .3s cubic-bezier(.34,1.56,.64,1) both; }
.star-anim:nth-child(1) { animation-delay: .0s; }
.star-anim:nth-child(2) { animation-delay: .08s; }
.star-anim:nth-child(3) { animation-delay: .16s; }
.star-anim:nth-child(4) { animation-delay: .24s; }
.star-anim:nth-child(5) { animation-delay: .32s; }

/* ── Page transition ── */
.page-fade {
  animation: heroFadeUp .4s ease;
}

/* ── Ripple effect on buttons ── */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: rippleAnim .6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Reduce motion override ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .reveal-left, .reveal-right {
    opacity: 1; transform: none; transition: none;
  }
  .hero-tag, .hero-title, .hero-sub, .hero-ctas, .hero-stats {
    animation: none; opacity: 1;
  }
  .bounce, .float, .spinner, .skeleton { animation: none; }
  .toast { animation: none; }
  .btn-pulse { animation: none; }
}