/** * Seasonal theme overlays — data-season attr is set on by * agency-enhancements.js. Include this CSS on pages that opt in. */ html[data-season] body { position: relative; } html[data-season="halloween"] body::before { content:'🎃'; position:fixed; top:14px; left:14px; font-size:2rem; opacity:0.28; pointer-events:none; z-index:80; animation:agency-season-bob 6s ease-in-out infinite; } html[data-season="halloween"] body::after { content:'🕷️'; position:fixed; bottom:14px; left:14px; font-size:1.5rem; opacity:0.24; pointer-events:none; z-index:80; } html[data-season="christmas"] body::before { content:'🎄'; position:fixed; top:14px; left:14px; font-size:2rem; opacity:0.32; pointer-events:none; z-index:80; animation:agency-season-bob 8s ease-in-out infinite; } html[data-season="christmas"] body::after { content:'❄️'; position:fixed; bottom:14px; left:14px; font-size:1.5rem; opacity:0.30; pointer-events:none; z-index:80; animation:agency-season-spin 12s linear infinite; } html[data-season="spring"] body::before { content:'🌸'; position:fixed; top:14px; left:14px; font-size:1.8rem; opacity:0.30; pointer-events:none; z-index:80; animation:agency-season-bob 7s ease-in-out infinite; } html[data-season="spring"] body::after { content:'🌱'; position:fixed; bottom:14px; left:14px; font-size:1.5rem; opacity:0.28; pointer-events:none; z-index:80; } @keyframes agency-season-bob { 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-8px) rotate(4deg); } } @keyframes agency-season-spin { from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { html[data-season] body::before, html[data-season] body::after { animation: none; } }