/* Hide everything except the loader until the flipbook is ready */
html.is-loading,
html.is-loading body {
  overflow: hidden !important;
  height: 100% !important;
  margin: 0 !important;
}
html.is-loading body > *:not(#flipbook-loader) {
  visibility: hidden !important;
}
html.is-loading body {
  background: #fff !important;
}
#flipbook-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #fff;
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}
#flipbook-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.flipbook-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.flipbook-loader-text {
  font:
    14px "Vazirmatn",
    sans-serif;
  color: #8ea1bd;
}

.loader {
  --color-1: #979794;
  --color-2: #f5f5f5;
  --color-3: #ddd;
  --color-4: rgba(0, 0, 0, 0.25);
  --color-5: #fff;
  --size: 1px;

  width: calc(200 * var(--size));
  height: calc(140 * var(--size));
  background: var(--color-1);
  box-sizing: border-box;
  position: relative;
  border-radius: calc(8 * var(--size));
  perspective: calc(1000 * var(--size));
}

.loader:before {
  content: "";
  position: absolute;
  left: calc(10 * var(--size));
  right: calc(10 * var(--size));
  top: calc(10 * var(--size));
  bottom: calc(10 * var(--size));
  border-radius: calc(8 * var(--size));
  background: var(--color-2) no-repeat;
  background-size: calc(60 * var(--size)) calc(10 * var(--size));
  background-image:
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0),
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0),
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0),
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0),
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0),
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0);

  background-position:
    calc(15 * var(--size)) calc(30 * var(--size)),
    calc(15 * var(--size)) calc(60 * var(--size)),
    calc(15 * var(--size)) calc(90 * var(--size)),
    calc(105 * var(--size)) calc(30 * var(--size)),
    calc(105 * var(--size)) calc(60 * var(--size)),
    calc(105 * var(--size)) calc(90 * var(--size));
  box-shadow: 0 0 calc(10 * var(--size)) var(--color-4);
}
.loader:after {
  content: "";
  position: absolute;
  width: calc(50% - calc(10 * var(--size)));
  right: calc(10 * var(--size));
  top: calc(10 * var(--size));
  bottom: calc(10 * var(--size));
  border-radius: calc(8 * var(--size));
  background: var(--color-5) no-repeat;
  background-size: calc(60 * var(--size)) calc(10 * var(--size));
  background-image:
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0),
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0),
    linear-gradient(var(--color-3) calc(100 * var(--size)), transparent 0);
  background-position:
    50% calc(30 * var(--size)),
    50% calc(60 * var(--size)),
    50% calc(90 * var(--size));
  transform: rotateY(0deg);
  transform-origin: left center;
  animation: paging 1s linear infinite;
}

@keyframes paging {
  to {
    transform: rotateY(-180deg);
  }
}