/* ws_motion.css — WhiteStore motion layer.
   Only opacity/transform are animated. Fill-mode is `backwards` everywhere so that once an animation
   ends the element goes back to its normal styles (hover/transform rules keep working).
   ws_motion.js toggles .ws-fill / .ws-ov / .ws-ov-c; under prefers-reduced-motion movement is dropped and only opacity fades remain. */

:root {
    --ws-ease: cubic-bezier(.22, .8, .3, 1);
    --ws-ease-io: cubic-bezier(.4, 0, .2, 1);
}

@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-rise { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ws-pop  { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); } to { opacity: 1; transform: none; } }

/* 1. Every page fades in when opened (opacity only: a transform here would re-parent fixed children). */
.page.active:not(#page-admin):not(#page-partner-lk) {
    animation: ws-fade .28s var(--ws-ease-io);
}

/* 2. Lists/sections rise in one after another.
      .ws-fill   = dynamic container, toggled by ws_motion.js for ~1.2s after its content first appears
      .ws-static = static blocks of a page (bonus columns), animated each time the page is opened */
.ws-fill > *,
.page.active .ws-static > * {
    animation: ws-rise .5s var(--ws-ease) backwards;
}
.ws-fill > :nth-child(1), .page.active .ws-static > :nth-child(1) { animation-delay: calc(0ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(2), .page.active .ws-static > :nth-child(2) { animation-delay: calc(55ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(3), .page.active .ws-static > :nth-child(3) { animation-delay: calc(110ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(4), .page.active .ws-static > :nth-child(4) { animation-delay: calc(165ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(5), .page.active .ws-static > :nth-child(5) { animation-delay: calc(220ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(6), .page.active .ws-static > :nth-child(6) { animation-delay: calc(275ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(7), .page.active .ws-static > :nth-child(7) { animation-delay: calc(330ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(8), .page.active .ws-static > :nth-child(8) { animation-delay: calc(385ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(9), .page.active .ws-static > :nth-child(9) { animation-delay: calc(440ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(10), .page.active .ws-static > :nth-child(10) { animation-delay: calc(495ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(11), .page.active .ws-static > :nth-child(11) { animation-delay: calc(550ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(12), .page.active .ws-static > :nth-child(12) { animation-delay: calc(605ms - var(--ws-el, 0ms)); }
.ws-fill > :nth-child(n+13), .page.active .ws-static > :nth-child(n+13) { animation-delay: calc(660ms - var(--ws-el, 0ms)); }

/* 3. Dialogs: backdrop fades, the dialog rises. */
.modal-overlay.active,
.product-detail-overlay.active,
.ws-ov {
    animation: ws-fade .22s var(--ws-ease-io);
}
.product-detail-overlay.active .product-detail-card,
.ws-ov-c {
    animation: ws-pop .32s var(--ws-ease) backwards;
}

/* 4. Press feedback (zero specificity: any existing rule for these classes wins). */
:where(.product-card, .category-card-wrapper, .promo-card, .bonus-summary-card, .bonus-tier-card,
       .filter-chip, .nav-link, .product-button, .modal-btn):active {
    transform: scale(.97);
}
:where(.product-card, .category-card-wrapper, .promo-card, .bonus-summary-card, .bonus-tier-card,
       .filter-chip, .product-button, .modal-btn) {
    transition: transform .18s var(--ws-ease), opacity .18s var(--ws-ease-io);
}

/* Reduced motion: no movement, but keep short opacity fades so content still appears smoothly. */
@media (prefers-reduced-motion: reduce) {
    .ws-fill > *,
    .page.active .ws-static > * { animation-name: ws-fade; animation-duration: .35s; }
    .product-detail-overlay.active .product-detail-card,
    .ws-ov-c { animation-name: ws-fade; animation-duration: .25s; }
}