/* 固定尺寸的四块纸面沿折痕转动；纹理和阴影不逐帧重画。 */
.release-stage {
  position: fixed;
  z-index: 24;
  left: 50%;
  top: 50%;
  width: min(72vw, 1220px);
  aspect-ratio: 1.72;
  transform: translate3d(-50%, calc(-50% - 3vh), 0) scale(1.18);
  pointer-events: none;
}
.paper-sheet { position: absolute; inset: 9% 6% 14%; perspective: 1800px; }
.paper-hinge { position: absolute; top: 0; width: 25%; height: 100%; transform-style: preserve-3d; }
.paper-left { left: 25%; transform-origin: right center; --fold-angle: -82deg; --light-angle: 90deg; }
.paper-right { left: 50%; transform-origin: left center; --fold-angle: 82deg; --light-angle: 270deg; }
.paper-hinge .paper-outer { width: 100%; }
.paper-left .paper-outer { left: -100%; transform-origin: right center; --fold-angle: 164deg; --light-angle: 270deg; }
.paper-right .paper-outer { left: 100%; transform-origin: left center; --fold-angle: -164deg; --light-angle: 90deg; }
.paper-face {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48.7%, #8b78571a 49.8%, #fff7e866 50%, transparent 51.3%),
    linear-gradient(var(--light-angle), #78664320, #fff8eb44 46%, #8d795d10),
    radial-gradient(ellipse at 22% 35%, #ad98711c, transparent 65%),
    repeating-linear-gradient(17deg, #796a5008 0 .4px, transparent .8px 5px),
    repeating-linear-gradient(97deg, #fff9ed22 0 .4px, transparent .8px 3px),
    #eae0cb;
  box-shadow: inset 1px 0 #fff9ed88, inset -1px 0 #8d795d33;
  clip-path: polygon(0 1%, 22% .4%, 53% 1.2%, 78% .7%, 100% 1%, 100% 99%, 74% 98.7%, 46% 99.5%, 20% 98.6%, 0 99%);
}
.paper-outer .paper-face { background-color: #ede4d1; }
.paper-left .paper-outer .paper-face { clip-path: polygon(3% 2%, 30% .4%, 60% .8%, 100% 1%, 100% 99%, 64% 98.4%, 35% 99.1%, 0 97%, 1.3% 75%, .2% 51%, 2% 28%); }
.paper-right .paper-outer .paper-face { clip-path: polygon(0 1%, 33% .2%, 65% 1.1%, 97% 2%, 99% 25%, 98% 50%, 100% 72%, 99% 97%, 70% 99%, 32% 98.6%, 0 99%); }
.paper-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #95846526;
  clip-path: polygon(0 32%, 37% 29%, 100% 45%, 100% 56%, 40% 78%, 30% 100%, 25% 100%, 34% 76%, 94% 53%, 94% 47%, 35% 31%);
}
.paper-right > .paper-face::before { transform: scaleX(-1); }
.paper-outer .paper-face::before { display: none; }
.paper-face::after { content: ""; position: absolute; inset: 0; background: #5e4a30; opacity: 0; }
.paper-shadow { position: absolute; inset: 9% 1% 0; background: #7a63451c; box-shadow: 0 18px 20px #59462e30; }
.paper-seal { position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); background: linear-gradient(125deg, #ffffff16, #57241412), var(--vermilion); box-shadow: inset 0 0 0 1px #80241644; }

@supports (animation-timeline: scroll()) {
  .paper-hinge { animation: paper-unfold 1s linear both; animation-timeline: scroll(root block); }
  .paper-face::after { animation: paper-light 1s linear both; animation-timeline: scroll(root block); }
  .paper-shadow, .paper-seal { animation: paper-settle 1s linear both; animation-timeline: scroll(root block); }
  @keyframes paper-unfold {
    0%, 79% { transform: rotateY(var(--fold-angle)); animation-timing-function: cubic-bezier(.4,0,.2,1); }
    92%, 100% { transform: rotateY(0deg); }
  }
  @keyframes paper-light { 0%, 79% { opacity: .22; } 92%, 100% { opacity: 0; } }
  @keyframes paper-settle { 0%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } }
}
@supports not (animation-timeline: scroll()) {
  .paper-hinge { transform: rotateY(var(--fold-angle)); transition: transform .9s var(--ease-smooth-out); }
  html[data-scene="4"] .paper-hinge { transform: rotateY(0deg); }
}
@media (min-width: 761px) and (max-width: 1050px) { .release-stage { width: 78vw; } }
@media (max-width: 760px) {
  .release-stage { top: 53%; width: 100vw; height: calc(100dvh - 58px); aspect-ratio: auto; transform: translate3d(-50%, -50%, 0); }
  .paper-sheet { inset: 1% -20% 4%; }
  .paper-hinge { animation: none; transform: none; }
  .paper-shadow, .paper-seal, .paper-face::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-hinge { animation: none; transform: none; transition: none; }
  .paper-shadow, .paper-seal, .paper-face::after { animation: none; }
}