/*
  SCROLL REVEAL STYLES
  ======================
  Pairs with scroll-reveal.js. A bold, noticeable entrance: sections
  start well off-position (dropped down, slightly shrunk, and faded
  out), then rise, scale up, and fade in with a springy overshoot ease
  as they cross into view -- and reverse the same way if scrolled back
  out of view, since the JS toggles this every time either way.
*/

.scroll-reveal {
  opacity: 0;
  transform: translateY(90px) scale(0.85);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* springy overshoot */
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: none; /* fully cleared, not just reset to translateY(0) scale(1) -- a parent left with ANY active transform value (even a visual no-op) can cause exactly this kind of clipping/rendering quirk for a scaled child inside it, like the hover-enlarged product cards */
}