/* ページ送り（pager.js と対）。html.pg-on のときだけ効く。
   各セクションを画面いっぱいの「ページ」として重ね、表示中の 1 枚だけを出す。
   隠れているページは display:none にする → 出てくるたびに中の登場アニメーションが頭から始まり、
   画面外判定（Live2D・メインビジュアルの描画）も自然に止まる。 */
.pg-on{scroll-behavior:auto}
.pg-on,.pg-on body{height:100%;overflow:hidden}
.pg-on main{position:fixed;inset:0;overflow:hidden;background:var(--night)}
.pg-on .pg-page{position:absolute;inset:0;display:none;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none;background:var(--night)}
.pg-on .pg-page::-webkit-scrollbar{display:none}
.pg-on .pg-page.is-active{display:block;z-index:1}
.pg-on .pg-page.is-under{display:block;z-index:2}
.pg-on .pg-page.is-over{display:block;z-index:3;will-change:clip-path}
.pg-busy .pg-page{pointer-events:none}

/* 切り替えの小道具 */
.pg-fx{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
/* 斜めの刃の、縁の光 */
.pg-edge{position:absolute;left:0;top:0;width:400vmax;height:2px;margin:-1px 0 0 -200vmax;opacity:0;background:#fff;box-shadow:0 0 14px 3px #d6ebffd9,0 0 54px 12px #9fc8ff66}
/* めくれた紙の裏と、その影 */
.pg-flap,.pg-shadow,.pg-shadow i{position:absolute;inset:0}
.pg-flap{opacity:0}
.pg-shadow{opacity:0;filter:blur(22px)}
.pg-shadow i{background:#020915a6;translate:-14px -14px}
/* 色面：3 枚の色の面（金・白・紺）が斜めに横切る */
.pg-panel{position:absolute;top:-10%;bottom:-10%;left:-15vw;width:130vw;opacity:0;background:#d9c7a0;transform:translateX(-135vw) skewX(-14deg)}
.pg-panel:nth-of-type(4){background:#f3f5f4}
.pg-panel:nth-of-type(5){background:#132333}
/* 波：金（先）と紺（後）の 2 枚 */
.pg-wave{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.pg-wave path:first-child{fill:#d9c7a0}
.pg-wave path:last-child{fill:#101d30}
/* モザイク：升目。ところどころ金と白が混じる */
.pg-pixels{position:absolute;inset:0;display:grid;opacity:0}
.pg-pixels i{background:#0f1c2e;opacity:0;margin:-.5px}
.pg-pixels i.is-gold{background:#d9c7a0}
.pg-pixels i.is-white{background:#f3f5f4}
/* 扉：2 枚。合わせ目に金の線、閉まりきると星が灯る（--glow） */
.pg-door{position:absolute;top:0;bottom:0;left:0;width:50.1%;opacity:0;background:linear-gradient(90deg,#0a1322,#13233a);border-right:1px solid #d9c7a0;transform:translateX(-101%)}
.pg-door+.pg-door{left:auto;right:0;background:linear-gradient(270deg,#0a1322,#13233a);border-right:0;border-left:1px solid #d9c7a0;transform:translateX(101%)}
.pg-door:after{content:"";position:absolute;top:50%;right:-23px;width:46px;height:46px;margin-top:-23px;background:#f6e9c8;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:var(--glow,0);filter:drop-shadow(0 0 10px #ffe6b3)}
.pg-door+.pg-door:after{display:none}
/* 時計の針 */
.pg-hand{position:absolute;left:50%;top:50%;width:150vmax;height:2px;margin-top:-1px;opacity:0;transform-origin:0 50%;background:linear-gradient(90deg,#fff,#fff 60%,#ffffff00);box-shadow:0 0 12px 2px #d6ebffd9,0 0 40px 8px #9fc8ff59}
/* 彼女たちの色：人数ぶんの縦の帯 */
.pg-bars{position:absolute;inset:0;display:flex;opacity:0}
.pg-bars i{flex:1;margin:0 -.5px;transform:translateY(101%)}
/* フィルムの、コマとコマのあいだ（高さは pager.js の gap と同じ 14%）。左右に送り穴 */
.pg-film{position:absolute;left:0;right:0;top:0;height:14%;opacity:0;background:#04080f;transform:translateY(-101%)}
.pg-film:before{content:"";position:absolute;top:24%;bottom:24%;left:0;right:0;background:repeating-linear-gradient(90deg,transparent 0 26px,#e9eef2 26px 62px,transparent 62px 88px);opacity:.82;-webkit-mask-image:linear-gradient(90deg,#000 0 12%,transparent 12% 88%,#000 88%);mask-image:linear-gradient(90deg,#000 0 12%,transparent 12% 88%,#000 88%)}
/* ノイズの走査線 */
.pg-noise{position:absolute;left:0;right:0;top:-100%;height:100%;opacity:0;background:linear-gradient(transparent 0 46%,#ffffffb3 46% 46.6%,transparent 46.6% 58%,#05d9e866 58% 59%,transparent 59% 71%,#ff2a6d59 71% 71.5%,transparent 71.5%)}

/* ── ページに入ったときの、部分ごとの動き ──
   切り替えの線が通り過ぎたあとに、見出しが遅れて収まる。各セクションの中の部品の動きは sections.css にある
   （ここの pg-rise／pg-card を使う）*/
.pg-on .section-mark{animation:pg-mark .75s cubic-bezier(.2,.7,.2,1) .4s backwards}
/* 動きを止めているときは、登場の途中で固まらないよう外す */
.motion-off .pg-page *{animation:none!important}

@keyframes pg-mark{from{opacity:0;transform:translateX(-26px)}}
@keyframes pg-ghost{from{opacity:0;transform:translateX(6%)}}
@keyframes pg-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes pg-card{from{opacity:0;transform:translateY(34px) scale(.97)}}