/* Scroll reveal (progressive enhancement)
   Default: visible (so file:// or JS failure still shows content).
   When JS is enabled, we animate reveals on scroll. */
.reveal{opacity:1; transform:none}
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
}
.js .reveal.is-in{opacity:1; transform:translateY(0)}

/* Discount badge pulse (premium, subtle) */
.tag--discount{
  animation:discountPulse 2.8s ease-in-out infinite;
}
@keyframes discountPulse{
  0%,100%{filter:brightness(1); transform:translateY(0)}
  50%{filter:brightness(1.06); transform:translateY(-1px)}
}

/* Staggered product entrance */
.card--in{
  animation:cardIn 720ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

/* Micro interactions */
.floaty{
  animation:floaty 6.5s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* Skeletons */
.skeleton{
  position:relative;
  overflow:hidden;
  background:rgba(44,62,80,.08);
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-100%);
  animation:shimmer 1.1s ease-in-out infinite;
}
@keyframes shimmer{
  to{transform:translateX(100%)}
}

/* Confetti canvas sits above modals when active */
.confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:140;
}