.birthday-welcome { position:fixed; inset:0; box-sizing:border-box; width:100vw; height:100dvh; max-width:none; max-height:none; border:0; margin:0; padding:30px 20px; overflow:auto; background:radial-gradient(ellipse at 50% 55%,#472c3dd9,#0b1023eb 70%); color:#f5e6e7; text-align:center; }
.birthday-welcome::backdrop { background:#040719a8; backdrop-filter:blur(9px); }
.welcome-content { position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.welcome-caption { font:10px var(--font-ui,sans-serif); letter-spacing:.28em; color:#c9ab82; margin:0 0 16px; }
.birthday-welcome h2 { font:clamp(28px,5vw,46px) var(--font-story,serif); color:#f6d4a6; margin:0; text-shadow:0 0 28px #e8af6133; }
.welcome-sub { font:15px var(--font-ui,sans-serif); color:#d7bbc9; margin:14px 0 4px; }
.welcome-cake { width:min(76vw,440px,52dvh); margin:0 auto; animation:welcome-cake-in 1.1s cubic-bezier(.16,1,.3,1) both; }
.welcome-cake svg { width:100%; display:block; overflow:visible; filter:drop-shadow(0 15px 30px #05061977); }
.welcome-cake .gold-outline { filter:drop-shadow(0 0 4px #e9bb6655); }
.welcome-cake .cake-line { stroke-dasharray:100; stroke-dashoffset:100; animation:welcome-draw 1.1s ease both; animation-delay:var(--delay,0s); }
.welcome-cake .flame { fill:url(#flame); transform-box:fill-box; transform-origin:center bottom; animation:welcome-flame 1.5s ease-in-out infinite alternate; }
.welcome-tip { font-size:11px; color:#d6bbc3a6; letter-spacing:.08em; margin:16px 0; }
.welcome-dismiss { border:1px solid #f4d9ad88; border-radius:999px; padding:12px 24px; font:13px var(--font-ui,sans-serif); color:#f7dfb9; background:#f4cf9710; cursor:pointer; }
.welcome-dismiss:focus-visible { outline:2px solid #f3b8d1; outline-offset:5px; }
.welcome-sparks { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.welcome-sparks i { position:absolute; left:calc(var(--x)*1%); top:calc(var(--y)*1%); width:3px; height:3px; border-radius:50%; background:#f5dba9; box-shadow:0 0 9px #efc480; animation:welcome-spark 3s ease-in-out infinite; animation-delay:calc(var(--i)*-.13s); }
.birthday-welcome[open] { animation:welcome-fade .5s ease both; }
.birthday-welcome.welcome-leaving { animation:welcome-fade-out .42s ease both; }
@keyframes welcome-cake-in { from { opacity:0; transform:translateY(30px) scale(.65); } to { opacity:1; transform:none; } }
@keyframes welcome-draw { to { stroke-dashoffset:0; } }
@keyframes welcome-flame { to { transform:scaleY(1.12) rotate(3deg); } }
@keyframes welcome-spark { 0%,100% { opacity:.15; transform:translateY(12px) scale(.7); } 50% { opacity:.9; transform:translateY(-14px) scale(1.3); } }
@keyframes welcome-fade { from { opacity:0; } to { opacity:1; } }
@keyframes welcome-fade-out { to { opacity:0; transform:scale(1.035); } }
@media(max-width:600px) { .welcome-caption { font-size:8px; letter-spacing:.19em; } .welcome-cake { width:min(85vw,46dvh); } }
@media(prefers-reduced-motion:reduce) { .birthday-welcome, .birthday-welcome *, .birthday-welcome[open], .birthday-welcome.welcome-leaving { animation:none!important; } .welcome-cake .cake-line { stroke-dashoffset:0; } }