/* =============================================================================
   MINILOOM — ANIMATIONS.CSS
   Scroll-triggered fade-ups, parallax utilities, hover transitions,
   skeleton loaders, page transitions.
   ============================================================================= */

/* ── 1. FADE-UP SCROLL ANIMATION ─────────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate="fade-up"]   { transform: translateY(28px); }
[data-animate="fade-down"] { transform: translateY(-28px); }
[data-animate="fade-left"] { transform: translateX(28px); }
[data-animate="fade-right"]{ transform: translateX(-28px); }
[data-animate="zoom-in"]   { transform: scale(0.92); }
[data-animate="float"]     { opacity: 0; animation: none; }
[data-animate="float"].is-visible { opacity: 1; animation: float-badge 3s ease-in-out infinite; }

/* ── 2. DELAY UTILITIES ───────────────────────────────────────────────────── */
[data-delay="0"]   { transition-delay: 0ms !important; }
[data-delay="60"]  { transition-delay: 60ms !important; }
[data-delay="80"]  { transition-delay: 80ms !important; }
[data-delay="100"] { transition-delay: 100ms !important; }
[data-delay="150"] { transition-delay: 150ms !important; }
[data-delay="200"] { transition-delay: 200ms !important; }
[data-delay="280"] { transition-delay: 280ms !important; }
[data-delay="300"] { transition-delay: 300ms !important; }
[data-delay="400"] { transition-delay: 400ms !important; }
[data-delay="500"] { transition-delay: 500ms !important; }
[data-delay="560"] { transition-delay: 560ms !important; }

/* ── 3. MARQUEE (ANNOUNCEMENT BAR) ───────────────────────────────────────── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 4. FLOAT BADGE ───────────────────────────────────────────────────────── */
@keyframes float-badge {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ── 5. PULSE RING (WHATSAPP) ─────────────────────────────────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── 6. SKELETON LOADERS ──────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0ebe5 25%, #ede8e2 50%, #f0ebe5 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: 6px;
}
.skeleton-card { height: 400px; border-radius: 16px; }
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text--short { width: 60%; }

/* ── 7. STAGGER GROUP ─────────────────────────────────────────────────────── */
.fade-in-group > *:nth-child(1) { transition-delay: 0ms; }
.fade-in-group > *:nth-child(2) { transition-delay: 80ms; }
.fade-in-group > *:nth-child(3) { transition-delay: 160ms; }
.fade-in-group > *:nth-child(4) { transition-delay: 240ms; }
.fade-in-group > *:nth-child(5) { transition-delay: 320ms; }
.fade-in-group > *:nth-child(6) { transition-delay: 400ms; }
.fade-in-group > *:nth-child(7) { transition-delay: 480ms; }
.fade-in-group > *:nth-child(8) { transition-delay: 560ms; }

/* ── 8. HOVER EFFECTS ─────────────────────────────────────────────────────── */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(31,31,31,0.12); }

.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.hover-zoom:hover img { transform: scale(1.08); }

.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s ease;
}
.hover-underline:hover::after { width: 100%; }

/* ── 9. PAGE TRANSITION ───────────────────────────────────────────────────── */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--clr-cream);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.page-transition-overlay.is-entering {
  opacity: 1;
  transform: scaleY(1);
}

/* ── 10. BUTTON RIPPLE ────────────────────────────────────────────────────── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.btn-ripple.ripple-active::after {
  animation: ripple-effect 0.5s ease-out forwards;
}
@keyframes ripple-effect {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(3); opacity: 0; }
}

/* ── 11. WISHLIST HEART ANIMATION ─────────────────────────────────────────── */
@keyframes heart-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.wishlist-btn.heart-animate { animation: heart-pop 0.35s ease; }

/* ── 12. TOAST SLIDE ──────────────────────────────────────────────────────── */
@keyframes toast-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-120%); opacity: 0; }
}
.sales-toast.animating-in  { animation: toast-in  0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.sales-toast.animating-out { animation: toast-out 0.3s ease forwards; }

/* ── 13. SPIN / LOADER ────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 0.8s linear infinite; }

.loading-dots::after {
  content: '';
  animation: loading-dots-anim 1.2s steps(3,end) infinite;
}
@keyframes loading-dots-anim {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}

/* ── 14. PARALLAX CONTAINER ───────────────────────────────────────────────── */
[data-parallax] { will-change: transform; }

/* ── 15. COUNTDOWN FLIP ───────────────────────────────────────────────────── */
@keyframes count-flip {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}
.countdown__num.flipping { animation: count-flip 0.25s ease forwards; }

/* ── 16. REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-parallax],
  .announcement-bar__track,
  .hover-lift,
  .hover-zoom img,
  .whatsapp-float__btn::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  [data-animate] { opacity: 1; }
}