/* ==========================================================================
   AFRIPIMALL — Premium Animations & Transitions Engine
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. W3C View Transitions API (Chrome 111+, Edge, Safari 18+)
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 100ms cubic-bezier(0.4, 0, 1, 1) both afripimallFadeOut;
}

::view-transition-new(root) {
  animation: 180ms cubic-bezier(0, 0, 0.2, 1) both afripimallFadeIn;
}

@keyframes afripimallFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.996); }
}

@keyframes afripimallFadeIn {
  from { opacity: 0; transform: scale(0.996); }
  to { opacity: 1; transform: scale(1); }
}

/* Smooth Main Content Transitioning */
#app-main-content {
  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#app-main-content.pjax-loading {
  opacity: 0.55;
  transform: translateY(3px);
  pointer-events: none;
}

/* Touch responsiveness: Instant 0ms tap reaction */
a, button, input, select, textarea, .nav-dropdown-item, .category-tile, .product-card-visual, .bottom-nav-item, .customer-sidebar-link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   1. Global Page Progress Bar (Instant, Hardware-Accelerated)
   -------------------------------------------------------------------------- */
#page-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #D97706 0%, #FFA14A 50%, #FFD700 100%);
  background-size: 200% 100%;
  z-index: 999999;
  pointer-events: none;
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.8), 0 0 4px rgba(255, 215, 0, 0.6);
  animation: progressShimmer 1.2s linear infinite;
  transform: translate3d(0, 0, 0);
  will-change: width, opacity;
}

#page-progress-bar.active {
  width: 80%;
}

#page-progress-bar.done {
  width: 100%;
  opacity: 0;
  transition: width 0.08s ease, opacity 0.22s ease 0.08s;
}

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

/* --------------------------------------------------------------------------
   2. Button & Interactive Micro-Interactions
   -------------------------------------------------------------------------- */
.btn-hero-primary,
.btn-hero-secondary,
.btn-add-cart-circle,
.btn-add-cart-full,
.wallet-badge-btn,
.icon-btn,
.category-tile,
.product-modern-card,
.product-item-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-hero-primary:active,
.btn-hero-secondary:active,
.btn-add-cart-circle:active,
.btn-add-cart-full:active {
  transform: scale(0.96) !important;
}

.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border: 2px solid #FFFFFF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpinner 0.7s linear infinite;
}

@keyframes btnSpinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   3. Flying Product to Cart Animation
   -------------------------------------------------------------------------- */
.flying-cart-clone {
  position: fixed;
  z-index: 99999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  background: #FFFFFF;
  padding: 4px;
  border: 2px solid var(--primary);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4);
  pointer-events: none;
  transition: all 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cart-badge-bounce {
  animation: cartBadgePop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cartBadgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); background: #10B981; }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   4. Wishlist Heart Burst Micro-Interaction
   -------------------------------------------------------------------------- */
.product-wishlist-action.burst {
  animation: heartPulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); color: #EF4444; }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   5. Dynamic Toast Notifications
   -------------------------------------------------------------------------- */
#toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 380px;
  width: calc(100% - 3rem);
  pointer-events: none;
}

.toast {
  background: #0D0F12;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0.9rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.25s ease;
}

.toast-success {
  border-left: 4px solid #10B981;
}

.toast-warning {
  border-left: 4px solid #F59E0B;
}

.toast-error {
  border-left: 4px solid #EF4444;
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   6. Stagger & Reveal Helpers
   -------------------------------------------------------------------------- */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
}

.img-zoom-wrap {
  overflow: hidden;
}

.img-zoom-wrap img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-zoom-wrap:hover img {
  transform: scale(1.06);
}

/* Shimmer Skeleton Placeholder */
.skeleton-shimmer {
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: skeletonWave 1.5s infinite;
  border-radius: 8px;
}

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

/* --------------------------------------------------------------------------
   7. Checkout Step Horizontal Transitions
   -------------------------------------------------------------------------- */
.checkout-step-pane {
  display: none;
  animation: stepFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.checkout-step-pane.active {
  display: block;
}

@keyframes stepFadeIn {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   8. Reduced Motion Accessibility Support
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  #page-transition-overlay,
  #page-progress-bar,
  .flying-cart-clone {
    display: none !important;
  }
  
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}