/* The same opening on every entry page, once per browsing session. */
html[data-opening-pending]:has(.opening){overflow:hidden}
html[data-opening-pending] .opening[hidden]{display:block}
html[data-opening-pending] .site-navigation,html[data-opening-pending] .skip-link{visibility:hidden}
.opening[hidden]{display:none}
.opening{--opening-width:min(42vw,650px);--opening-height:min(68svh,720px);--opening-gap:22px;background:var(--musou-page)}
.opening.is-finishing{background:transparent;transition:background 1.1s cubic-bezier(.16,1,.3,1)}
.opening-frame{width:var(--opening-width);height:var(--opening-height);left:50%;top:50%;transform:translate(-50%,-50%);clip-path:inset(0 46%);animation:opening-widen 2.15s .45s cubic-bezier(.76,0,.24,1) both}
.opening-type{display:block;inset:0;padding:0;font:700 clamp(58px,6vw,116px)/1.04 var(--musou-font-body);text-transform:uppercase;letter-spacing:-.03em}
.opening-type>*{position:absolute;top:50%;margin-top:-.52em;will-change:transform}
.opening-type>span{right:calc(50% + var(--opening-width)/2 + var(--opening-gap));animation:opening-left 2.15s .45s cubic-bezier(.76,0,.24,1) both}
.opening-type>em{font-style:normal;left:calc(50% + var(--opening-width)/2 + var(--opening-gap));max-width:none;text-align:left;animation:opening-right 2.15s .45s cubic-bezier(.76,0,.24,1) both}
.opening-type>[data-opening-impact]{margin-top:.52em}
.opening-progress{position:absolute;left:50%;bottom:max(6svh,calc(env(safe-area-inset-bottom) + 24px));width:min(280px,46vw);height:2px;transform:translateX(-50%);background:var(--musou-border);overflow:hidden}
.opening-progress-fill{display:block;width:100%;height:100%;background:var(--musou-ink);transform:scaleX(var(--opening-progress,0));transform-origin:left;will-change:transform}
.opening.is-finishing .opening-type>*{animation:none;transform:none;transition:none}
.opening.is-finishing .opening-progress{opacity:0;transition:opacity .3s .15s}

@keyframes opening-widen{from{clip-path:inset(0 46%)}to{clip-path:inset(0)}}
@keyframes opening-left{from{transform:translateX(calc(var(--opening-width)/2 - 12px))}to{transform:translateX(0)}}
@keyframes opening-right{from{transform:translateX(calc(12px - var(--opening-width)/2))}to{transform:translateX(0)}}
.opening--page.is-finishing{background:var(--musou-page);opacity:0;transition:opacity 1.6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.opening--page.is-finishing .opening-frame{animation:none;clip-path:inset(0);transform:translate(-50%,-50%) scale(.7);opacity:0;transition:transform 1.6s cubic-bezier(.22,1,.36,1),opacity 1.2s}
.opening--page.is-finishing .opening-type>*{opacity:0;transform:translateY(-12px);transition:transform 1s,opacity .7s}
@media(max-width:900px){.opening{--opening-width:36vw;--opening-gap:16px}.opening-type{font-size:7vw}}
@media(max-width:600px){.opening{--opening-width:38vw;--opening-height:min(46svh,520px);--opening-gap:10px}.opening-type{font-size:7vw}}
@media(prefers-reduced-motion:reduce){.opening{display:none!important}}