/* loader.css — bc.♡ writes itself; the Maltese sits small in the corner */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
  cursor: pointer;
}
.loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loader canvas { width: min(280px, 58vw); aspect-ratio: 1120 / 900; }
.loader .pup-loader {
  position: absolute;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  width: clamp(64px, 7vw, 92px);
  height: auto;
  opacity: 0; transform: translateY(10px);
  animation: pup-in .8s .4s var(--spring) forwards, pup-bob 2.4s 1.2s ease-in-out infinite;
}
.loader .skip { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); translate: -50% 0; font-size: .74rem; color: var(--muted); letter-spacing: .04em; opacity: 0; animation: fade 1s 1.6s forwards; }
@keyframes pup-in { to { opacity: 1; transform: none; } }
@keyframes pup-bob { 50% { translate: 0 -4px; } }
@keyframes fade { to { opacity: 1; } }
.no-loader .loader { display: none; }