/* 和室の屏風・欄間。装飾の開閉は本文や受付を待たせない。 */
.room-transom{
  height:19px;
  border-top:3px solid #6c4b3a;
  border-bottom:3px solid #6c4b3a;
  background-color:#e8d6ad;
  background-image:repeating-linear-gradient(90deg,transparent 0 27px,#71533d 27px 30px,transparent 30px 57px),linear-gradient(transparent 0 5px,#8a6745 5px 7px,transparent 7px 13px);
  box-shadow:0 3px 7px #4c2b3820;
}
.hero-showcase{position:relative;isolation:isolate;padding:15px 19px 13px}
.hero-type,.hero-showcase>.hero-cover{position:relative;z-index:1}
.byobu-stage{
  position:absolute;
  inset:-7px -16px -6px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  perspective:1600px;
  perspective-origin:50% 45%;
  pointer-events:none;
  filter:drop-shadow(0 10px 7px #442b4428);
  z-index:-1;
}
.byobu-panel{
  position:relative;
  min-width:0;
  border-top:5px solid #79553b;
  border-bottom:6px solid #79553b;
  border-left:2px solid #bc9858;
  border-right:2px solid #bc9858;
  background-color:#f8edcf;
  background-image:linear-gradient(90deg,#6247201c,transparent 12%,#fff7e222 65%,#54331c1c),url('assets/heian-washi-v1.webp');
  background-size:100% 100%,600% 100%;
  background-position:center,var(--panel-position) center;
  box-shadow:inset 2px 0 0 #e1c789,inset -2px 0 0 #e1c789;
  transform:rotateY(var(--open-angle));
  transform-origin:var(--hinge) center;
  backface-visibility:hidden;
}
.byobu-panel:nth-child(1){--panel-position:0%;--open-angle:-7deg;--closed-angle:-66deg;--hinge:right;--delay:0ms}
.byobu-panel:nth-child(2){--panel-position:20%;--open-angle:7deg;--closed-angle:66deg;--hinge:left;--delay:65ms}
.byobu-panel:nth-child(3){--panel-position:40%;--open-angle:-7deg;--closed-angle:-66deg;--hinge:right;--delay:130ms}
.byobu-panel:nth-child(4){--panel-position:60%;--open-angle:7deg;--closed-angle:66deg;--hinge:left;--delay:195ms}
.byobu-panel:nth-child(5){--panel-position:80%;--open-angle:-7deg;--closed-angle:-66deg;--hinge:right;--delay:260ms}
.byobu-panel:nth-child(6){--panel-position:100%;--open-angle:7deg;--closed-angle:66deg;--hinge:left;--delay:325ms}
.byobu-panel:not(:first-child):after{
  content:'';
  position:absolute;
  left:-3px;
  top:18%;
  width:4px;
  height:16px;
  background:#5f4735;
  box-shadow:0 88px #5f4735,0 176px #5f4735;
}
.byobu-stage.is-opening .byobu-panel{animation:byobu-unfold 1700ms cubic-bezier(.16,1,.3,1) var(--delay) both}
@keyframes byobu-unfold{
  from{transform:rotateY(var(--closed-angle)) scaleX(.82);filter:brightness(.83)}
  to{transform:rotateY(var(--open-angle)) scaleX(1);filter:brightness(1)}
}
.byobu-controls{display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:center;gap:12px;min-height:10px;margin-top:5px}
.byobu-replay{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 2px 6px 9px;
  border:0;
  background:transparent;
  color:#60416a;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.04em;
  text-underline-offset:4px;
}
.byobu-replay[hidden]{display:none}
.byobu-replay:hover{text-decoration:underline}
.byobu-replay svg{width:25px;height:20px;fill:#dbc18c55;stroke:#947039;stroke-width:1.2;stroke-linejoin:round}
.hero-actions{margin-top:8px}
.hero-emaki{
  position:relative;
  padding:11px 16px 12px;
  margin-bottom:5px;
  border-bottom:6px solid #635953;
  background:linear-gradient(transparent 0 80%,#b2b08938 80% 100%);
  box-shadow:0 5px 7px #44323c10;
}
.hero-emaki:before,.hero-emaki:after{content:'';position:absolute;bottom:-6px;height:6px;width:18px;background:#493048}
.hero-emaki:before{left:0}.hero-emaki:after{right:0}
.cast-names{border-bottom-color:#9b835d55}
.contents-nav{border-top-width:4px;border-bottom-width:4px}
.eyebrow{border-left:3px solid #cfad68;border-right:1px solid #cfad68;box-shadow:2px 2px 0 #9e79452e}
.book-contents{border-left:1px solid #ccb386;padding-left:18px}
.zoom-details summary:before{content:'';display:inline-block;width:15px;height:15px;border:1px solid #a98aa9;transform:rotate(45deg);margin-right:12px;background:#fcf6e999}
.zoom-details summary>span{margin-left:auto}
.next{position:relative;isolation:isolate;overflow:hidden}
.next>:not(.moon-bamboo-scene){position:relative;z-index:1}
.moon-bamboo-scene{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/moon-bamboo-v1.webp') right center/auto 100% no-repeat;opacity:.85}
.bamboo-glow{position:absolute;right:-6px;top:52%;width:150px;height:200px;background:radial-gradient(ellipse,#ffe7a78c 0,#ecc47c32 35%,transparent 70%);opacity:.5;mix-blend-mode:screen}
.next.is-lit .bamboo-glow{animation:bamboo-light 6s ease-in-out infinite}
@keyframes bamboo-light{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:.75;transform:scale(1.08)}}
@media(max-width:600px){
  .room-transom{height:16px;background-size:auto;opacity:.95}
  .hero-showcase{padding:15px 9px 13px;margin-top:27px}
  .byobu-stage{inset:-5px -8px -5px;perspective:1000px}
  .byobu-panel{border-top-width:4px;border-bottom-width:5px;border-left-width:1px;border-right-width:1px}
  .byobu-panel:not(:first-child):after{width:3px;left:-2px;height:12px;box-shadow:0 100px #5f4735,0 200px #5f4735}
  .byobu-controls{margin-top:5px}
  .byobu-replay{font-size:11px;min-height:44px}
  .hero-actions{margin-top:5px}
  .hero-emaki{padding-left:8px;padding-right:8px}
  .book-contents{padding-left:12px}
  .byobu-controls{gap:8px}
  .moon-bamboo-scene{background-position:calc(100% + 50px) center;background-size:auto 100%;opacity:.45}
  .bamboo-glow{right:-25px;top:52%;width:125px;height:175px}
}
@media(prefers-reduced-motion:reduce){
  .byobu-stage.is-opening .byobu-panel{animation:none!important}
  .byobu-panel{transform:rotateY(var(--open-angle));filter:none}
  .next.is-lit .bamboo-glow{animation:none!important;opacity:.45}
}

/* 壁 → 屏風 → 表紙と題字。壁の文字は固定し、屏風だけを動かす。 */
.hero-showcase{padding-bottom:150px;}
.byobu-wall{position:absolute;inset:-7px -16px -6px;z-index:-2;overflow:hidden;background-color:#e9dfc7;background-image:radial-gradient(ellipse at 45% 30%,#fff9e8a8,transparent 75%),repeating-linear-gradient(93deg,transparent 0 13px,#8d785308 14px 15px);box-shadow:inset 0 0 25px #674e3024;}
.byobu-wall[hidden],.byobu-shikibu[hidden],.byobu-controls[hidden]{display:none!important;}
.byobu-wall-writing{position:absolute;left:8%;right:8%;bottom:22px;min-height:98px;display:flex;align-items:center;justify-content:center;gap:16px;}
#byobu-message{font:19px/2 var(--serif);color:#51453c;letter-spacing:.12em;text-align:center;max-width:100%;text-wrap:balance;}
.byobu-shikibu{display:block;width:78px;height:88px;flex:0 0 78px;mix-blend-mode:multiply;}
.byobu-stage{transform:translateX(var(--screen-shift,0%));transition:transform .12s linear;}
.byobu-stage .byobu-panel{--fold-sign:-1;transform:rotateY(calc(var(--fold-angle,0deg) * var(--fold-sign)));transition:transform .12s linear;animation:none!important;}
.byobu-stage .byobu-panel:nth-child(even){--fold-sign:1;}
.byobu-controls{justify-content:flex-end;gap:14px;margin-top:13px;}
.byobu-handle{display:flex;align-items:center;gap:8px;color:#60416a;font:11px var(--serif);min-height:44px;max-width:100%;}
.byobu-handle-label{white-space:nowrap;}
.byobu-handle input{display:block;width:108px;min-width:65px;min-height:44px;margin:0;accent-color:#7b5d72;cursor:ew-resize;}
.byobu-handle-end{font-size:17px;}
@media(max-width:600px){
  .hero-showcase{padding-bottom:148px;}
  .byobu-wall{inset:-5px -8px -5px;}
  .byobu-wall-writing{left:5%;right:5%;bottom:20px;min-height:100px;gap:5px;}
  #byobu-message{font-size:15px;line-height:2;letter-spacing:.07em;}
  .byobu-shikibu{width:62px;height:76px;flex-basis:62px;}
  .byobu-controls{gap:0 12px;}
  .byobu-handle input{width:90px;}
}
@media(prefers-reduced-motion:reduce){
  .byobu-stage,.byobu-stage .byobu-panel{transition:none;}
}

/* 観音開き：左右の三面をそれぞれ一枚の扉として、中央から開く。 */
.byobu-stage{grid-template-columns:repeat(2,minmax(0,1fr));transform:none;transition:none;perspective:1600px;}
.byobu-door{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .42s cubic-bezier(.2,.7,.3,1);}
.byobu-door-left{transform-origin:left center;transform:rotateY(calc(-1 * var(--door-angle,0deg)));}
.byobu-door-right{transform-origin:right center;transform:rotateY(var(--door-angle,0deg));}
.byobu-stage .byobu-panel{transform:none!important;transition:none;}
.byobu-door-left .byobu-panel:nth-child(1){--panel-position:0%;}
.byobu-door-left .byobu-panel:nth-child(2){--panel-position:20%;}
.byobu-door-left .byobu-panel:nth-child(3){--panel-position:40%;}
.byobu-door-right .byobu-panel:nth-child(1){--panel-position:60%;}
.byobu-door-right .byobu-panel:nth-child(2){--panel-position:80%;}
.byobu-door-right .byobu-panel:nth-child(3){--panel-position:100%;}
.byobu-door-left{border-right:2px solid #79553b;}
.byobu-door-right{border-left:2px solid #79553b;}
#byobu-message{color:#42352e;font-size:20px;}
@media(max-width:600px){#byobu-message{font-size:16px;letter-spacing:.04em;}}
@media(prefers-reduced-motion:reduce){.byobu-door{transition:none;}}