/* ---------- site loader (designed in Claude Design). The markup is the first thing in <body>; src/js/loader.js decides
   when the page is ready and adds .done, then the bucket flies into the logo's "o" (.mark-o, [data-loader-target]). ---------- */
#loader{--e:cubic-bezier(.2,.8,.2,1);--R:150vmax;--cx:50%;--cy:50%;position:fixed;inset:0;z-index:2147483000;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden;background:#0E0C12;color:#EADFCF;font:700 clamp(15px,1vmin + 11px,26px)/1.3 Nunito,ui-rounded,system-ui,sans-serif;clip-path:circle(var(--R) at var(--cx) var(--cy));transition:clip-path .85s cubic-bezier(.7,0,.2,1),opacity .35s .75s}
#loader.done{--R:var(--r,0px);opacity:0;pointer-events:none}
#loader::before{content:"";position:absolute;inset:-25%;z-index:-1;background:radial-gradient(30% 30% at 50% 50%,rgba(251,176,19,.16),transparent),radial-gradient(35% 30% at 78% 80%,rgba(232,134,12,.12),transparent),radial-gradient(30% 25% at 22% 22%,rgba(255,216,102,.07),transparent);animation:mm-drift 12s ease-in-out infinite alternate}
.mm-fly{grid-row:2;position:relative;font-size:clamp(84px,17vmin,220px);transition:transform .8s var(--e)}
#loader.done .mm-fly{transform:scale(.6)}
.mm-b{display:block;width:1em;height:1em;overflow:visible;transform-origin:50% 94%;animation:mm-shake 1.5s infinite}
.mm-top{transform-box:fill-box;transform-origin:50% 100%;animation:mm-puff 1.5s infinite}
.mm-sh{position:absolute;left:5%;right:5%;bottom:-.12em;height:.2em;border-radius:50%;background:radial-gradient(closest-side,rgba(251,176,19,.4),transparent);animation:mm-sh 1.5s infinite}
.mm-pop,.mm-burst{position:absolute;left:50%;top:24%}
.mm-pop i{position:absolute;opacity:0;animation:mm-kx 1.5s var(--d) infinite linear}
.mm-pop b{display:block;width:.12em;height:.12em;margin:-.06em;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFFDF7,#FFF4DE 55%,#EED6A8);box-shadow:.05em -.04em 0 -.01em #FFF4DE,-.05em -.03em 0 -.015em #FFF4DE,.01em .05em 0 -.02em #F6E6C4;animation:mm-ky 1.5s var(--d) infinite}
.mm-burst s{position:absolute;width:.035em;height:.11em;margin-left:-.0175em;border-radius:1em;background:#FFD866;opacity:0;transform-origin:50% 100%;animation:mm-burst 1.5s infinite}
.mm-msg{grid-row:3;align-self:start;margin:clamp(28px,5vmin,64px) 0 0;padding:.6em 1.15em;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;animation:mm-in .7s var(--e) 4s forwards}
#loader.done .mm-msg{opacity:0;animation:none;transition:opacity .25s}
@keyframes mm-shake{0%,56%,100%{transform:none}4%{transform:rotate(-9deg)}9%{transform:rotate(8deg)}14%{transform:rotate(-6deg)}18.5%{transform:rotate(3deg)}24%{transform:scale(1.1,.86)}31%{transform:translateY(-9%) scale(.93,1.09)}38%{transform:translateY(-11%) scale(1,1)}45%{transform:scale(1.07,.93)}50%{transform:scale(.98,1.02)}}
@keyframes mm-puff{0%,24%,52%,100%{transform:none}31%{transform:scale(1.12,1.08)}40%{transform:scale(.97)}}
@keyframes mm-sh{0%,56%,100%{transform:none;opacity:1}24%{transform:scaleX(1.15)}38%{transform:scale(.7);opacity:.45}45%{transform:scaleX(1.12);opacity:1}}
@keyframes mm-kx{0%{transform:translateX(0);opacity:0}3%,46%{opacity:1}56%,100%{transform:translateX(calc(var(--x)*1em));opacity:0}}
@keyframes mm-ky{0%{transform:translateY(0) rotate(0) scale(.2);animation-timing-function:cubic-bezier(.2,.65,.4,1)}20%{transform:translateY(calc(var(--h)*-1em)) rotate(calc(var(--r)*.35)) scale(var(--s,1));animation-timing-function:cubic-bezier(.6,0,.8,.35)}56%,100%{transform:translateY(.75em) rotate(var(--r)) scale(var(--s,1))}}
@keyframes mm-burst{0%,25%{opacity:0;transform:rotate(var(--a)) translateY(-.34em) scaleY(.3)}28%{opacity:1;transform:rotate(var(--a)) translateY(-.44em) scaleY(1)}40%,100%{opacity:0;transform:rotate(var(--a)) translateY(-.6em) scaleY(.2)}}
@keyframes mm-drift{to{transform:translate(4%,-3%) rotate(8deg)}}
@keyframes mm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
#loader{clip-path:none;transition:opacity .45s}
.mm-pop,.mm-burst,.mm-sh{display:none}
.mm-b,.mm-top,#loader::before{animation:none}
.mm-b{animation:mm-breathe 3s ease-in-out infinite alternate}
#loader.done .mm-fly{transform:none}
.mm-msg{animation-name:mm-fade}
@keyframes mm-fade{to{opacity:1}}
@keyframes mm-breathe{from{opacity:.7}}
}

/* the page behind doesn't scroll while the loader is up */
html:has(#loader:not(.done)){overflow:hidden}
/* seasonal themes (src/js/season.js): the loader's bucket wears the hat too, and the glow takes the season's colours */
:root[data-theme] .mm-fly:after{content:"";position:absolute;left:0;top:-.3em;width:1em;height:1.3em;pointer-events:none;
  background:var(--hat) .3em 0/.62em .55em no-repeat;transform-origin:50% 95.4%;animation:mm-shake 1.5s infinite}
:root[data-theme=halloween] #loader{background:#110A17}
:root[data-theme=halloween] #loader::before{background:radial-gradient(30% 30% at 50% 50%,rgba(255,140,26,.18),transparent),radial-gradient(35% 30% at 78% 80%,rgba(124,58,237,.2),transparent),radial-gradient(30% 25% at 22% 22%,rgba(124,58,237,.14),transparent)}
:root[data-theme=christmas] #loader{background:#0C0F14}
:root[data-theme=christmas] #loader::before{background:radial-gradient(30% 30% at 50% 50%,rgba(251,176,19,.15),transparent),radial-gradient(35% 30% at 78% 80%,rgba(46,160,90,.16),transparent),radial-gradient(30% 25% at 22% 22%,rgba(229,72,77,.16),transparent)}
@media (prefers-reduced-motion:reduce){:root[data-theme] .mm-fly:after{animation:none}}