/** * Beaufort — motion. * * Implements the four motion primitives from the design spec: rule draws, * staggered reveals, Ken Burns, and count-up. Everything is opt-in via class, * applied by patterns, and driven by `assets/js/motion.js`. * * Fail-safe rule: elements are only hidden once JS has confirmed it will run * (`.bf-motion-ready` on ). Without JS, or with reduced motion, content * renders immediately at full opacity — it must never be stranded at * opacity: 0. */ /* --- Reveal: fade + rise ------------------------------------------------ */ .bf-motion-ready .bf-reveal { opacity: 0; transform: translateY( 24px ); transition: opacity var(--wp--custom--duration--reveal, 800ms) var(--bf-ease-weighted), transform var(--wp--custom--duration--reveal, 800ms) var(--bf-ease-weighted); transition-delay: var(--bf-delay, 0ms); } .bf-motion-ready .bf-reveal.is-visible { opacity: 1; transform: translateY( 0 ); } /* --- Stagger: children rise in sequence --------------------------------- */ .bf-motion-ready .bf-stagger > * { opacity: 0; transform: translateY( 30px ); transition: opacity 800ms var(--bf-ease-weighted), transform 800ms var(--bf-ease-weighted); } .bf-motion-ready .bf-stagger.is-visible > * { opacity: 1; transform: translateY( 0 ); } /* 50ms between items, per the spec. */ .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 1 ) { transition-delay: 0ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 2 ) { transition-delay: 50ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 3 ) { transition-delay: 100ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 4 ) { transition-delay: 150ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 5 ) { transition-delay: 200ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 6 ) { transition-delay: 250ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 7 ) { transition-delay: 300ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 8 ) { transition-delay: 350ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 9 ) { transition-delay: 400ms; } .bf-motion-ready .bf-stagger.is-visible > *:nth-child( 10 ) { transition-delay: 450ms; } /* --- Rule draw: a hairline sweeps out, then content follows ------------- */ .bf-rule-draw { position: relative; } .bf-motion-ready .bf-rule-draw::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width 1200ms var(--bf-ease-power3); } .bf-motion-ready .bf-rule-draw.is-visible::after { width: 100%; } /* The standalone hero rule scales rather than grows, to keep it crisp. */ .bf-motion-ready .bf-hero__rule { transform: scaleX( 0 ); transform-origin: left; transition: transform 1000ms var(--bf-ease-power3) 400ms; } .bf-motion-ready .bf-hero__rule.is-visible { transform: scaleX( 1 ); } /* --- Word reveal (hero headline) ---------------------------------------- */ .bf-word { display: inline-block; } .bf-motion-ready .bf-word { opacity: 0; transform: translateY( 20px ); transition: opacity 600ms var(--bf-ease-power3), transform 600ms var(--bf-ease-power3); transition-delay: var(--bf-delay, 0ms); } .bf-motion-ready .bf-word.is-visible { opacity: 1; transform: translateY( 0 ); } /* --- Ken Burns ----------------------------------------------------------- */ .bf-kenburns { animation: bf-kenburns 20s ease-in-out infinite alternate; will-change: transform; } @keyframes bf-kenburns { from { transform: scale( 1 ); } to { transform: scale( 1.1 ); } } /* --------------------------------------------------------------------------- Reduced motion — the whole system collapses to "just show it". ------------------------------------------------------------------------ */ @media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } .bf-motion-ready .bf-reveal, .bf-motion-ready .bf-stagger > *, .bf-motion-ready .bf-word { opacity: 1 !important; transform: none !important; transition: none !important; } .bf-motion-ready .bf-hero__rule { transform: none !important; transition: none !important; } .bf-motion-ready .bf-rule-draw::after { width: 100% !important; transition: none !important; } .bf-kenburns, .bf-marquee__track { animation: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }