* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #262759; color: #fff; font-family: "Nunito", system-ui, sans-serif; }
.sky { position: fixed; inset: 0; background: radial-gradient(50% 40% at 70% 30%, rgba(255,214,150,.45), transparent 70%), linear-gradient(180deg, #262759 0%, #7b5690 55%, #f29b6d 100%); }
.sky::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff8, transparent), radial-gradient(1.5px 1.5px at 34% 9%, #fff9, transparent), radial-gradient(2px 2px at 58% 22%, #fffa, transparent), radial-gradient(1.5px 1.5px at 82% 12%, #fff8, transparent), radial-gradient(1.5px 1.5px at 92% 30%, #fff7, transparent), radial-gradient(1.5px 1.5px at 22% 34%, #fff6, transparent); }
.room { position: fixed; inset: 0; }
.backdrop { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none; }
.backdrop svg { width: 100%; height: 100%; display: block; }
#figure { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; filter: brightness(0) drop-shadow(0 0 16px rgba(255,214,140,.85)); }
.copy { position: fixed; z-index: 3; left: clamp(20px, 7vw, 120px); top: 38%; transform: translateY(-50%); max-width: min(680px, 88vw); }
h1 { font: 800 clamp(44px, 6.4vw, 96px)/1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100; letter-spacing: -.02em; text-shadow: 0 4px 30px rgba(30,20,70,.4); }
p { margin-top: 20px; font: 800 clamp(19px, 1.9vw, 27px)/1.4 "Nunito", sans-serif; color: #fff; opacity: .92; text-shadow: 0 2px 14px rgba(30,20,70,.5); }
.follow { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 13px 24px; border-radius: 999px; background: linear-gradient(180deg, #ffd56a, #f6c04a); color: #2e1d15; font: 800 17px "Nunito", sans-serif; text-decoration: none; box-shadow: 0 5px 0 -1px #c98712, 0 16px 28px -14px rgba(0,0,0,.6); }
.follow svg { width: 16px; height: 16px; fill: currentColor; }
.follow:hover { transform: translateY(-1px); }
.copy > * { animation: rise 1.1s cubic-bezier(.2,.75,.15,1) both; }
.copy > :nth-child(2) { animation-delay: .15s; } .copy > :nth-child(3) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
[hidden] { display: none !important; }
@media (max-width: 760px) { .copy { top: 30%; } }
@media (prefers-reduced-motion: reduce) { .copy > * { animation: none; } }