:root { color-scheme: dark; background: #481cff; color: #fff; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; isolation: isolate; }
.ambience { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #481cff; }
.orb { position: absolute; width: clamp(430px, 75vw, 1150px); aspect-ratio: 1; border-radius: 50%; filter: blur(55px); animation: drift 26s ease-in-out infinite alternate; }
.orb-violet { left: -22%; top: -42%; background: radial-gradient(circle, rgb(180 99 255 / .82), rgb(155 70 255 / .38) 38%, transparent 68%); }
.orb-blue { right: -24%; bottom: -42%; background: radial-gradient(circle, rgb(37 166 255 / .8), rgb(38 125 255 / .38) 38%, transparent 68%); animation-delay: -9s; animation-duration: 32s; }
.orb-indigo { left: -20%; bottom: -50%; background: radial-gradient(circle, rgb(24 9 128 / .68), rgb(42 16 177 / .32) 40%, transparent 68%); animation-delay: -17s; animation-duration: 29s; }
@keyframes drift { from { transform: translate3d(-2%, -2%, 0) scale(1); } to { transform: translate3d(9%, 8%, 0) scale(1.1); } }
main { min-height: 100svh; display: grid; place-items: center; padding: 32px; overflow: hidden; }
.identity { width: min(760px, 100%); text-align: center; }
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 2.6s cubic-bezier(.4,0,.2,1) var(--delay) backwards; }
.final-dots rect { animation: soon-in .16s ease-out 1.9s backwards; }
.final-dots rect:nth-child(2) { animation-delay: 2.1s; }
.final-dots rect:nth-child(3) { animation-delay: 2.3s; }
.letter { stroke: white; stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; animation: letter-draw 1.5s cubic-bezier(.4,0,.2,1) var(--letter-delay) backwards, letter-fill .7s ease calc(var(--letter-delay) + 1.1s) backwards; }
h1 { margin: 48px 0 0; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .32em; text-transform: uppercase; animation: soon-in 1s ease 4.2s backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes letter-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes letter-fill { from { fill-opacity: 0; stroke-opacity: 1; } to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes soon-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { main { padding: 28px; } h1 { margin-top: 32px; font-size: 10px; letter-spacing: .28em; } .orb { filter: blur(38px); } .orb-violet { left: -35%; top: -7%; } .orb-blue { right: -35%; bottom: -4%; } .orb-indigo { left: -45%; bottom: -18%; } }
@media (prefers-reduced-motion: reduce) { .draw, .letter, .final-dots rect, .orb, h1 { animation: none; } }