/* Loading screen: the CMS sign-in and every website page. Boba pearls (js/pearls.js), the menu card's
   corner waves reaching in from all four corners, the crest in a gold ring and a progress sheen. */
body.is-booting{overflow:hidden}
.boot{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#2a211a 0%,#15110d 55%,#0c0a08 100%);color:#f4efe6;transition:opacity .6s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
.boot[hidden]{display:none}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot__glow{position:absolute;left:50%;top:44%;width:min(70vmin,620px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgb(201 169 110 / .22),rgb(201 169 110 / .06) 45%,transparent 70%);filter:blur(10px);animation:boot-glow 4.8s ease-in-out infinite alternate}
@keyframes boot-glow{from{transform:scale(.92);opacity:.75}to{transform:scale(1.08);opacity:1}}
.boot__pearls{position:absolute;inset:0;width:100%;height:100%}
.boot__wave{position:absolute;height:auto;opacity:.66;overflow:visible}
.boot__wave--tr,.boot__wave--bl{width:min(74vmin,760px)}.boot__wave--br,.boot__wave--tl{width:min(60vmin,620px)}
.boot__wave--tr{top:0;right:0}.boot__wave--bl{bottom:0;left:0;rotate:180deg}
.boot__wave--br{bottom:0;right:0}.boot__wave--tl{top:0;left:0;rotate:180deg}
.boot__wave--bl .boot__blob--a{fill:#A58BC9}.boot__wave--tl .boot__blob--b{fill:#8DB255}
.boot__blob{transform-box:view-box;transform:scale(0);animation:boot-blob-in 1.1s cubic-bezier(.34,1.56,.64,1) .15s forwards,boot-blob 5.6s ease-in-out 1.3s infinite alternate}
.boot__blob--a{transform-origin:300px 0;fill:#8DB255}.boot__blob--a .boot__in{fill:#c9a96e}
.boot__blob--b{transform-origin:300px 130px;fill:#A58BC9;animation-delay:.3s,1.5s}.boot__blob--b .boot__in{fill:#e2be7d}
.boot__in{transform-box:view-box;transform-origin:300px 0;animation:boot-in 4.2s ease-in-out 1s infinite alternate}
.boot__blob--b .boot__in{transform-origin:300px 130px}
@keyframes boot-blob-in{to{transform:scale(1)}}
@keyframes boot-blob{from{transform:scale(1) rotate(0)}to{transform:scale(1.07) rotate(-2deg)}}
@keyframes boot-in{to{transform:scale(1.14) rotate(3deg)}}
.boot__core{position:relative;display:grid;justify-items:center;gap:14px;text-align:center;animation:boot-rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes boot-rise{from{opacity:0;transform:translateY(14px) scale(.97)}}
.boot__crest{position:relative;width:132px;height:132px;display:grid;place-items:center}
.boot__crest img{width:64px;height:64px;filter:drop-shadow(0 6px 18px rgb(0 0 0 / .55));animation:boot-float 3.2s ease-in-out infinite alternate}
@keyframes boot-float{from{transform:translateY(2px) scale(.98)}to{transform:translateY(-3px) scale(1.02)}}
.boot__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.boot__track{fill:none;stroke:rgb(201 169 110 / .14);stroke-width:2}
.boot__arc{fill:none;stroke:url(#boot-g);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:96 244;transform-origin:60px 60px;animation:boot-spin 1.5s cubic-bezier(.55,.15,.45,.85) infinite;filter:drop-shadow(0 0 6px rgb(226 190 125 / .55))}
.boot__arc--in{stroke-width:1.6;stroke-dasharray:40 249;opacity:.7;animation-duration:2.3s;animation-direction:reverse}
@keyframes boot-spin{to{transform:rotate(360deg)}}
.boot__brand{margin:4px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:30px;letter-spacing:.24em;line-height:1;padding-left:.24em;background:linear-gradient(100deg,#c9a96e 20%,#fff3dc 45%,#c9a96e 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:boot-sheen 3.4s linear infinite}
.boot__brand small{display:block;margin-top:8px;font-family:Jost,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.42em;color:rgb(244 239 230 / .62);-webkit-text-fill-color:rgb(244 239 230 / .62)}
@keyframes boot-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.boot__msg{margin:6px 0 0;min-height:1.4em;font-size:14px;letter-spacing:.04em;color:rgb(244 239 230 / .82)}
.boot__bar{position:relative;width:180px;height:3px;border-radius:3px;background:rgb(201 169 110 / .16);overflow:hidden}
.boot__bar i{position:absolute;inset:0 auto 0 0;width:40%;border-radius:inherit;background:linear-gradient(90deg,transparent,#e2be7d,transparent);animation:boot-bar 1.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes boot-bar{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
.boot.is-done .boot__core{transform:scale(1.04);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.boot__glow,.boot__blob,.boot__in,.boot__crest img,.boot__arc,.boot__brand,.boot__bar i,.boot__core{animation:none}.boot__blob{transform:none}.boot__arc{stroke-dasharray:none;opacity:.6}}

/* website: shown from the first paint until the page is ready (js/boot.js); a CSS fail-safe hides it after 6 s */
.boot--site{animation:boot-away .5s ease 6s forwards}
.boot--site.is-done{animation:none}
@keyframes boot-away{to{opacity:0;visibility:hidden;pointer-events:none}}
/* the waves keep drifting a little further in while the page loads */
.boot__wave{animation:boot-reach 2.4s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes boot-reach{from{transform:scale(.72);opacity:0}}
.boot__wave--tr{transform-origin:top right}.boot__wave--br{transform-origin:bottom right} /* the left pair is turned 180deg about its centre, so it grows from there */
@media (max-width:700px){.boot__wave--tr,.boot__wave--bl{width:92vmin}.boot__wave--br,.boot__wave--tl{width:76vmin}}
@media (prefers-reduced-motion:reduce){.boot__wave{animation:none}}

/* Smooth playback: everything that moves is a whole layer moved by the compositor (transform / opacity only),
   so it stays fluid while the page underneath is still loading. Nothing is redrawn frame by frame. */
.boot__blob,.boot__in{animation:none!important;transform:none!important}
.boot__wave{will-change:transform,opacity;backface-visibility:hidden;animation:boot-reach 1.6s cubic-bezier(.2,.7,.2,1) .1s both,boot-sway 7s ease-in-out 1.8s infinite alternate}
@keyframes boot-sway{to{transform:scale(1.045)}}
.boot__glow,.boot__crest img,.boot__bar i,.boot__core{will-change:transform,opacity}
.boot__arc{filter:none}
.boot__crest::before{content:'';position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 22px rgb(226 190 125 / .18),inset 0 0 18px rgb(226 190 125 / .08);pointer-events:none}
/* boba pearls rising (website): plain elements moved by CSS, no drawing script */
.boot__beads{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.boot__beads i{position:absolute;left:var(--x);bottom:-30px;width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 34% 30%,#fff3dc 0 9%,#a8743f 24%,#5a3820 52%,#2c1a0e 78%);box-shadow:0 0 0 1px rgb(226 190 125 / .55),0 0 12px rgb(226 190 125 / .22);
  will-change:transform,opacity;backface-visibility:hidden;animation:boot-bead var(--d) linear var(--w) infinite}
@keyframes boot-bead{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{transform:translate3d(var(--dx),-112vh,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.boot__wave{animation:none}.boot__beads i{animation:none;opacity:var(--o);bottom:auto;top:var(--y)}}
/* the ring's arcs turn as whole layers; the name is a still gold gradient (a moving sheen redraws text every frame) */
.boot__arc{animation:none!important}
.boot__spin{will-change:transform;animation:boot-spin 1.5s cubic-bezier(.55,.15,.45,.85) infinite}
.boot__spin--in{animation-duration:2.3s;animation-direction:reverse}
.boot__brand{animation:none!important;background-position:50% 0!important}
@media (prefers-reduced-motion:reduce){.boot__spin{animation:none}}