:root { color-scheme: light; --cream: #f3e8d5; --orange: #ff5500; --ink: #26011e; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cream); color: var(--ink); font-family: 'Century Gothic', 'Trebuchet MS', sans-serif; }
.canvas { min-height: 100svh; position: relative; overflow: hidden; display: grid; place-items: center; padding: 64px 24px; isolation: isolate; }
.atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.character { position: absolute; width: min(68vw, 700px); height: auto; left: 50%; top: 50%; opacity: .12; filter: blur(24px); mix-blend-mode: multiply; transform: translate(-50%, -50%); animation: drift 14s ease-in-out infinite alternate; }
.orbit { position: absolute; width: min(90vw, 1060px); aspect-ratio: 1; border: 1px solid rgb(255 85 0 / .13); border-radius: 50%; left: 50%; top: 50%; }
.orbit-one { transform: translate(-50%, -50%) rotate(-28deg) scaleY(.65); animation: orbit 32s linear infinite; }
.orbit-two { width: min(108vw, 1260px); transform: translate(-50%, -50%) rotate(28deg) scaleY(.7); border-color: rgb(255 85 0 / .065); }
.orbit-one::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); left: 14%; top: 14%; }
.composition { width: 100%; text-align: center; }
.logo { display: block; width: min(64vw, 520px); height: auto; margin: 0 auto 48px; mix-blend-mode: multiply; animation: enter 1.3s cubic-bezier(.16, 1, .3, 1) both; }
h1 { margin: 0; font-size: clamp(25px, 3.2vw, 43px); font-weight: 400; line-height: 1.2; letter-spacing: -.045em; animation: enter 1.3s .15s cubic-bezier(.16, 1, .3, 1) both; }
.status { margin: 35px 0 0; display: flex; justify-content: center; align-items: center; gap: 11px; font-size: 10px; font-weight: 700; letter-spacing: .23em; color: #8e000b; animation: enter 1.3s .3s cubic-bezier(.16, 1, .3, 1) both; }
.spark { display: inline-block; font-size: 24px; line-height: 1; color: var(--orange); animation: spin 16s linear infinite; }
@keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift { from { transform: translate(-50%, -49%) rotate(-3deg); } to { transform: translate(-48%, -53%) rotate(3deg); } }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(332deg) scaleY(.65); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .logo { width: 80vw; margin-bottom: 38px; } .character { width: 115vw; filter: blur(20px); } .orbit { width: 150vw; } .orbit-two { width: 180vw; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }