/* =========================================================
   Pro Product Filter — opt-in animations
   Only loaded when animation="..." is used or the global
   toggle is on. Pure CSS, no JS deps.
   ========================================================= */

.ppf-anim {
    opacity: 0;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
    animation-delay: var(--ppf-anim-delay, 0ms);
    will-change: transform, opacity;
}

/* Fade */
.ppf-anim-fade { animation-name: ppfFade; }
@keyframes ppfFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Slide up */
.ppf-anim-slide-up { animation-name: ppfSlideUp; }
@keyframes ppfSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Zoom */
.ppf-anim-zoom { animation-name: ppfZoom; }
@keyframes ppfZoom {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Flip */
.ppf-anim-flip { animation-name: ppfFlip; transform-origin: 50% 50%; }
@keyframes ppfFlip {
    from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}

/* Stagger children when a wrapper has data-ppf set */
.ppf-wrapper .ppf-anim:nth-child(1)  { --ppf-anim-delay: 0ms;   }
.ppf-wrapper .ppf-anim:nth-child(2)  { --ppf-anim-delay: 60ms;  }
.ppf-wrapper .ppf-anim:nth-child(3)  { --ppf-anim-delay: 120ms; }
.ppf-wrapper .ppf-anim:nth-child(4)  { --ppf-anim-delay: 180ms; }
.ppf-wrapper .ppf-anim:nth-child(5)  { --ppf-anim-delay: 240ms; }
.ppf-wrapper .ppf-anim:nth-child(6)  { --ppf-anim-delay: 300ms; }
.ppf-wrapper .ppf-anim:nth-child(7)  { --ppf-anim-delay: 360ms; }
.ppf-wrapper .ppf-anim:nth-child(8)  { --ppf-anim-delay: 420ms; }
.ppf-wrapper .ppf-anim:nth-child(9)  { --ppf-anim-delay: 480ms; }
.ppf-wrapper .ppf-anim:nth-child(n+10) { --ppf-anim-delay: 540ms; }

/* Subtle card hover (only when animations module is active) */
.ppf-anim,
.ppf-wrapper .ppf-item,
.ppf-wrapper .filter-item {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.ppf-wrapper .ppf-item:hover,
.ppf-wrapper .filter-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
}

/* Image zoom-on-hover */
.ppf-wrapper .ppf-item-image-link img,
.ppf-wrapper .filter-item-image-link img {
    transition: transform 400ms ease;
}
.ppf-wrapper .ppf-item:hover img,
.ppf-wrapper .filter-item:hover img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .ppf-anim {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ppf-wrapper .ppf-item,
    .ppf-wrapper .filter-item,
    .ppf-wrapper .ppf-item-image-link img,
    .ppf-wrapper .filter-item-image-link img {
        transition: none !important;
    }
}