/* "Meet Maloosam" intro: the cat talks inside cartoon clouds, a bee flies around */
.meet{position:fixed;inset:0;z-index:150;overflow:hidden;direction:rtl;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--sky-3) 100%);animation:mfade .45s ease both}
.meet.out{animation:mfadeout .35s ease both}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mfadeout{to{opacity:0}}
.meet .cl,.meet .ground{pointer-events:none}
.meet .ground{height:24%;bottom:-8%}
.m-cat{position:absolute;left:50%;bottom:14svh;transform:translateX(-50%);z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-bubble{position:absolute;left:50%;top:6svh;--bw:min(94vw,620px,66svh);width:var(--bw);aspect-ratio:720/492;margin-left:calc(var(--bw) / -2);
  container-type:inline-size;z-index:5;transform-origin:50% 100%;will-change:transform,opacity}
.m-bubble>img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 8px 0 rgba(60,30,0,.10))}
.m-text{position:absolute;inset:36% 15% 20% 15%;display:flex;align-items:center;justify-content:center;text-align:center;
  color:#3a2512;font-weight:800;font-size:clamp(13px,4.3cqw,26px);line-height:1.8}
.m-text p{margin:0;width:100%}
.m-text span{opacity:0;transition:opacity .2s}
.m-text span.on{opacity:1}
.m-tail{position:absolute;left:50%;top:calc(6svh + min(94vw,620px,66svh) * .683 - 6px);z-index:4;pointer-events:none}
.m-tail i{position:absolute;border-radius:50%;background:#fff;border:3px solid #5a3217;box-shadow:0 4px 0 rgba(60,30,0,.1)}
.m-tail i:nth-child(1){width:22px;height:22px;left:-11px;top:0}
.m-tail i:nth-child(2){width:13px;height:13px;left:-2px;top:26px}
.m-bee{position:absolute;left:0;top:0;z-index:4;pointer-events:none;will-change:transform}
.m-bee i{display:block;width:64px;height:58px;background:url(../sprites/bee.webp) 0 0/1024px 58px no-repeat;animation:beeflap .8s steps(16) infinite}
@keyframes beeflap{to{background-position:-1024px 0}}
.m-ui{position:absolute;left:0;right:0;bottom:calc(3svh + env(safe-area-inset-bottom,0px));z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px}
.m-next{min-width:170px;padding:13px 40px 11px;font-size:21px;border-radius:18px;background:var(--sun,#f28c28);color:#2b1503;box-shadow:0 5px 0 #b96612;border:0}
.m-next:active{box-shadow:0 2px 0 #b96612;transform:translateY(3px)}
.m-dots{display:flex;gap:8px}
.m-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid #5a3217;transition:transform .25s,background .25s}
.m-dots i.on{background:var(--sun,#f28c28);transform:scale(1.35)}
.m-skip{position:absolute;top:max(10px,env(safe-area-inset-top,0px));left:12px;z-index:7;padding:7px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.75);color:#5a3217;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.m-skip:hover{background:#fff}
@media (prefers-reduced-motion: reduce){.meet,.meet.out{animation:none}.m-bee i{animation:none}.m-text p{margin:0;width:100%}
.m-text span{transition:none}}

.m-bird i,.m-bfly i{display:block;height:80px;background-repeat:no-repeat;background-position:0 0}
.m-bird i{width:80px;background-image:url(../sprites/bird.webp);background-size:644px 80px;animation:birdflap 1.1s steps(8) infinite}
.m-bfly i{width:81px;background-image:url(../sprites/butterfly.webp);background-size:648px 80px;animation:bflyflap .9s steps(8) infinite}
@keyframes birdflap{to{background-position:-644px 0}}
@keyframes bflyflap{to{background-position:-648px 0}}
@media (prefers-reduced-motion: reduce){.m-bird i,.m-bfly i{animation:none}}

.m-mtn{position:absolute;bottom:-2svh;height:min(34svh,52vw);width:auto;max-width:none;z-index:2;pointer-events:none;user-select:none;-webkit-user-drag:none}
.m-mtn.l{left:0}
.m-mtn.r{right:0}