/* 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;
}

/* 2026 Hall redesign: let Forbidden Archives read as a room, not a boxed card. */
@media (min-width: 1024px) {
  #league-mythology {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  #league-mythology > div:last-child > section {
    min-height: 900px !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* Preserve the source art's detail and lift the old heavy cinematic grade. */
  #league-mythology > div:last-child > section > img {
    object-position: 64% top !important;
    filter: brightness(1.14) saturate(1.05) contrast(1.01) !important;
  }

  /* Left-only readability wash. The room itself remains largely unobscured. */
  #league-mythology > div:last-child > section > div:nth-of-type(1) {
    background: linear-gradient(
      90deg,
      rgba(5, 3, 9, 0.58) 0%,
      rgba(5, 3, 9, 0.30) 30%,
      rgba(5, 3, 9, 0.08) 52%,
      rgba(5, 3, 9, 0) 70%
    ) !important;
  }

  /* Keep only a very light bottom transition instead of blacking out the art. */
  #league-mythology > div:last-child > section > div:nth-of-type(2) {
    background: linear-gradient(
      180deg,
      rgba(4, 2, 8, 0.01) 0%,
      rgba(3, 1, 7, 0.03) 64%,
      rgba(3, 1, 7, 0.30) 100%
    ) !important;
  }

  /* The old purple bloom was also acting like a veil over the photograph. */
  #league-mythology > div:last-child > section > div:nth-of-type(3) {
    opacity: 0.34 !important;
  }
}

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