/* ==========================================================================
   ANIMATIONS — Delicio 2026 (Performance-first)
   Only interactive/user-triggered animations. Zero scroll-blocking.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page transitions — opacity only (no transform → preserves sticky)
   -------------------------------------------------------------------------- */

.page-enter-right,
.page-enter-left {
  opacity: 0;
  transform: translateY(10px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

.page-exit-left,
.page-exit-right {
  animation: fadeOut 200ms ease forwards;
}


/* --------------------------------------------------------------------------
   Add to cart — bounce + expanding ring (user-triggered only)
   -------------------------------------------------------------------------- */

@keyframes addCartBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes addCartRing {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.35); }
  100% { box-shadow: 0 0 0 18px rgba(var(--color-primary-rgb), 0); }
}

.add-bounce {
  animation: addCartBounce 400ms cubic-bezier(0.16, 1, 0.3, 1),
             addCartRing 600ms ease-out;
}


/* --------------------------------------------------------------------------
   Heart pulse (favorite toggle — user-triggered)
   -------------------------------------------------------------------------- */

@keyframes heartPulse {
  0% { transform: scale(1); }
  15% { transform: scale(1.4); }
  30% { transform: scale(0.85); }
  50% { transform: scale(1.2); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.heart-pulse {
  animation: heartPulse 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* --------------------------------------------------------------------------
   Toast notification — slide up/out
   -------------------------------------------------------------------------- */

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

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

.toast-enter {
  animation: toastSlideIn 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.toast-exit {
  animation: toastSlideOut 200ms ease both;
}


/* --------------------------------------------------------------------------
   Category tab — sliding indicator
   -------------------------------------------------------------------------- */

.toolbar__indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 10px);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: left 350ms cubic-bezier(0.16, 1, 0.3, 1),
              width 250ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  box-shadow: 0 2px 12px rgba(249, 115, 22, 0.3);
  pointer-events: none;
}

.toolbar__tab--active {
  color: #fff;
  background: transparent !important;
  border-color: transparent !important;
}


/* --------------------------------------------------------------------------
   Sticky cart — entrance/exit
   -------------------------------------------------------------------------- */

@keyframes stickyCartIn {
  from { transform: translateX(-50%) translateY(100%); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes stickyCartOut {
  to { transform: translateX(-50%) translateY(100%); opacity: 0; }
}

.sticky-cart-enter {
  animation: stickyCartIn 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sticky-cart-exit {
  animation: stickyCartOut 250ms ease both;
}


/* --------------------------------------------------------------------------
   Banner shimmer (lightweight, GPU-composited)
   -------------------------------------------------------------------------- */

@keyframes bannerShimmer {
  0% { background-position: 300% 0; }
  40%, 100% { background-position: -100% 0; }
}

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

.promo-banner__badge {
  animation: badgeIn 400ms 150ms ease both;
}


/* --------------------------------------------------------------------------
   Cart badge bounce (user-triggered)
   -------------------------------------------------------------------------- */

@keyframes badgeBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.badge-bounce {
  animation: badgeBounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* --------------------------------------------------------------------------
   Cart item removal (user-triggered)
   -------------------------------------------------------------------------- */

@keyframes cartItemRemove {
  to { opacity: 0; transform: translateX(30px) scale(0.9); max-height: 0; padding: 0; margin: 0; }
}

.cart-item--removing {
  animation: cartItemRemove 300ms ease forwards;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   Checkout success screen (one-time, after order)
   -------------------------------------------------------------------------- */

@keyframes scaleInBounce {
  0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.scale-in {
  animation: scaleInBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}


/* --------------------------------------------------------------------------
   Scroll hide utility
   -------------------------------------------------------------------------- */

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}


/* --------------------------------------------------------------------------
   Product image tap zoom (user-triggered, no jank)
   -------------------------------------------------------------------------- */

.product-card__img-wrap img {
  transition: transform 300ms ease;
}

.product-card:active .product-card__img-wrap img {
  transform: scale(1.05);
}


/* --------------------------------------------------------------------------
   Bonus card shimmer (profile page only, lightweight)
   -------------------------------------------------------------------------- */

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

.profile-bonus {
  position: relative;
  overflow: hidden;
}

.profile-bonus::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  border-radius: inherit;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Quantity value pop animation
   -------------------------------------------------------------------------- */

@keyframes qtyPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.qty-pop {
  animation: qtyPop 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* --------------------------------------------------------------------------
   AI Recommendations — entrance animations
   -------------------------------------------------------------------------- */

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

.ai-fade-in {
  animation: aiFadeIn 400ms ease both;
}

@keyframes aiPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.3); }
  50% { transform: scale(1.05); box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.45); }
}

.ai-pulse {
  animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiComboIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-combo {
  animation: aiComboIn 350ms ease both;
}


/* Slide up (for review modal) */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}


/* --------------------------------------------------------------------------
   Product card staggered fade-in-up
   -------------------------------------------------------------------------- */

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

.fade-in-up {
  animation: fadeInUp 0.35s ease forwards;
  opacity: 0;
}

.stagger-1  { animation-delay: 0.05s; }
.stagger-2  { animation-delay: 0.10s; }
.stagger-3  { animation-delay: 0.15s; }
.stagger-4  { animation-delay: 0.20s; }
.stagger-5  { animation-delay: 0.25s; }
.stagger-6  { animation-delay: 0.30s; }
.stagger-7  { animation-delay: 0.35s; }
.stagger-8  { animation-delay: 0.40s; }
.stagger-9  { animation-delay: 0.45s; }
.stagger-10 { animation-delay: 0.50s; }


/* --------------------------------------------------------------------------
   Menu section fade-in (category switch)
   -------------------------------------------------------------------------- */

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

.section-fade-in {
  animation: sectionFadeIn 0.3s ease forwards;
}