/* The loading cover: a latte being poured (seen from above: the stream lands, the white grows,
   a heart appears), a progress bar that follows the real loading steps, and a line that changes.
   Pure CSS transforms and opacity, so the animation keeps running on the compositor even while
   the page is busy preparing its shaders. */
#loading.loader{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:radial-gradient(120% 90% at 50% 40%,#2a1d15,#120c08 70%);color:#f4ede4;transition:opacity .8s ease;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;letter-spacing:normal;font-size:14px}
#loading .ld-art{position:relative;width:180px;height:180px}
/* the cup from above: saucer, rim, coffee */
#loading .ld-saucer{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#f3efe9 58%,#e3ddd5 70%,#cfc8bf 71%,#f1ece6 73%);
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
#loading .ld-cup{position:absolute;inset:28px;border-radius:50%;background:#fbf8f4;box-shadow:inset 0 -3px 8px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.25)}
#loading .ld-coffee{position:absolute;inset:38px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 45% 40%,#c98a4b,#a5652e 55%,#7a4520 100%)}
/* the white: grows where the stream lands, then (an SVG morph in the markup, same 4 s loop) its
   outline turns into a heart as the stream pulls through: the far edge dips into the notch, the
   near edge draws out to the point */
#loading .ld-milk{position:absolute;left:50%;top:50%;width:76px;height:69px;margin:-35px 0 0 -38px;
  transform:scale(0);opacity:0;animation:ld-milk 4s infinite;overflow:visible}
@keyframes ld-milk{
  0%,9%{transform:scale(0);opacity:0}
  12%{opacity:1}
  44%{transform:scale(1);opacity:1}
  90%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:0}}
/* the stream, from the jug above down to where it lands (its length = how far down it lands):
   in at the centre, then thin to the white's far edge, straight through it toward you, and the
   jug lifts away: the stream pulls up and out */
#loading .ld-stream{position:absolute;left:50%;top:-70px;width:6px;margin-left:-3px;height:200px;border-radius:3px;
  background:linear-gradient(#fffaf2,#f6ecdd);transform-origin:50% 0;transform:scale(1,0);animation:ld-stream 4s infinite;
  box-shadow:0 0 6px rgba(255,250,240,.35)}
@keyframes ld-stream{
  0%{transform:scale(1,0);animation-timing-function:ease-in}
  10%{transform:scale(1,.8)}
  44%{transform:scale(1,.8);animation-timing-function:ease-in-out}
  50%{transform:scale(.45,.64);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  62%{transform:scale(.4,.98);animation-timing-function:ease-in}
  70%{transform:scale(.3,0)}
  100%{transform:scale(1,0)}}
#loading .ld-brand{font-size:12px;letter-spacing:.42em;color:#c9a57a;margin-top:6px}
#loading .ld-bar{width:min(240px,62vw);height:3px;border-radius:2px;background:rgba(244,237,228,.14);overflow:hidden}
#loading .ld-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(.04);
  background:linear-gradient(90deg,#c8894d,#e8c9a0);transition:transform .5s ease-out}
#loading .ld-line{min-height:1.4em;font-size:13px;color:rgba(244,237,228,.72);transition:opacity .3s}
#loading .ld-line.out{opacity:0}
#loading .err{max-width:80vw;text-align:center;line-height:1.7}
@media (prefers-reduced-motion:reduce){
  #loading .ld-stream{animation:none;opacity:0}
  #loading .ld-milk{animation:none;transform:none;opacity:1}
}