/* Book flipping loading animation */
.dash-spinner {
  --hue: 223;
  --primary: hsl(var(--hue),90%,55%);
  --primary-l: hsl(var(--hue),90%,65%);
  --primary-d: hsl(var(--hue),90%,45%);
  --white: hsl(var(--hue),10%,100%);
  --white-d: hsl(var(--hue),10%,45%);
  background: linear-gradient(90deg, var(--primary-l) 0%, var(--primary-d) 50%, var(--primary-l) 100%);
  border-radius: 0.25em;
  box-shadow:
    0 0.25em 0.5em hsla(0,0%,0%,0.3),
    0 0 0 0.25em var(--primary) inset,
    inset 0 0 0.5em hsla(0,0%,0%,0.05),
    inset 0.05em 0.05em 0.25em hsla(0,0%,0%,0.1);
  padding: 0.25em;
  position: relative;
  width: 8em !important;
  height: 6em !important;
  animation: cover 3s ease-in-out infinite;
}

/* Hide all default spinner content */
.dash-spinner > * {
  display: none !important;
}

.dash-spinner::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.25em;
  width: calc(50% - 0.25em);
  height: calc(100% - 0.5em);
  background-color: var(--white);
  background-image: linear-gradient(90deg,hsla(var(--hue),10%,90%,0) 87.5%,hsl(var(--hue),10%,90%));
  animation: pageFlip 3s ease-in-out infinite;
  transform-origin: 100% 50%;
}

/* Animations */
@keyframes cover {
  0%, 100% {
    background-color: var(--primary-l);
  }
}

@keyframes pageFlip {
  0%, 50%, 100% {
    transform: rotateY(0deg);
    background-color: var(--white);
  }
  25%, 75% {
    transform: rotateY(180deg);
    background-color: var(--white);
  }
}

/* Loading overlay for pages */
.page-loading-overlay {
  position: fixed;
  top: 60px; /* Below header */
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background: rgba(255,255,255,0.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}