:root { --pumpkin: #ff9248; /* lighter brand — opening state */ --espresso: #1f160d; /* darker brand — settled state */ --cream: #f0e2cd; /* legible headline on espresso */ --anim: 2s; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--pumpkin); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } .stage { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; } .mark { width: 160px; height: 160px; filter: drop-shadow(0 8px 24px rgba(31, 22, 13, 0.35)); } .title { margin: 0; font-size: clamp(2rem, 8vw, 5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--espresso); text-align: center; } /* Gated on window.load by script.js adding .run to . Drives both surfaces in sync so the headline stays legible from pumpkin to espresso. */ body.run { animation: darken var(--anim) ease forwards; } body.run .title { animation: lighten var(--anim) ease forwards; } @keyframes darken { from { background: var(--pumpkin); } to { background: var(--espresso); } } @keyframes lighten { from { color: var(--espresso); } to { color: var(--cream); } } @media (prefers-reduced-motion: reduce) { body.run, body.run .title { animation-duration: 0.01ms; } }