/* Decorative motion only. Media/player state remains owned by the preview engine. */
@media (prefers-reduced-motion: no-preference) {
    .sf-motion .resource-card {
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    @media (hover: hover) and (pointer: fine) {
        .sf-motion .resource-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--sf-shadow-md);
        }
    }
    .sf-motion .resource-card .resource-card-category,
    .sf-motion .resource-card .rc-badge {
        transition: background-color 180ms ease, border-color 180ms ease;
    }
    .sf-motion:not(.sf-motion-detail) .membership-promo-banner .storefront-button > span[aria-hidden] {
        display: inline-block;
        transition: transform 180ms ease;
    }
    .sf-motion:not(.sf-motion-detail) .membership-promo-banner .storefront-button:is(:hover, :focus-visible) > span[aria-hidden] {
        transform: translateX(3px);
    }
    .sf-motion .catalog-sidebar :is(.filter-item, .filter-radio, select[data-auto-submit]),
    .sf-motion .active-filter-chip {
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    }
    .sf-motion .sf-section-enter { animation: sf-section-enter 380ms ease both; }
    .sf-motion .sf-card-enter { animation: sf-card-enter 380ms ease both; }
    .sf-motion .sf-card-enter:nth-child(2) { animation-delay: 60ms; }
    .sf-motion .sf-card-enter:nth-child(3) { animation-delay: 120ms; }
    .sf-motion .sf-card-enter:nth-child(4) { animation-delay: 180ms; }
    .sf-motion .sf-card-enter:nth-child(5) { animation-delay: 240ms; }
    .sf-motion .sf-card-enter:nth-child(6) { animation-delay: 300ms; }
    .sf-motion .sf-card-enter:nth-child(7) { animation-delay: 360ms; }
    .sf-motion .sf-card-enter:nth-child(8) { animation-delay: 420ms; }
    .sf-motion .sf-card-enter:nth-child(9) { animation-delay: 480ms; }
    .sf-motion .sf-card-enter:nth-child(10) { animation-delay: 540ms; }
    .sf-motion .sf-card-enter:nth-child(11) { animation-delay: 600ms; }
    .sf-motion .sf-card-enter:nth-child(n+12) { animation-delay: 660ms; }
    .sf-motion .sf-grid-enter { animation: sf-grid-enter 150ms ease both; }
    .sf-motion .sf-media-enter { animation: sf-media-enter 360ms ease both; }
    .sf-motion .sf-metadata-enter > div { animation: sf-media-enter 360ms ease both; }
    .sf-motion .sf-metadata-enter > div:nth-child(2) { animation-delay: 40ms; }
    .sf-motion .sf-metadata-enter > div:nth-child(3) { animation-delay: 80ms; }
    .sf-motion .sf-metadata-enter > div:nth-child(4) { animation-delay: 120ms; }
    .sf-motion .sf-metadata-enter > div:nth-child(5) { animation-delay: 160ms; }
    .sf-motion .sf-metadata-enter > div:nth-child(6) { animation-delay: 200ms; }
}
@keyframes sf-section-enter {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
}
/* Independent translate avoids competing with the card's hover transform. */
@keyframes sf-card-enter {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes sf-grid-enter { from { opacity: .82; } to { opacity: 1; } }
@keyframes sf-media-enter { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .sf-motion .resource-card,
    .sf-motion .resource-card:hover {
        transform: none;
        transition: none;
    }
}