/** * Motion kit — scroll entrances (bundled by figma-to-wp; see inc/motion.php). * * A template marks an element with * * data-yagil-reveal="zoom|right|left|up" the entrance * data-yagil-reveal-delay="140" milliseconds, optional * * and motion.js adds `is-revealed` when it crosses into view. Nothing else in * the theme should write its own scroll animation. * * DIRECTIONS ARE PHYSICAL, NOT LOGICAL (physical — the one sanctioned R9 * exception). "right" means the element flies in from the visual right of the * screen, in an RTL document as in an LTR one: the client describes what they * see, and a logical property would silently mirror it. * * The hidden state hangs off `.yagil-motion` on , which the inline head * script in inc/motion.php sets before first paint and removes after four * seconds if motion.js never reported in. Without JavaScript, or with it * broken, every marked element is simply visible. The harness emulates * reduced motion, so sections are always shot in their final state. */ /* ========================================================================== The reveal ========================================================================== */ .yagil-motion [data-yagil-reveal] { opacity: 0; transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--yagil-reveal-delay, 0ms); } /* A zoom IN: the element grows into place from slightly smaller. */ .yagil-motion [data-yagil-reveal="zoom"] { transform: scale(0.94); } .yagil-motion [data-yagil-reveal="right"] { transform: translateX(4.5rem); /* physical: from the visual right */ } .yagil-motion [data-yagil-reveal="left"] { transform: translateX(-4.5rem); /* physical: from the visual left */ } .yagil-motion [data-yagil-reveal="up"] { transform: translateY(2rem); } .yagil-motion [data-yagil-reveal].is-revealed { opacity: 1; transform: none; } /* * Phones get no sideways travel. A 72px slide on a full-width block is 72px of * horizontal overflow while it runs, which the overflow spec fails a page for, * and at 375 the gesture reads as a glitch rather than choreography. The fade * stays; it arrives from below. (bp: the phone breakpoint token — adjust the * literal to match tokens.json.) */ @media (max-width: 767px) { .yagil-motion [data-yagil-reveal="right"], .yagil-motion [data-yagil-reveal="left"] { transform: translateY(1.5rem); } } /* * Put this on every SECTION whose children travel sideways: the slide happens * outside the container's margins at every width below the canvas. * `clip`, never `hidden` — hidden makes the section a scroll container, and on * body or any ancestor of a sticky header it silently switches sticky off. */ .yagil-clip-x { overflow-x: clip; } /* * Off-screen entrances (data-yagil-reveal-offscreen) set their own parked * transform in the section's CSS, typically translateX(±100vw) and opacity 1 * so the element slides in solid. The section must carry .yagil-clip-x. */ /* Reduced motion: nothing moves, nothing is hidden. */ @media (prefers-reduced-motion: reduce) { .yagil-motion [data-yagil-reveal] { opacity: 1; transform: none; transition: none; } } /* Paper has no scroll position, so nothing would ever trigger. */ @media print { .yagil-motion [data-yagil-reveal] { opacity: 1; transform: none; } } /* ========================================================================== The writing effect — data-yagil-type motion.js wraps each character in its own span. The characters keep their layout from the first frame (opacity, not display), so nothing reflows and the reader's eye has nothing to chase. ========================================================================== */ .yagil-motion .yagil-type__char { opacity: 0; transition: opacity 90ms linear; } .yagil-motion .yagil-type__char.is-typed { opacity: 1; } @media (prefers-reduced-motion: reduce) { .yagil-motion .yagil-type__char { opacity: 1; transition: none; } } @media print { .yagil-motion .yagil-type__char { opacity: 1; } }