/* ============================================================
   PREMIUM ANIMATIONS — KCI Super MART
   Lightweight keyframes + utility classes
   ============================================================ */

/* ---- Scroll Reveal Base States ---- */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--pm-transition-slow, 400ms ease),
              transform var(--pm-transition-slow, 400ms ease);
}
[data-reveal].revealed { opacity: 1; transform: none !important; }

[data-reveal="fade-up"],
[data-reveal=""] { transform: translateY(32px); }
[data-reveal="fade-down"] { transform: translateY(-32px); }
[data-reveal="fade-left"] { transform: translateX(40px); }
[data-reveal="fade-right"] { transform: translateX(-40px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="fade"] { transform: none; }

/* ---- Keyframe Library ---- */
@keyframes pm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pm-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pm-fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pm-fade-left {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pm-fade-right {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pm-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes pm-slide-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes pm-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pm-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
@keyframes pm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pm-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes pm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes pm-count-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes pm-hero-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pm-badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---- Animation Utility Classes ---- */
.pm-animate-fade-in     { animation: pm-fade-in 0.5s ease both; }
.pm-animate-fade-up     { animation: pm-fade-up 0.5s ease both; }
.pm-animate-fade-down   { animation: pm-fade-down 0.5s ease both; }
.pm-animate-fade-left   { animation: pm-fade-left 0.5s ease both; }
.pm-animate-fade-right  { animation: pm-fade-right 0.5s ease both; }
.pm-animate-scale-in    { animation: pm-scale-in 0.4s ease both; }
.pm-animate-slide-up    { animation: pm-slide-up 0.4s ease both; }
.pm-animate-bounce      { animation: pm-bounce 2s ease-in-out infinite; }
.pm-animate-float       { animation: pm-float 3.5s ease-in-out infinite; }
.pm-animate-pulse       { animation: pm-pulse 2s ease-in-out infinite; }
.pm-animate-spin        { animation: pm-spin 1s linear infinite; }

/* Stagger delays for grid children */
.pm-stagger > *:nth-child(1)  { transition-delay: 0ms; animation-delay: 0ms; }
.pm-stagger > *:nth-child(2)  { transition-delay: 60ms; animation-delay: 60ms; }
.pm-stagger > *:nth-child(3)  { transition-delay: 120ms; animation-delay: 120ms; }
.pm-stagger > *:nth-child(4)  { transition-delay: 180ms; animation-delay: 180ms; }
.pm-stagger > *:nth-child(5)  { transition-delay: 240ms; animation-delay: 240ms; }
.pm-stagger > *:nth-child(6)  { transition-delay: 300ms; animation-delay: 300ms; }
.pm-stagger > *:nth-child(7)  { transition-delay: 360ms; animation-delay: 360ms; }
.pm-stagger > *:nth-child(8)  { transition-delay: 420ms; animation-delay: 420ms; }
.pm-stagger > *:nth-child(9)  { transition-delay: 480ms; animation-delay: 480ms; }
.pm-stagger > *:nth-child(10) { transition-delay: 540ms; animation-delay: 540ms; }
.pm-stagger > *:nth-child(11) { transition-delay: 600ms; animation-delay: 600ms; }
.pm-stagger > *:nth-child(12) { transition-delay: 660ms; animation-delay: 660ms; }

/* ---- Hover Effects ---- */
.pm-hover-lift { transition: transform var(--pm-transition-base, 250ms ease), box-shadow var(--pm-transition-base, 250ms ease); }
.pm-hover-lift:hover { transform: translateY(-5px); box-shadow: var(--pm-shadow-lg, 0 20px 40px rgba(12,110,88,0.12)); }

.pm-hover-glow { transition: box-shadow var(--pm-transition-base, 250ms ease); }
.pm-hover-glow:hover { box-shadow: 0 0 0 4px rgba(12,110,88,0.12), var(--pm-shadow-md, 0 8px 24px rgba(0,0,0,0.08)); }

.pm-hover-scale { transition: transform var(--pm-transition-base, 250ms ease); }
.pm-hover-scale:hover { transform: scale(1.03); }

.pm-hover-bright { transition: filter var(--pm-transition-fast, 150ms ease); }
.pm-hover-bright:hover { filter: brightness(1.08); }

/* ---- Button Micro-Interactions ---- */
.pm-btn-press { transition: transform 80ms ease, box-shadow 80ms ease; }
.pm-btn-press:active { transform: scale(0.97); box-shadow: none; }

/* Ripple effect container */
.pm-ripple { position: relative; overflow: hidden; }
.pm-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.pm-ripple:active::after { opacity: 1; transition: none; }

/* ---- Skeleton / Loading ---- */
.pm-skeleton {
  background: linear-gradient(90deg, #eef2ea 25%, #f5f8f1 37%, #eef2ea 63%);
  background-size: 200% 100%;
  animation: pm-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--pm-radius-md, 10px);
}
.pm-skeleton-text  { height: 14px; margin-bottom: 10px; border-radius: 6px; }
.pm-skeleton-title { height: 22px; width: 60%; margin-bottom: 14px; border-radius: 8px; }
.pm-skeleton-image { aspect-ratio: 4/3; border-radius: var(--pm-radius-lg, 16px); }
.pm-skeleton-card  { height: 280px; border-radius: var(--pm-radius-lg, 16px); }
.pm-skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }

/* ---- Image Loading ---- */
img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; }
img[loading="lazy"].loaded,
img[loading="lazy"]:not([data-src]) { opacity: 1; }
/* Fallback: always show images after a delay even without JS */
@supports (content-visibility: auto) {
  img[loading="lazy"] { opacity: 1; }
}

/* ---- Toast / Notification Animation ---- */
.pm-toast-enter { animation: pm-slide-up 0.35s ease both, pm-fade-in 0.35s ease both; }
.pm-toast-exit  { animation: pm-fade-in 0.25s ease reverse both; }

/* ---- Modal Animation ---- */
.pm-modal-enter { animation: pm-scale-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
.pm-modal-backdrop-enter { animation: pm-fade-in 0.25s ease both; }

/* ---- Menu / Dropdown ---- */
.pm-dropdown-enter {
  animation: pm-fade-down 0.2s ease both;
  transform-origin: top center;
}

/* ---- Accordion Smooth ---- */
.pm-accordion summary { cursor: pointer; transition: color var(--pm-transition-fast, 150ms); }
.pm-accordion summary:hover { color: var(--pm-primary, #0C6E58); }
.pm-accordion[open] summary { color: var(--pm-primary, #0C6E58); }
.pm-accordion .pm-accordion-content {
  overflow: hidden;
  animation: pm-fade-up 0.3s ease both;
}
.pm-accordion summary::marker { content: ''; }
.pm-accordion summary::after {
  content: '+';
  font-size: 1.3em;
  font-weight: 300;
  margin-left: auto;
  transition: transform var(--pm-transition-base, 250ms ease);
}
.pm-accordion[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}

/* ---- Counter Animation ---- */
[data-count-to] { display: inline-block; }
[data-count-to].counting { animation: pm-count-pulse 0.2s ease; }

/* ---- Cart Badge Pop ---- */
.pm-badge-animate { animation: pm-badge-pop 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* ---- Page Loader ---- */
.pm-page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--pm-bg, #F8FAF7);
  transition: opacity 0.4s ease;
}
.pm-page-loader.hide { opacity: 0; pointer-events: none; }
.pm-page-loader::after {
  content: '';
  width: 36px; height: 36px;
  border: 3px solid var(--pm-border, #E2E8DD);
  border-top-color: var(--pm-primary, #0C6E58);
  border-radius: 50%;
  animation: pm-spin 0.7s linear infinite;
}

/* ---- Decorative Shape Animations ---- */
.pm-shape-float-1 { animation: pm-float 4s ease-in-out infinite; }
.pm-shape-float-2 { animation: pm-float 5s ease-in-out infinite 1s; }
.pm-shape-float-3 { animation: pm-float 6s ease-in-out infinite 2s; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .pm-skeleton { animation: none; background: #eef2ea; }
  img[loading="lazy"] { opacity: 1; }
}