/* ========================================================================== LapaHub motion layer Scroll reveals, idle float, hover tilt, and micro-interactions. Everything here is inert until .js-ready is on (progressive enhancement — content is fully visible/usable with JS disabled) and is fully neutralized under prefers-reduced-motion (see style.css). ========================================================================== */ html:not(.js-ready) .reveal { opacity: 1; transform: none; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-scale { transform: translateY(16px) scale(0.94); } .reveal-scale.is-visible { transform: translateY(0) scale(1); } .reveal-left { transform: translateX(-32px); } .reveal-left.is-visible { transform: translateX(0); } .reveal-right { transform: translateX(32px); } .reveal-right.is-visible { transform: translateX(0); } /* Stagger children automatically via nth-child when JS hasn't assigned an explicit --reveal-delay (keeps grids feeling hand-choreographed) */ .book-grid .reveal:nth-child(1), ul.products .reveal:nth-child(1) { --reveal-delay: 0ms; } .book-grid .reveal:nth-child(2), ul.products .reveal:nth-child(2) { --reveal-delay: 70ms; } .book-grid .reveal:nth-child(3), ul.products .reveal:nth-child(3) { --reveal-delay: 140ms; } .book-grid .reveal:nth-child(4), ul.products .reveal:nth-child(4) { --reveal-delay: 210ms; } .book-grid .reveal:nth-child(5), ul.products .reveal:nth-child(5) { --reveal-delay: 280ms; } .book-grid .reveal:nth-child(6), ul.products .reveal:nth-child(6) { --reveal-delay: 350ms; } .book-grid .reveal:nth-child(7), ul.products .reveal:nth-child(7) { --reveal-delay: 420ms; } .book-grid .reveal:nth-child(8), ul.products .reveal:nth-child(8) { --reveal-delay: 490ms; } /* ---------- idle float: hero pet photos ---------- */ @keyframes lapahub-float { 0%, 100% { transform: translateY(0) rotate(var(--float-rot, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--float-rot, 0deg)); } } .pet-photo { animation: lapahub-float 5.5s ease-in-out infinite; } .pet-photo-dog { animation-delay: 0s; } .pet-photo-cat { animation-delay: 0.6s; animation-duration: 6.2s; } @keyframes lapahub-wiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-2deg); } } .paw-sticker { animation: lapahub-wiggle 3.6s ease-in-out infinite; } /* ---------- hover tilt on book covers ---------- */ .book-card, ul.products li.product { transform-style: preserve-3d; perspective: 800px; } .book-card .book-cover, ul.products li.product .book-cover { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } .book-card:hover .book-cover, ul.products li.product:hover .book-cover { transform: rotate(-1.2deg) scale(1.015); } .book-cover .sticker { transition: transform 220ms ease; } .book-card:hover .book-cover .sticker, ul.products li.product:hover .book-cover .sticker { transform: rotate(8deg) scale(1.1); } /* ---------- sticky header shrink ---------- */ .site-header { transition: padding-block 200ms ease, box-shadow 200ms ease; } .site-header.is-scrolled .wrap { padding-block: 0.65rem; } .site-header.is-scrolled { box-shadow: 0 4px 0 rgba(23,20,15,0.06); } /* ---------- add-to-cart pulse feedback ---------- */ @keyframes lapahub-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 60% { transform: scale(0.96); } 100% { transform: scale(1); } } .is-pulsing { animation: lapahub-pulse 420ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes lapahub-cart-bump { 0%, 100% { transform: translate(-2px, -2px); } 50% { transform: translate(-2px, -2px) scale(1.12); } } .cart-btn.is-bumping { animation: lapahub-cart-bump 380ms ease; } /* ---------- chip cloud gentle drift on load ---------- */ @keyframes lapahub-chip-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } html.js-ready .chip-cloud .chip { animation: lapahub-chip-in 480ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } .chip-cloud .chip:nth-child(1) { animation-delay: 0ms; } .chip-cloud .chip:nth-child(2) { animation-delay: 40ms; } .chip-cloud .chip:nth-child(3) { animation-delay: 80ms; } .chip-cloud .chip:nth-child(4) { animation-delay: 120ms; } .chip-cloud .chip:nth-child(5) { animation-delay: 160ms; } .chip-cloud .chip:nth-child(6) { animation-delay: 200ms; } .chip-cloud .chip:nth-child(7) { animation-delay: 240ms; } .chip-cloud .chip:nth-child(8) { animation-delay: 280ms; } /* ---------- hero entrance ---------- */ html.js-ready .hero .eyebrow { animation: lapahub-chip-in 500ms cubic-bezier(0.16, 1, 0.3, 1) 0ms backwards; } html.js-ready .hero h1 { animation: lapahub-chip-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 90ms backwards; } html.js-ready .hero p.lede { animation: lapahub-chip-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 180ms backwards; } html.js-ready .hero .cta-row { animation: lapahub-chip-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 270ms backwards; } html.js-ready .hero .trust-row { animation: lapahub-chip-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 360ms backwards; } /* ---------- number/price roll-in on product/cart update ---------- */ @keyframes lapahub-price-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount, .summary-row.total .woocommerce-Price-amount { display: inline-block; animation: lapahub-price-in 260ms ease; } /* ---------- underline draw on nav hover ---------- */ nav.primary-nav a { position: relative; } nav.primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2.5px; height: 2.5px; background: var(--color-primary); transition: right 220ms cubic-bezier(0.16, 1, 0.3, 1); } nav.primary-nav a:hover::after, nav.primary-nav a.is-current::after { right: 0; } nav.primary-nav a:hover, nav.primary-nav a.is-current { border-bottom-color: transparent; } /* ---------- FAQ accordion smooth open ---------- */ .faq-item p { animation: lapahub-price-in 220ms ease; }