/** * Global motion system — reusable entrance-animation utilities. * * Content is visible by default with no JS and no CSS here. Only once * assets/js/motion.js confirms IntersectionObserver support and adds * `.pkgc-motion-enabled` to do the pre-animation "hidden" states * below apply — so a JS failure, a slow connection, or a script blocker * never hides real content. See motion.js for the enable/reveal logic. * * Reduced motion: base.css already zeroes animation/transition duration * globally under `prefers-reduced-motion: reduce` (see base.css's global * `*, *::before, *::after` rule). That alone is enough to make every * animation below instant, but motion.js also skips wiring the * IntersectionObserver entirely when reduced motion is preferred, so * `.pkgc-motion-enabled` is never added and elements simply render in * their final state with no transform/opacity step at all. * * @package PackagingCommerce */ /* ── Enable gate ──────────────────────────────────────────────────── */ /* * Pre-animation states only apply once JS has proven it can also reveal * them (.pkgc-motion-enabled on , set by motion.js before it wires * the observer). Without this class, every [data-pkgc-motion] element * and .pkgc-motion* element renders normally — full opacity, no offset. */ html.pkgc-motion-enabled [data-pkgc-motion], html.pkgc-motion-enabled .pkgc-motion { opacity: 0; } /* Once revealed (class added by the IntersectionObserver callback). */ html.pkgc-motion-enabled [data-pkgc-motion].pkgc-motion-in, html.pkgc-motion-enabled .pkgc-motion.pkgc-motion-in { opacity: 1; } /* ── Variants ─────────────────────────────────────────────────────── */ html.pkgc-motion-enabled [data-pkgc-motion="fade-up"], html.pkgc-motion-enabled .pkgc-motion--fade-up { transform: translateY(16px); transition: opacity var(--brand-motion-base) var(--brand-motion-ease), transform var(--brand-motion-base) var(--brand-motion-ease); } html.pkgc-motion-enabled [data-pkgc-motion="fade-up"].pkgc-motion-in, html.pkgc-motion-enabled .pkgc-motion--fade-up.pkgc-motion-in { transform: translateY(0); } html.pkgc-motion-enabled [data-pkgc-motion="fade-in"], html.pkgc-motion-enabled .pkgc-motion--fade-in { transition: opacity var(--brand-motion-base) var(--brand-motion-ease); } html.pkgc-motion-enabled [data-pkgc-motion="scale-soft"], html.pkgc-motion-enabled .pkgc-motion--scale-soft { transform: scale(0.96); transition: opacity var(--brand-motion-base) var(--brand-motion-ease), transform var(--brand-motion-base) var(--brand-motion-ease); } html.pkgc-motion-enabled [data-pkgc-motion="scale-soft"].pkgc-motion-in, html.pkgc-motion-enabled .pkgc-motion--scale-soft.pkgc-motion-in { transform: scale(1); } html.pkgc-motion-enabled [data-pkgc-motion="slide-inline"], html.pkgc-motion-enabled .pkgc-motion--slide-inline { transform: translateX(16px); transition: opacity var(--brand-motion-base) var(--brand-motion-ease), transform var(--brand-motion-base) var(--brand-motion-ease); } html[dir="rtl"].pkgc-motion-enabled [data-pkgc-motion="slide-inline"], html[dir="rtl"].pkgc-motion-enabled .pkgc-motion--slide-inline { transform: translateX(-16px); } html.pkgc-motion-enabled [data-pkgc-motion="slide-inline"].pkgc-motion-in, html.pkgc-motion-enabled .pkgc-motion--slide-inline.pkgc-motion-in { transform: translateX(0); } /* ── Stagger children ─────────────────────────────────────────────── motion.js assigns a small incremental transition-delay (custom property --pkgc-stagger-i × a fixed step) to each direct child of a [data-pkgc-stagger] container as it becomes visible. The children still need one of the variant classes/attributes above to animate. */ html.pkgc-motion-enabled [data-pkgc-stagger] > [data-pkgc-motion], html.pkgc-motion-enabled [data-pkgc-stagger] > .pkgc-motion { transition-delay: calc(var(--pkgc-stagger-i, 0) * 70ms); } /* ── Micro-interaction keyframes ──────────────────────────────────── */ @keyframes pkgc-soft-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes pkgc-success-pulse { 0% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.45); } 100% { box-shadow: 0 0 0 12px rgb(37 211 102 / 0); } } @keyframes pkgc-error-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .pkgc-motion--soft-pop { animation: pkgc-soft-pop var(--brand-motion-base) var(--brand-motion-pop); } .pkgc-motion--success-pulse { animation: pkgc-success-pulse var(--brand-motion-slow) var(--brand-motion-ease); } .pkgc-motion--error-shake { animation: pkgc-error-shake var(--brand-motion-base) var(--brand-motion-ease); } /* prefers-reduced-motion is already handled globally in base.css (zeroes all animation/transition durations) — no additional override needed here. The rules above rely on that global gate rather than repeating a media query in every file. */