.app-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;isolation:isolate;overflow:hidden;background:#07070b;color:#fff;animation:intro-fallback .2s 7s forwards}
.intro-art{text-align:center;width:min(76vw,440px);filter:drop-shadow(0 0 45px #ad32f12b)}
.intro-art img{display:block;width:100%;height:auto;border-radius:24%;box-shadow:0 0 0 1px #ffffff18,0 24px 90px #000}
.intro-art p{font-size:clamp(13px,3.5vw,18px);font-weight:700;color:#e7d7ff;margin:24px 0 0;letter-spacing:.4px}
.skip-intro{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:3;background:#111720d9;color:#fff;border:1px solid #ffffff55;border-radius:99px;padding:12px 19px;font-size:13px}
.witch-brew{position:absolute;inset:0;z-index:2;transform:translateY(-135%);background:radial-gradient(ellipse at 23% 40%,#d0ff34 0%,transparent 45%),radial-gradient(ellipse at 80% 20%,#66ff48 0%,transparent 50%),linear-gradient(#57d629,#a5f229 60%,#75df24);box-shadow:0 0 70px #92ff3380}
.brew-drips{position:absolute;top:calc(100% - 1px);left:0;width:100%;height:clamp(65px,15vh,150px);fill:#75df24;filter:drop-shadow(0 12px 13px #17230588)}
.brew-bubble{position:absolute;border-radius:50%;border:3px solid #efffb277;box-shadow:inset 8px 8px 14px #f6ffb846,0 0 25px #66a30020;width:65px;height:65px}
.bubble-a{left:12%;top:22%;width:100px;height:100px}.bubble-b{left:65%;top:55%}.bubble-c{left:42%;top:72%;width:32px;height:32px}.bubble-d{left:85%;top:13%;width:44px;height:44px}
.app-intro.is-pouring{background:transparent}
.is-pouring .intro-art{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#07070b;animation:hide-intro-art 2.5s linear forwards}
.is-pouring .intro-art img{width:min(76vw,440px)}
.is-pouring .witch-brew{animation:pour-brew 2.5s cubic-bezier(.45,0,.3,1) forwards}
.is-pouring .brew-bubble{animation:brew-bob .8s ease-in-out infinite alternate}
@keyframes pour-brew{0%{transform:translateY(-135%)}45%,55%{transform:translateY(0)}100%{transform:translateY(135%)}}
@keyframes hide-intro-art{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes brew-bob{to{translate:0 -25px;scale:1.08}}
@keyframes intro-fallback{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(max-height:600px){.intro-art,.is-pouring .intro-art img{width:min(52vh,340px)}.intro-art p{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.app-intro{animation:intro-fallback .15s 1.5s forwards!important}.witch-brew{display:none}.is-pouring .intro-art{animation:none!important}}