:root {
  --pm-ease: cubic-bezier(.22, 1, .36, 1);
  --pm-skel-a: rgba(15, 23, 42, .06);
  --pm-skel-b: rgba(15, 23, 42, .12);
}

html[data-bs-theme="dark"] {
  --pm-skel-a: rgba(255, 255, 255, .06);
  --pm-skel-b: rgba(255, 255, 255, .14);
}

@keyframes pm-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes pm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

html:not(.hm-js) body > .flex-grow-1,
html:not(.hm-js) body > .bp-page,
html:not(.hm-js) body > .pr-page {
  animation: pm-page-in .32s var(--pm-ease) backwards;
}

img.pm-wait {
  opacity: 0;
}

img.pm-done {
  opacity: 1;
  transition: opacity .4s var(--pm-ease);
}

.pm-skel {
  background-color: var(--pm-skel-a);
  background-image: linear-gradient(100deg, transparent 20%, var(--pm-skel-b) 50%, transparent 80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: pm-shimmer 1.4s linear infinite;
  border-radius: .75rem;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.hm-js) body > .flex-grow-1,
html:not(.hm-js) body > .bp-page,
html:not(.hm-js) body > .pr-page {
    animation: none;
  }

  img.pm-done {
    transition: none;
  }

  .pm-skel {
    animation: none;
    background-image: none;
  }
}