/* Forbidden Archives codex page-turn geometry override.
   Keeps the animated sheet mapped to the photographed right-hand page. */

@keyframes cofpCodexPageTurnMapped {
  0% {
    transform: perspective(2200px) rotateX(6deg) rotateY(0deg) rotateZ(-7deg) translate3d(0, 0, 0) scaleX(1);
    opacity: 0;
  }
  6% {
    opacity: 0.7;
  }
  18% {
    transform: perspective(2200px) rotateX(6deg) rotateY(-18deg) rotateZ(-7deg) translate3d(-1px, -1px, 2px) scaleX(0.99);
  }
  48% {
    transform: perspective(2200px) rotateX(6deg) rotateY(-89deg) rotateZ(-7deg) translate3d(-2px, -3px, 6px) scaleX(0.94);
    opacity: 0.76;
  }
  76% {
    transform: perspective(2200px) rotateX(6deg) rotateY(-146deg) rotateZ(-7deg) translate3d(-3px, -1px, 3px) scaleX(0.985);
  }
  94% {
    opacity: 0.55;
  }
  100% {
    transform: perspective(2200px) rotateX(6deg) rotateY(-174deg) rotateZ(-7deg) translate3d(-2px, 0, 0) scaleX(1);
    opacity: 0;
  }
}

@keyframes cofpCodexEdgeCurlMapped {
  0%,
  100% {
    transform: scaleX(0.5);
    opacity: 0.1;
  }
  42%,
  58% {
    transform: scaleX(1.08);
    opacity: 0.5;
  }
}

/* Both front and reverse page surfaces. */
#league-mythology [class*="physicalPageTurn"] {
  left: 55.2% !important;
  top: 0% !important;
  width: 23.4% !important;
  height: 33.2% !important;
  transform-origin: 0% 50% !important;
  transform-style: preserve-3d !important;
  animation-name: cofpCodexPageTurnMapped !important;
  animation-duration: 2.8s !important;
  animation-timing-function: cubic-bezier(0.32, 0.02, 0.16, 1) !important;
  animation-fill-mode: forwards !important;
  clip-path: polygon(0 2%, 97% 0, 100% 97%, 0 100%) !important;
}

/* Front parchment surface. */
#league-mythology [class*="physicalPageTurn"][class*="border"] {
  background:
    repeating-linear-gradient(180deg, rgba(92, 58, 87, 0.1) 0 1px, transparent 1px 13px),
    linear-gradient(90deg, rgba(89, 64, 74, 0.68) 0%, rgba(167, 142, 102, 0.68) 34%, rgba(221, 202, 152, 0.72) 76%, rgba(240, 223, 181, 0.74) 100%) !important;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(202, 116, 255, 0.22),
    inset -7px 0 13px rgba(68, 32, 61, 0.16) !important;
}

/* Reverse side stays attached to the same hinge. */
#league-mythology [class*="physicalPageTurn"][class*="opacity-40"] {
  background: linear-gradient(90deg, rgba(48, 29, 47, 0.55), rgba(183, 158, 111, 0.34)) !important;
  opacity: 0.16 !important;
}

#league-mythology [class*="pageEdgeCurl"] {
  animation-name: cofpCodexEdgeCurlMapped !important;
  animation-duration: 2.8s !important;
}

/* Re-center the energy pulse on the actual spine. */
#league-mythology [class*="spineFlash"] {
  left: 55.1% !important;
  top: 49.5% !important;
  width: 8.5rem !important;
  height: 8.5rem !important;
}

@media (max-width: 1023px) {
  #league-mythology [class*="physicalPageTurn"],
  #league-mythology [class*="spineFlash"] {
    display: none !important;
  }
}