/* ══════════════════════════════════════════════════════════════════════════ STORIES BY JEZ · snake.css — shared "living" overlay. Pairs with snake-bg.js. Defines the breathing --temp accent defaults and a subtle, stories-native ember flicker for the wordmark "EZ" (.lam) and any element tagged .snake-ember. NOT a glitch, NOT a λ — the mark simply breathes with the same scarlet→magenta→orange --temp the embers drift through. Include LAST in so it layers over each page's own styles. ══════════════════════════════════════════════════════════════════════════ */ :root { --temp: #b30000; /* scarlet default before snake-bg.js drifts it */ --temp-soft: rgba(179, 0, 0, .5); } /* keep the ember canvas behind everything (snake-bg.js also sets this inline) */ #snakeEmbers { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* ── wordmark ember flicker ────────────────────────────────────────────────── Colour lives in the @keyframes so it overrides each page's own .lam colour rule (animated declarations win the cascade regardless of selector specificity — no !important needed). Gentle: a slow breath, not a strobe. */ @keyframes snakeEmber { 0%, 100% { color: var(--temp); text-shadow: 0 0 6px var(--temp-soft); opacity: .93; } 50% { color: var(--temp); text-shadow: 0 0 16px var(--temp-soft), 0 0 30px var(--temp-soft); opacity: 1; } } .lam, .snake-ember { animation: snakeEmber 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .lam, .snake-ember { animation: none; color: var(--temp); text-shadow: 0 0 10px var(--temp-soft); } }