/* ============================================================
   Loading Animation — Shoka cat
   ============================================================ */

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: var(--grey-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

#loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.cat {
  position: relative;
  width: 100%;
  max-width: 20em;
  overflow: hidden;
  background: var(--grey-1);
}
.cat::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cat > * { position: absolute; }

.cat .body {
  top: 15%; left: 25%; width: 50%; height: 65%;
  background: var(--grey-7);
  border-radius: 40% 40% 30% 30%;
  animation: catBody 2s ease-in-out infinite;
}

.cat .head {
  top: 6%; left: 12%; width: 38%; height: 30%;
  background: var(--grey-7);
  border-radius: 50% 50% 40% 40%;
}

.cat .face {
  position: absolute; top: 30%; left: 20%; width: 60%; height: 40%;
}

.cat .foot { top: 72%; left: 18%; width: 64%; height: 18%; }

.cat .tummy-end {
  position: absolute; top: 0; left: 0; width: 100%; height: 50%;
  background: var(--grey-7); border-radius: 0 0 30% 30%;
}

.cat .bottom { position: absolute; top: 40%; width: 100%; height: 60%; }

.cat .legs {
  position: absolute; bottom: 0; width: 22%; height: 50%;
  background: var(--grey-7); border-radius: 0 0 25% 25%;
}
.cat .legs.left { left: 10%; }
.cat .legs.right { right: 10%; }

.cat .paw { bottom: 0; left: 12%; width: 76%; height: 12%; }

.cat .hands {
  position: absolute; bottom: 0; width: 25%; height: 100%;
  background: var(--grey-7); border-radius: 30% 30% 0 0;
}
.cat .hands.left { left: 14%; }
.cat .hands.right { right: 14%; }

@keyframes catBody {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.5em); }
}

[data-theme="dark"] .cat .body,
[data-theme="dark"] .cat .head,
[data-theme="dark"] .cat .tummy-end,
[data-theme="dark"] .cat .legs,
[data-theme="dark"] .cat .hands {
  background: var(--grey-6);
}