.sb-intro { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 50% 35%,#2176bd,#144a7a 85%); color:white; font-family:system-ui,sans-serif; }
.sb-intro-center { text-align:center; padding:24px; }
.sb-icon { position:relative; width:min(62vw,256px); aspect-ratio:1; margin:auto; border-radius:19%; overflow:hidden; box-shadow:0 24px 70px #082e5350; }
.sb-icon svg,.sb-icon img { position:absolute; inset:0; width:100%; height:100%; }
.sb-icon img { opacity:0; animation:sb-final 3s linear both; }
.sb-intro h1 { margin:30px 0 10px; font-size:32px; letter-spacing:.12em; animation:sb-text 3s ease both; }
.sb-intro p { margin:0; color:#cfe7fa; font-size:15px; line-height:1.6; animation:sb-text 3s ease both; }
.sb-intro-footer { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:20px; right:20px; text-align:center; font-size:12px; color:#cfe7fa; }
.sb-progress { width:120px; height:3px; background:#246390; margin:14px auto; overflow:hidden; border-radius:3px; }
.sb-progress::after { content:''; display:block; background:#ffc933; height:100%; transform-origin:left; animation:sb-progress 3s linear both; }
.sb-skip { display:block; width:auto; margin:10px auto 0; padding:8px 16px; border:1px solid #ffffff60; border-radius:20px; background:transparent; color:white; cursor:pointer; font:inherit; }
.sb-skip:focus-visible { outline:3px solid #ffc933; outline-offset:4px; }
.sb-waves { animation:sb-waves 3s ease-out both; }
.sb-card { animation:sb-card 3s cubic-bezier(.22,1,.36,1) both; }
.sb-pole { transform-origin:216px 228px; animation:sb-pole 3s ease-out both; }
.sb-umbrella { transform-origin:216px 188px; animation:sb-umbrella 3s cubic-bezier(.22,1,.36,1) both; }
.sb-person { animation:sb-person 3s ease-out both; }
.sb-lines { transform-origin:216px 270px; animation:sb-lines 3s ease-out both; }
@keyframes sb-waves { 0% { transform:translate(-70px,180px); opacity:0; } 35%,100% { transform:translate(0,0); opacity:1; } }
@keyframes sb-card { 0%,10% { transform:translate(-150px,60px); opacity:0; } 38%,100% { transform:translate(0,0); opacity:1; } }
@keyframes sb-pole { 0%,28% { transform:scaleY(0); } 46%,100% { transform:scaleY(1); } }
@keyframes sb-umbrella { 0%,34% { transform:scale(0); opacity:0; } 60%,100% { transform:scale(1); opacity:1; } }
@keyframes sb-person { 0%,36% { transform:translateX(-40px); opacity:0; } 53%,100% { transform:translateX(0); opacity:1; } }
@keyframes sb-lines { 0%,42% { transform:scaleX(0); opacity:0; } 68%,100% { transform:scaleX(1); opacity:1; } }
@keyframes sb-text { 0%,52% { transform:translateY(12px); opacity:0; } 70%,100% { transform:translateY(0); opacity:1; } }
@keyframes sb-final { 0%,72% { opacity:0; } 82%,100% { opacity:1; } }
@keyframes sb-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce) { .sb-intro { display:none; } }