/* ========================================================================= * motion.css — entrance animations, scroll reveals, reduced-motion guard * * Motion is opt-in: a tiny inline script in (inc/enqueue.php) adds the * `lb-motion` class to only when JS runs AND the user has not asked * for reduced motion. Without that class every rule here is inert, so no-JS * visitors and reduced-motion users always get fully visible, static content. * ========================================================================= */ /* -------------------- Keyframes -------------------- */ @keyframes lb-reveal-up { from { opacity: 0; transform: translateY(22px); } } /* Used as a safety net: if motion.js never runs (blocked, failed request), hidden reveal targets become visible on their own after a short delay. */ @keyframes lb-reveal-fallback { to { opacity: 1; } } /* -------------------- Scroll reveal -------------------- */ /* * Usage: add `data-lb-reveal` to an element. motion.js adds `.is-revealed` * when it enters the viewport (staggering siblings revealed in the same * batch via an inline animation-delay). * * `backwards` fill keeps the element at the keyframe `from` state during the * stagger delay, and releases all animated properties afterwards so the * element's own hover transitions (e.g. .lb-card transform) are unaffected. */ html.lb-motion [data-lb-reveal]:not(.is-revealed) { opacity: 0; animation: lb-reveal-fallback 0s linear 2.5s forwards; } html.lb-motion [data-lb-reveal].is-revealed { animation: lb-reveal-up var(--lb-dur-reveal) var(--lb-ease-out) backwards; } /* -------------------- Hero entrance -------------------- */ /* Title → subtitle → form/slogan → note, each a beat apart. `backwards` fill keeps the later items hidden during their delay, then releases the properties so hover/focus transitions behave normally afterwards. */ html.lb-motion .lb-hero__title { animation: lb-reveal-up 1300ms var(--lb-ease-out) backwards; } html.lb-motion .lb-hero__subtitle { animation: lb-reveal-up 1300ms var(--lb-ease-out) 300ms backwards; } html.lb-motion .lb-hero__form, html.lb-motion .lb-hero__shortcode, html.lb-motion .lb-hero__slogan { animation: lb-reveal-up 1300ms var(--lb-ease-out) 600ms backwards; } html.lb-motion .lb-hero__note { animation: lb-reveal-up 1300ms var(--lb-ease-out) 900ms backwards; } /* Slogan letter tiles pop in one after another once the slogan block lands. */ @keyframes lb-letter-pop { 0% { opacity: 0; transform: scale(0.5) translateY(10px); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } } /* Pacing approved as-is; delays only shifted +200ms to track the slogan container's slower entrance above. */ html.lb-motion .lb-hero__slogan-letter { animation: lb-letter-pop 700ms var(--lb-ease-out) 1000ms backwards; } html.lb-motion .lb-hero__slogan-word:nth-child(2) .lb-hero__slogan-letter { animation-delay: 1150ms; } html.lb-motion .lb-hero__slogan-word:nth-child(3) .lb-hero__slogan-letter { animation-delay: 1300ms; } html.lb-motion .lb-hero__slogan-word:nth-child(4) .lb-hero__slogan-letter { animation-delay: 1450ms; } html.lb-motion .lb-hero__slogan-word:nth-child(5) .lb-hero__slogan-letter { animation-delay: 1600ms; } html.lb-motion .lb-hero__slogan-word:nth-child(6) .lb-hero__slogan-letter { animation-delay: 1750ms; } html.lb-motion .lb-hero__slogan-word:nth-child(7) .lb-hero__slogan-letter { animation-delay: 1900ms; } html.lb-motion .lb-hero__slogan-word:nth-child(8) .lb-hero__slogan-letter { animation-delay: 2050ms; } /* -------------------- 3D card tilt -------------------- */ /* * Pointer-driven perspective tilt + cursor-following glare on post cards. * motion.js feeds --lb-rx / --lb-ry / --lb-mx / --lb-my from mousemove. * Fine pointers only — touch devices keep the plain hover lift from * components.css. */ @media (hover: hover) and (pointer: fine) { html.lb-motion .lb-card { position: relative; transform: perspective(900px) rotateX(var(--lb-rx, 0deg)) rotateY(var(--lb-ry, 0deg)) translateY(var(--lb-ty, 0px)); } html.lb-motion .lb-card:hover { --lb-ty: -2px; } html.lb-motion .lb-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient( 420px circle at var(--lb-mx, 50%) var(--lb-my, 50%), rgba(31, 182, 245, 0.07), transparent 65% ); opacity: 0; transition: opacity var(--lb-dur) var(--lb-ease); pointer-events: none; } html.lb-motion .lb-card:hover::after { opacity: 1; } } /* -------------------- Reduced motion -------------------- */ /* * Belt and braces: the lb-motion class is never added under reduced motion, * but third-party embeds and the theme's own micro-transitions (hovers, * smooth scroll) should also settle instantly. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } html { scroll-behavior: auto !important; } html.lb-motion [data-lb-reveal] { opacity: 1; animation: none; } }