/** * EMMGS — Motion * * One vocabulary, applied sparingly: * reveal — content enters as it comes into view * stagger — siblings enter in sequence * marquee — a single slow horizontal drift, used once * * Rules: * 1. No information may depend on motion to be perceivable. * 2. Everything below is gated on prefers-reduced-motion: no-preference, * so the reduced-motion state is the plain, immediate one. * 3. Reveals only run when JS has marked the document; without JS the * content is visible by default (see .no-js handling in site.js). */ /* ------------------------------------------------------------------------- * Reveal * * `.emmgs-reveal` is inert until site.js adds `.emmgs-motion-ready` to * and then `.is-revealed` per element. If JS never runs, nothing is hidden. * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .emmgs-motion-ready .emmgs-reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity var(--emmgs-motion-slow) var(--emmgs-motion-ease), transform var(--emmgs-motion-slow) var(--emmgs-motion-ease); will-change: opacity, transform; } .emmgs-motion-ready .emmgs-reveal.is-revealed { opacity: 1; transform: none; will-change: auto; } /* Stagger children of a revealed container. */ .emmgs-motion-ready .emmgs-stagger > * { opacity: 0; transform: translateY(1rem); transition: opacity var(--emmgs-motion-slow) var(--emmgs-motion-ease), transform var(--emmgs-motion-slow) var(--emmgs-motion-ease); } .emmgs-motion-ready .emmgs-stagger.is-revealed > * { opacity: 1; transform: none; } .emmgs-motion-ready .emmgs-stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; } .emmgs-motion-ready .emmgs-stagger.is-revealed > *:nth-child(2) { transition-delay: 70ms; } .emmgs-motion-ready .emmgs-stagger.is-revealed > *:nth-child(3) { transition-delay: 140ms; } .emmgs-motion-ready .emmgs-stagger.is-revealed > *:nth-child(4) { transition-delay: 210ms; } .emmgs-motion-ready .emmgs-stagger.is-revealed > *:nth-child(5) { transition-delay: 280ms; } .emmgs-motion-ready .emmgs-stagger.is-revealed > *:nth-child(6) { transition-delay: 350ms; } .emmgs-motion-ready .emmgs-stagger.is-revealed > *:nth-child(n + 7) { transition-delay: 400ms; } /* Hero lines rise on load rather than on scroll — they are already in view. */ .emmgs-motion-ready .emmgs-riseup > * { animation: emmgs-rise var(--emmgs-motion-slow) var(--emmgs-motion-ease) backwards; } .emmgs-motion-ready .emmgs-riseup > *:nth-child(1) { animation-delay: 60ms; } .emmgs-motion-ready .emmgs-riseup > *:nth-child(2) { animation-delay: 140ms; } .emmgs-motion-ready .emmgs-riseup > *:nth-child(3) { animation-delay: 220ms; } .emmgs-motion-ready .emmgs-riseup > *:nth-child(4) { animation-delay: 300ms; } .emmgs-motion-ready .emmgs-riseup > *:nth-child(5) { animation-delay: 380ms; } } @keyframes emmgs-rise { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } } /* Print captures the document without scrolling, so nothing may be mid-reveal. */ @media print { .emmgs-motion-ready .emmgs-reveal, .emmgs-motion-ready .emmgs-stagger > * { opacity: 1 !important; transform: none !important; } } /* ------------------------------------------------------------------------- * Marquee * * A slow, single-direction drift for the capability ticker. Duplicated * content is aria-hidden so it is announced once. * ---------------------------------------------------------------------- */ .emmgs-marquee { display: flex; overflow: hidden; gap: 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); user-select: none; } .emmgs-marquee__track { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); flex: none; padding-right: var(--wp--preset--spacing--40); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .emmgs-marquee__track { animation: emmgs-drift 64s linear infinite; } .emmgs-marquee:hover .emmgs-marquee__track, .emmgs-marquee:focus-within .emmgs-marquee__track { animation-play-state: paused; } } /* Without motion the track simply scrolls horizontally by hand. */ @media (prefers-reduced-motion: reduce) { .emmgs-marquee { overflow-x: auto; scrollbar-width: thin; } } @keyframes emmgs-drift { from { transform: translateX(0); } to { transform: translateX(-100%); } } .emmgs-marquee__item { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 600; letter-spacing: var(--wp--custom--tracking--heading); color: var(--surface-fg); } .emmgs-marquee__sep { color: var(--surface-accent); font-size: var(--wp--preset--font-size--medium); } /* ------------------------------------------------------------------------- * Hover affordance for whole-card targets on fine pointers only. * ---------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .emmgs-lift { transition: transform var(--emmgs-motion-base) var(--emmgs-motion-ease); } .emmgs-lift:hover, .emmgs-lift:focus-within { transform: translateY(-2px); } }