/* Youhu editorial paper theatre. Scene timing lives in collage.js. */
.collage-stage{
  background:#f0bd25;isolation:isolate;position:relative;overflow:hidden;
  color:#faf0d7;
}
.collage-board{
  position:absolute;left:0;top:0;width:800px;height:800px;
  transform-origin:0 0;visibility:hidden;
}
.collage-stage[data-ready] .collage-board{visibility:visible}
.paper-scene{
  position:absolute;inset:0;visibility:hidden;
  overflow:hidden;isolation:isolate;
}
/* Paper grain is already in the artwork; no live scene-wide noise/blend filter. */
.paper-scene::before{
  content:"";position:absolute;inset:0;z-index:29;pointer-events:none;
  background:radial-gradient(ellipse at 46% 39%,transparent 30%,rgba(39,24,5,.13) 100%);
}
.paper-object{
  position:absolute;perspective:1600px;transform-style:preserve-3d;
  transform-origin:50% 50%;visibility:hidden;
}
.fold-chain,.fold-hinge{
  position:absolute;transform-style:preserve-3d;
}
.fold-chain{inset:0}
.fold-hinge{transform-origin:0 50%}
.fold-hinge.axis-x{transform-origin:50% 0}
.fold-face{
  position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;background-repeat:no-repeat;
}
.fold-front{transform:translateZ(.12px)}
.fold-back{transform:rotateY(180deg)}
.axis-x>.fold-back{transform:rotateX(180deg)}
.fold-shade{opacity:.42;transform:translateZ(.3px)}
.flat-art{
  position:absolute;inset:0;background-repeat:no-repeat;visibility:hidden;
}
.theatre-caption{
  position:absolute;bottom:50px;left:30px;right:30px;z-index:40;
  margin:0;text-align:center;color:#fff8e7;
  font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  font-size:27px;font-weight:600;line-height:1.4;letter-spacing:.01em;
  text-shadow:0 2px 2px rgba(12,23,27,.45);
}
.paper-scene[data-tone="light"] .theatre-caption{color:#183f5c;text-shadow:none}
.fold-title{
  position:absolute;left:145px;top:228px;width:510px;z-index:18;perspective:1200px;
  transform:rotate(-4deg);
}
.title-strip{
  position:relative;width:100%;min-height:104px;margin-bottom:10px;
  display:grid;place-items:center;background:#f5eacb;color:#183c83;
  font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  font-size:67px;font-weight:700;line-height:1.2;letter-spacing:.025em;
  transform-origin:left center;backface-visibility:hidden;
  padding:12px 20px;
  clip-path:polygon(0 5%,12% 2%,23% 5%,35% 0,44% 4%,59% 1%,71% 4%,82% 0,99% 4%,100% 95%,88% 98%,76% 95%,65% 100%,53% 95%,42% 98%,27% 95%,15% 100%,1% 96%);
}
.title-strip:last-child{margin-left:25px;background:#f3c83e;color:#1b3c73;transform:rotate(2deg)}
html[lang="en"] .title-strip{font-size:39px;letter-spacing:-.02em}
html[lang="en"] .theatre-caption{font-size:25px}
.collage-stage::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:50;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(32,35,40,.09);
}
@media(prefers-reduced-motion:reduce){
  .collage-stage .paper-object,.collage-stage .fold-hinge,.collage-stage .fold-title{will-change:auto}
}

/* Subpixel overlap prevents hairline gaps between coplanar paper slices. */
.fold-face{right:-.8px;bottom:-.8px}

/* Keep the assembled image above the unfolded faces during the handover. */
.flat-art{transform:translateZ(.5px);will-change:opacity}

.collage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.collage-stage[data-ready="error"] .collage-board{visibility:hidden}