/* Station 04: opposing page entrances, with a clear lower reading area. */
.manga-burst-wrap { height: 380svh !important; }
#dive-manga-burst { isolation: isolate; padding-bottom: clamp(82px, 9vh, 112px); }
#dive-manga-burst .manga-flight { perspective: 1200px; perspective-origin: 50% 32%; }
#dive-manga-burst .manga-sheet {
  position: absolute; left: calc(var(--sx) * 100%); top: calc(var(--sy) * 100%);
  width: calc(clamp(190px, 25vw, 365px) * var(--k)); margin: 0; padding: 5px;
  background: #f8f4e9; box-shadow: 0 12px 25px #020b1b70, 0 32px 80px #01091380;
  transform: translate3d(-50%, -50%, 0) rotate(var(--angle));
  transform-origin: 50% 50%; backface-visibility: hidden; z-index: var(--z);
}
#dive-manga-burst .manga-sheet img { display: block; width: 100%; height: auto; }
#dive-manga-burst .manga-sheet figcaption {
  color: #354657; padding: 4px 2px 0; font-size: 11px; line-height: 1.4;
  text-align: center; text-shadow: none; letter-spacing: .01em;
}
.js #dive-manga-burst .manga-sheet { opacity: 0; }
#dive-manga-burst[data-manga-visible="true"] .manga-sheet { will-change: transform, opacity; }
#dive-manga-burst::after {
  background: linear-gradient(180deg, #08182b0a 0%, #08182b00 38%, #08182b50 57%, #08182bef 80%, #08182bfa 100%);
  pointer-events: none;
}
#dive-manga-burst .s-copy { max-width: 700px; text-align: center; }
#dive-manga-burst .s-copy h2 { margin: 12px 0 18px; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.45; }
#dive-manga-burst .s-copy .s-sub { margin: 0 auto 16px; max-width: 640px; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.8; }
#dive-manga-burst .manga-controls { display: none; position: absolute; top: 20px; right: 20px; z-index: 5; }
#dive-manga-burst.manga-ready .manga-controls { display: block; }
#dive-manga-burst .manga-toggle {
  color: #f7efde; background: #091b2bdb; border: 1px solid #d5b3799e; border-radius: 999px;
  font: 12px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .04em;
  padding: 11px 16px; cursor: pointer;
}
#dive-manga-burst .manga-toggle:focus-visible { outline: 2px solid #f8d694; outline-offset: 4px; }
#dive-manga-burst .manga-sheet.is-unavailable { visibility: hidden; }
body:not(.js) #dive-manga-burst .manga-flight { display: block; }
body:not(.js) #dive-manga-burst .s-copy { opacity: 1; }
@media (max-width: 700px) {
  .manga-burst-wrap { height: 340svh !important; }
  #dive-manga-burst { padding-bottom: 86px; }
  #dive-manga-burst .manga-sheet {
    left: calc(var(--mx) * 100%); top: calc(var(--my) * 100%);
    width: calc(clamp(140px, 48vw, 225px) * var(--k)); padding: 3px;
  }
  #dive-manga-burst .manga-sheet figcaption { font-size: 8px; padding-top: 3px; }
  #dive-manga-burst .s-copy h2 { margin: 8px 0 12px; font-size: clamp(29px, 7.8vw, 37px); line-height: 1.4; }
  #dive-manga-burst .s-copy .s-sub { max-width: 330px; font-size: 13px; line-height: 1.8; margin-bottom: 12px; }
  #dive-manga-burst .s-copy .kick { font-size: 12px; }
  #dive-manga-burst .manga-controls { top: 12px; right: 12px; }
  #dive-manga-burst .manga-toggle { padding: 10px 12px; font-size: 11px; }
}
@media (max-height: 620px) and (min-width: 701px) {
  #dive-manga-burst { padding-bottom: 65px; }
  #dive-manga-burst .s-copy h2 { font-size: 30px; margin: 8px 0; }
  #dive-manga-burst .s-copy .s-sub { font-size: 13px; margin-bottom: 8px; }
  #dive-manga-burst .manga-sheet { width: calc(32vh * var(--k)); }
}
@media (prefers-reduced-motion: reduce) {
  #dive-manga-burst .manga-controls { display: none !important; }
  #dive-manga-burst .manga-sheet { will-change: auto !important; }
}
