/**
 * Mehta Pansari Luxury — animations.css v3.0
 * Advanced CSS animations: shimmer, pulse, gradient borders,
 * hover effects, loading states, and micro-interactions.
 */

/* ── KEYFRAMES ──────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(201,168,76,0); }
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,40,24,0.3); }
  50%       { box-shadow: 0 0 0 12px rgba(13,40,24,0); }
}

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

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

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

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes borderGlow {
  0%, 100% { border-color: rgba(201,168,76,0.2); }
  50%       { border-color: rgba(201,168,76,0.6); }
}

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

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

/* ── UTILITY ANIMATION CLASSES ──────────────────────────────────── */
.mp-animate-fade-up   { animation: fadeInUp 0.6s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.mp-animate-fade-left { animation: fadeInLeft 0.6s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.mp-animate-fade-right{ animation: fadeInRight 0.6s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.mp-animate-scale-in  { animation: scaleIn 0.5s cubic-bezier(0.25,0.46,0.45,0.94) both; }

/* ── GRADIENT TEXT ──────────────────────────────────────────────── */
.mp-gradient-text {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textGradient 4s ease infinite;
}

/* ── SHIMMER LOADING SKELETON ───────────────────────────────────── */
.mp-skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-sm);
}

/* ── GOLD PULSE BUTTON ──────────────────────────────────────────── */
.mp-btn-pulse-gold {
  animation: pulseGold 2.5s ease-in-out infinite;
}

.mp-btn-pulse-green {
  animation: pulseGreen 2.5s ease-in-out infinite;
}

/* ── ANIMATED GRADIENT BORDER ───────────────────────────────────── */
.mp-gradient-border {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
}

.mp-gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-500), var(--green-500), var(--gold-300));
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  z-index: -1;
}

/* ── HOVER LIFT ─────────────────────────────────────────────────── */
.mp-hover-lift {
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}

.mp-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}

/* ── HOVER GLOW ─────────────────────────────────────────────────── */
.mp-hover-glow-gold:hover {
  box-shadow: 0 0 20px rgba(201,168,76,0.35), 0 4px 20px rgba(0,0,0,0.10);
}

.mp-hover-glow-green:hover {
  box-shadow: 0 0 20px rgba(13,40,24,0.25), 0 4px 20px rgba(0,0,0,0.10);
}

/* ── FOCUS RING ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── WOOCOMMERCE LOADING SPINNER ────────────────────────────────── */
.woocommerce .blockUI.blockOverlay::before,
.woocommerce-cart-form .blockUI.blockOverlay::before {
  background-color: var(--green-800) !important;
}

/* ── PRODUCT IMAGE ZOOM ─────────────────────────────────────────── */
.woocommerce div.product .woocommerce-product-gallery__image {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.woocommerce div.product .woocommerce-product-gallery__image img {
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}

.woocommerce div.product .woocommerce-product-gallery__image:hover img {
  transform: scale(1.04) !important;
}

/* ── CART ICON BOUNCE ───────────────────────────────────────────── */
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

.added_to_cart_notification {
  animation: cartBounce 0.4s ease;
}

/* ── WOOCOMMERCE NOTICES ─────────────────────────────────────────── */
.woocommerce-message {
  animation: slideDown 0.4s ease;
}

/* ── MOBILE MENU ANIMATION ──────────────────────────────────────── */
.ast-mobile-menu-open .ast-mobile-header-wrap {
  animation: slideDown 0.3s ease;
}

/* ── HERO TITLE WORD ANIMATION ──────────────────────────────────── */
.mp-hero-title .mp-hero-title-accent {
  position: relative;
  display: inline-block;
}

.mp-hero-title .mp-hero-title-accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.25,0.46,0.45,0.94) 1.5s;
}

.mp-loader-hidden ~ * .mp-hero-title .mp-hero-title-accent::after,
.mp-hero-title .mp-hero-title-accent.mp-revealed::after {
  width: 100%;
}

/* ── PRODUCT CARD BADGE ANIMATION ───────────────────────────────── */
.woocommerce ul.products li.product .onsale {
  animation: scaleIn 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}

/* ── ANNOUNCEMENT BAR GRADIENT ──────────────────────────────────── */
.mp-announcement-bar {
  background: linear-gradient(90deg,
    var(--green-800) 0%,
    var(--green-700) 25%,
    var(--green-600) 50%,
    var(--green-700) 75%,
    var(--green-800) 100%
  );
  background-size: 300% 100%;
  animation: gradientShift 6s ease infinite;
}

/* ── DIVIDER ANIMATION ──────────────────────────────────────────── */
.mp-divider {
  transform-origin: left;
  transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── TRUST BADGE HOVER ──────────────────────────────────────────── */
.mp-product-trust-badge {
  transition: transform 0.2s ease;
}

.mp-product-trust-badge:hover {
  transform: translateY(-2px);
}

/* ── FOOTER LINK HOVER ──────────────────────────────────────────── */
.mp-footer-links a {
  position: relative;
}

.mp-footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 1.2rem;
  width: 0;
  height: 1px;
  background: var(--gold-400);
  transition: width 0.3s ease;
}

.mp-footer-links a:hover::after {
  width: calc(100% - 1.2rem);
}

/* ── STAT CARD HOVER ────────────────────────────────────────────── */
.mp-stat-card {
  transition: background 0.3s ease, transform 0.3s ease;
}

.mp-stat-card:hover {
  transform: translateY(-2px);
}

/* ── WHY ITEM ICON HOVER ────────────────────────────────────────── */
.mp-why-item-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mp-why-item:hover .mp-why-item-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 8px 25px rgba(13,40,24,0.35);
}

/* ── TESTIMONIAL QUOTE MARK ─────────────────────────────────────── */
.mp-testimonial-card::before {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mp-testimonial-card:hover::before {
  opacity: 0.4;
  transform: scale(1.1);
}

/* ── HEALING CARD FLOAT ANIMATION ───────────────────────────────── */
.mp-healing-card-float {
  animation: floatCard 4s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── CTA SECTION GLOW ───────────────────────────────────────────── */
.mp-cta-section {
  position: relative;
}

.mp-cta-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: pulseGold 4s ease-in-out infinite;
}

/* ── SCROLL SNAP FOR MOBILE PRODUCTS ────────────────────────────── */
@media (max-width: 640px) {
  .woocommerce ul.products {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    grid-template-columns: repeat(2, calc(50% - 0.75rem)) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .woocommerce ul.products::-webkit-scrollbar {
    display: none;
  }

  .woocommerce ul.products li.product {
    scroll-snap-align: start;
  }
}

/* ── PRINT STYLES ───────────────────────────────────────────────── */
@media print {
  .mp-announcement-bar,
  #mp-loader,
  #mp-scroll-progress,
  #mp-back-to-top,
  .mp-sticky-cart,
  .mp-page-transition {
    display: none !important;
  }
}