/* A finite, decorative welcome. The accepted signup and actions work without motion. */
.welcome-mark{position:relative;display:grid;place-items:center;isolation:isolate;width:100%;height:156px;margin:0 0 12px;overflow:hidden;pointer-events:none}
.welcome-mark img{position:relative;z-index:1;width:112px;height:112px;object-fit:contain;border-radius:50%;box-shadow:0 0 0 7px #ffdc36;transform-origin:50% 85%}
.welcome-burst{position:absolute;inset:50% auto auto 50%;width:0;height:0}
.welcome-burst i{position:absolute;width:8px;height:15px;border-radius:2px;background:#0648c9;opacity:0;--angle:calc(var(--piece)*30deg);transform:rotate(var(--angle)) translateY(-38px)}
.welcome-burst i:nth-child(3n+2){background:#ff5a45;border-radius:50%;height:8px}
.welcome-burst i:nth-child(3n){background:#ffdc36}
@media(prefers-reduced-motion:no-preference){
 .welcome-play .welcome-mark img{animation:welcome-arrival 950ms cubic-bezier(.2,.8,.3,1) both}
 .welcome-play .welcome-burst i{animation:welcome-confetti 1100ms ease-out 120ms both}
 @keyframes welcome-arrival{0%{transform:translateY(18px) scale(.65) rotate(-12deg);opacity:0}45%{transform:translateY(-7px) scale(1.08) rotate(7deg);opacity:1}70%{transform:translateY(2px) scale(.98) rotate(-3deg)}100%{transform:none;opacity:1}}
 @keyframes welcome-confetti{0%{opacity:0;transform:rotate(var(--angle)) translateY(-38px) scale(.4)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-112px) rotate(85deg) scale(.7)}}
}