/* Ladivelle Accents :: frontend\css\animations.css */
/* ============================================================
   Ladivelle Accents LLC - Animations
   Subtle motion for cards, transitions, and micro-interactions.
   Respects prefers-reduced-motion for accessibility.
   ============================================================ */

/* ---------- Entrance ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-left {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- Utility classes ---------- */
.anim-fade-up    { animation: fade-up var(--dur-slow) var(--ease) both; }
.anim-fade-down  { animation: fade-down var(--dur-slow) var(--ease) both; }
.anim-fade-left  { animation: fade-left var(--dur-slow) var(--ease) both; }
.anim-fade-right { animation: fade-right var(--dur-slow) var(--ease) both; }
.anim-pop        { animation: pop-in var(--dur-slow) var(--ease) both; }

/* Stagger delays for grids */
.anim-delay-1 { animation-delay: 50ms; }
.anim-delay-2 { animation-delay: 100ms; }
.anim-delay-3 { animation-delay: 150ms; }
.anim-delay-4 { animation-delay: 200ms; }
.anim-delay-5 { animation-delay: 250ms; }
.anim-delay-6 { animation-delay: 300ms; }

/* ---------- Hover micro-interactions ---------- */
.hover-lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.hover-scale {
  transition: transform var(--dur) var(--ease);
}
.hover-scale:hover { transform: scale(1.03); }
.hover-underline {
  position: relative;
  text-decoration: none;
}
.hover-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Cart badge pulse ---------- */
@keyframes badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.cart-count.is-pulsing {
  animation: badge-pulse 400ms var(--ease);
}

/* ---------- Add-to-cart button success ---------- */
@keyframes check-flash {
  0%   { background: var(--clr-primary); }
  40%  { background: var(--clr-success); }
  100% { background: var(--clr-primary); }
}
.btn.is-success {
  animation: check-flash 800ms var(--ease);
  pointer-events: none;
}

/* ---------- Loading dots ---------- */
@keyframes dots {
  0%, 20%   { content: '.'; }
  40%       { content: '..'; }
  60%, 100% { content: '...'; }
}
.loading-dots::after {
  display: inline-block;
  animation: dots 1.4s steps(3, end) infinite;
  content: '.';
  width: 1em;
  text-align: left;
}

/* ---------- Shake for invalid forms ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.shake { animation: shake 350ms var(--ease); }

/* ---------- Slide-in side panel (future cart drawer) ---------- */
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slide-out-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
.slide-in-right  { animation: slide-in-right var(--dur) var(--ease); }
.slide-out-right { animation: slide-out-right var(--dur) var(--ease) forwards; }

/* ---------- Image zoom on hover (product cards) ---------- */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform var(--dur-slow) var(--ease);
}
.img-zoom:hover img {
  transform: scale(1.06);
}

/* ---------- Scroll-reveal (opt-in via JS) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Accessibility ---------- */
@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;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}