/* Yuvalim City Boy - entrance motion (loaded by novamira-sandbox/yuvalim-motion.php) */ /* Hide animated blocks until GSAP has set their start state. The .yv-motion class is added to by an inline head script and removed by motion.js (or by a 3.5s failsafe), so the page still renders if JS or the CDN fails. */ .yv-motion [data-yv]{ visibility: hidden; } /* Mask that each character rises out of */ /* vertical-align:bottom is required: overflow:hidden moves an inline-block baseline to its bottom margin edge, which otherwise grows the line box and pushes the layout down. The negative margins cancel the padding so the line box keeps its original height, and the padding gives descenders room inside the mask. */ .yv-word{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-top: .25em; margin-top: -.25em; padding-bottom: .2em; margin-bottom: -.2em; } .yv-char{ display: inline-block; will-change: transform; } /* Background video sits behind everything and never blocks clicks */ [data-yv="bg"]{ pointer-events: none; } [data-yv="bg"] video{ display: block; } @media (prefers-reduced-motion: reduce){ .yv-motion [data-yv]{ visibility: visible; } .yv-word{ overflow: visible; padding: 0; margin: 0; } .yv-char{ transform: none !important; } }