/* ============================================================ motion.css — Premium motion layer for CaseRoom ------------------------------------------------------------ Progressive enhancement: - Reveal states are ONLY applied after is set by js/motion.js, so content is never hidden if JS fails. - prefers-reduced-motion is fully respected (animations disabled). - Only transform / opacity / filter are animated (GPU friendly). ============================================================ */ /* ---------- 1. Anchor offset (offset sticky navbar) ---------- */ [id] { scroll-margin-top: 88px; } /* ---------- 2. Reveal system ---------- */ html.motion-ready [data-reveal] { opacity: 0; transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.motion-ready [data-reveal="fade-up"] { transform: translate3d(0, 28px, 0); } html.motion-ready [data-reveal="fade-up-sm"] { transform: translate3d(0, 14px, 0); } html.motion-ready [data-reveal="fade-down"] { transform: translate3d(0, -24px, 0); } html.motion-ready [data-reveal="fade-left"] { transform: translate3d(-26px, 0, 0); } html.motion-ready [data-reveal="fade-right"] { transform: translate3d(26px, 0, 0); } html.motion-ready [data-reveal="scale"] { transform: scale(0.96); } html.motion-ready [data-reveal="blur"] { transform: translate3d(0, 14px, 0); filter: blur(8px); } html.motion-ready [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } /* Content that receives keyboard focus must stay reachable */ html.motion-ready [data-reveal]:focus-within { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } /* ---------- 3. Buttons: press + focus ---------- */ .btn:active { transform: translateY(1px) scale(0.97); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); transition-duration: 0.1s; } .btn-cart:active { transform: scale(0.98); box-shadow: none; } .pill:active, .control-btn:active, .mode-tab:active, .color-dot:active, .dot:active { transform: scale(0.94); } .btn:focus-visible, .pill:focus-visible, .control-btn:focus-visible, .icon-btn:focus-visible, .mode-tab:focus-visible, .faq-q:focus-visible, .dot:focus-visible, .arrow:focus-visible, .filter-select:focus-visible, .filter-search:focus-visible { outline: 3px solid rgba(0, 0, 0, 0.45); outline-offset: 2px; } /* ---------- 4. Navbar: subtle elevation on scroll ---------- */ .navbar { transition: box-shadow 0.3s ease; } .navbar.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); } .navbar .nav-links a { transition: color 0.25s ease; } /* ---------- 5. Mobile nav: staggered link entrances ---------- */ @media (max-width: 640px) { .nav-links { transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .nav-links.open li { animation: motion-nav-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } .nav-links.open li:nth-child(1) { animation-delay: 0.03s; } .nav-links.open li:nth-child(2) { animation-delay: 0.07s; } .nav-links.open li:nth-child(3) { animation-delay: 0.11s; } .nav-links.open li:nth-child(4) { animation-delay: 0.15s; } .nav-links.open li:nth-child(5) { animation-delay: 0.19s; } .nav-links.open li:nth-child(6) { animation-delay: 0.23s; } } @keyframes motion-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ---------- 6. Modals: fade + gentle scale ---------- */ .modal-overlay { animation: motion-overlay-in 0.25s ease both; } .modal-card { animation: motion-modal-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes motion-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes motion-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } /* ---------- 7. Cart drawer: premium easing ---------- */ .cart-drawer-wrap { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .cart-overlay { transition: opacity 0.3s ease, visibility 0.3s ease; } /* ---------- 8. Hero: subtle parallax (overflow-safe scale) ---------- */ @media (min-width: 769px) { .hero .slide img { transform: scale(1.08); will-change: transform; } } /* ---------- 9. Reduced motion: fully disable non-essential fx ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } html.motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .modal-overlay, .modal-card, .nav-links.open li { animation: none !important; } .navbar, .btn, .btn-solid, .btn-outline, .btn-cart, .card, .value-item, .review, .faq-item, .slide, .arrow, .icon-btn, .pill, .control-btn, .mode-tab, .color-dot, .social-icon, .dot { transition: none !important; } }