/* ============================================================ MOSQUITOS — ambient texture across every locked page. Unified under the panic-flap (scaleX) system from the result page. Per-fly timing comes from JS at spawn time so no two flies flap in sync. Wing transform-origin is set inline on the SVG paths via the symbol definition. USAGE: 1. Drop once in (see /partials/mosquito-symbol.html). 2. Define a FLY_LAYOUT for the page in its inline script and call spawnFlies() from /shared/mosquitos.js. 3. Hover triggers fly-off (handled globally in mosquitos.js). ============================================================ */ .sparkle, .floating-star { position: absolute; pointer-events: auto; cursor: default; transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.9s ease; will-change: transform, opacity; z-index: 2; } .sparkle svg, .floating-star svg { width: 100%; height: 100%; pointer-events: none; display: block; } .sparkle.flew, .floating-star.flew { opacity: 0; pointer-events: none; } /* Resting wing-flap. Mostly still, brief panic-squish at the end of each cycle. JS overrides animation-duration and animation-delay per fly at spawn so they don't sync. */ .sparkle svg .fly-wing-l, .floating-star svg .fly-wing-l { animation: wingFlapL 9s ease-in-out infinite; transform-box: fill-box; transform-origin: 100% 50%; } .sparkle svg .fly-wing-r, .floating-star svg .fly-wing-r { animation: wingFlapR 9s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 50%; } @keyframes wingFlapL { 0%, 90%, 100% { transform: scaleX(1); } 91% { transform: scaleX(0.4); } 92% { transform: scaleX(0.7); } 93% { transform: scaleX(0.3); } 94% { transform: scaleX(0.7); } 95% { transform: scaleX(0.4); } 96% { transform: scaleX(1); } } @keyframes wingFlapR { 0%, 90%, 100% { transform: scaleX(1); } 91% { transform: scaleX(0.4); } 92% { transform: scaleX(0.7); } 93% { transform: scaleX(0.3); } 94% { transform: scaleX(0.7); } 95% { transform: scaleX(0.4); } 96% { transform: scaleX(1); } }