/** * Decorative ant trail (homepage only). Purely visual: aria-hidden, * pointer-events:none, and hidden below a min-width where there's no real * side gutter to walk in. prefers-reduced-motion is handled globally in * base.css (forces all animation-durations to ~0). * * One continuous trail spans the whole page (hero included) rather than * a separate system per section. It's position:absolute against * (see `position: relative` on body in base.css) instead of * position:fixed against the viewport — fixed has no relationship to * document position, which is what caused an earlier version to need a * second hero-only copy and a seam between the two. * * White ants + mix-blend-mode:difference contrast reliably against every * background color they cross (navy hero, white/light sections, dark * footer) without needing a per-section color override: difference * against a light bg comes out dark, against a dark bg comes out light. */ .ant-trail { display: none; position: absolute; top: 0; /* height is set from JS to document.body.scrollHeight — see main.js. A CSS-only bottom:0 doesn't work here: percentage top/bottom on an absolutely positioned element only resolves against an ancestor's height when that ancestor has an explicit (non-auto) height. */ width: 70px; pointer-events: none; overflow: hidden; /* No z-index here on purpose: an explicit z-index on a positioned element creates a new stacking context, which would isolate the ants' mix-blend-mode from the actual page content behind this container — they'd only blend against their own (transparent) backdrop, rendering as plain flat white and vanishing on light backgrounds. position:absolute alone (z-index:auto) still paints above normal-flow section backgrounds without that isolation, and the sticky header/dates-strip still cover the ants correctly since those have their own explicit z-index establishing they're above. */ } .ant-trail--left { left: 0; } .ant-trail--right { right: 0; } @media (min-width: 90em) { .ant-trail { display: block; } } .ant-trail__ant { /* left and animation-delay are set per-ant via inline style (see swarm2027_render_ant_trail()) so the stagger/jitter scales cleanly with however many ants are rendered, instead of hardcoded nth-child rules for one fixed count. */ position: absolute; width: 22px; height: 22px; color: #fff; mix-blend-mode: difference; animation: ant-walk 50s linear infinite, ant-wobble 0.6s ease-in-out infinite alternate; } /* Walking up: starts below the fold, exits off the top. Duration is long because this now spans the full page height, not one viewport. */ @keyframes ant-walk { 0% { top: 110%; } 100% { top: -10%; } } @keyframes ant-wobble { from { transform: translateX(-50%) rotate(-5deg); } to { transform: translateX(-50%) rotate(5deg); } }