/* Khung chạy theo cảnh dùng chung. Mỗi bản tự viết data-pos="prev|next" để có kiểu chuyển cảnh riêng. */
html.staged, html.staged body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.stage { position: fixed; inset: 0; perspective: 1800px; perspective-origin: 50% 50%; --dur: 1.1s; --ease: cubic-bezier(.77, 0, .18, 1); }
.scene { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d; will-change: transform, opacity;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), filter var(--dur) var(--ease), visibility 0s linear var(--dur); }
/* Before stage.js runs, show only the first scene. Otherwise all scenes occupy
   the same fixed frame and flash over one another on a cold load. */
.stage > .scene:not(:first-child):not([data-pos]) { visibility: hidden; pointer-events: none; }
.stage > .scene:first-child:not([data-pos]) [data-in] { opacity: 1; transform: none; transition: none; }
.scene[data-pos="cur"] { visibility: visible; z-index: 2; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), filter var(--dur) var(--ease), visibility 0s; }
.scene[data-pos="prev"], .scene[data-pos="next"] { visibility: hidden; pointer-events: none; z-index: 1; }
/* Khung bên trong: chỉ cuộn trên màn quá nhỏ, không bao giờ hiện thanh cuộn */
.scene > .sc { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scene > .sc::-webkit-scrollbar, .noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }
/* Lớp chiều sâu: cùng lúc chuyển cảnh, mỗi lớp trôi một quãng khác nhau */
.scene [data-depth] { transform: translate3d(0, calc(var(--d, 0) * var(--depth, 80) * 1px), 0); transition: transform var(--dur) var(--ease); }
/* Nội dung hiện dần khi cảnh vào */
.scene [data-in] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .7, .1, 1); }
.scene[data-pos="cur"] [data-in] { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms + var(--enter, .45s)); }
.stage.init .scene { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .stage { --dur: .01s; }
  .scene [data-in] { transition: none; opacity: 1; transform: none; }
}