/* 锁定滚动时保留原有槽位，避免封面与正文因滚动条消失而横向跳动。 */
html {
    scrollbar-gutter: stable;
}

/* 同时锁定根节点和正文，避免切换视图后由另一层接管滚动条。 */
html.mg-transition-locked,
html.mg-transition-locked body {
    overflow: hidden !important;
}

/* 专栏片头按标题、引言、正文依次展开，不缩放整块内容，也不改变文档高度。 */
#muguang {
    --mg-entry-distance: 18px;
}

body.muguang-view:not(.muguang-restored) #muguang > .section-eyebrow {
    animation: mg-column-fade 900ms ease-out backwards;
}

#muguang .muguang-title-text {
    display: inline-block;
}

body.muguang-view:not(.muguang-restored) #muguang .muguang-title-text {
    animation: mg-column-title 1200ms 60ms cubic-bezier(0.22, 0.7, 0.2, 1) backwards;
}

body.muguang-view:not(.muguang-restored) #muguang > .section-subheadline {
    animation: mg-column-rise 1050ms 180ms cubic-bezier(0.22, 0.7, 0.2, 1) backwards;
}

body.muguang-view:not(.muguang-restored) #muguang .muguang-intro > * {
    animation: mg-column-rise 1100ms var(--mg-entry-delay, 280ms) cubic-bezier(0.22, 0.7, 0.2, 1) backwards;
}

#muguang .muguang-intro > :nth-child(2) { --mg-entry-delay: 380ms; }
#muguang .muguang-intro > :nth-child(3) { --mg-entry-delay: 460ms; }
#muguang .muguang-intro > :nth-child(4) { --mg-entry-delay: 540ms; }
#muguang .muguang-intro > :nth-child(5) { --mg-entry-delay: 620ms; }
#muguang .muguang-intro > :nth-child(6) { --mg-entry-delay: 660ms; }
#muguang .muguang-intro > :nth-child(7) { --mg-entry-delay: 700ms; }

body.muguang-view:not(.muguang-restored) #muguang > .muguang-timeline,
body.muguang-view:not(.muguang-restored) #muguang > .muguang-home-link {
    animation: mg-column-fade 900ms 450ms ease-out backwards;
}

#muguang > .muguang-home-link {
    --mg-entry-opacity: 0.86;
}

@keyframes mg-column-title {
    from { opacity: 0.2; clip-path: inset(0 100% 0 0); transform: translateY(8px); }
    to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes mg-column-rise {
    from { opacity: 0; transform: translateY(var(--mg-entry-distance)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mg-column-fade {
    from { opacity: 0; }
    to { opacity: var(--mg-entry-opacity, 1); }
}

@media (max-width: 760px) {
    #muguang { --mg-entry-distance: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    body.muguang-view #muguang > .section-eyebrow,
    body.muguang-view #muguang .muguang-title-text,
    body.muguang-view #muguang > .section-subheadline,
    body.muguang-view #muguang .muguang-intro > *,
    body.muguang-view #muguang > .muguang-timeline,
    body.muguang-view #muguang > .muguang-home-link {
        animation: none !important;
    }
}

/* 两个视图共用同一张篇章封面，在同一文档内完成合拢与展开。 */
.mg-story-transition {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    color: #f0ece4;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    text-align: center;
}

.mg-transition-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% + 1px);
    background: #000;
    z-index: -1;
}

.mg-transition-panel--left { left: 0; }
.mg-transition-panel--right { right: 0; }

.mg-transition-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 24px;
}

.mg-transition-year {
    font-size: 14px;
    letter-spacing: 0.16em;
    color: #cdb688;
}

.mg-transition-name {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 400;
    line-height: 1.3;
}

.mg-transition-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(#e0bd7c, transparent);
}

.mg-transition-caption {
    font-size: 16px;
    line-height: 1.8;
    color: #c9c4bb;
}

.mg-transition--leave .mg-transition-panel--left {
    animation: mg-close-left 700ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.mg-transition--leave .mg-transition-panel--right {
    animation: mg-close-right 700ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.mg-transition--leave .mg-transition-copy {
    animation: mg-cover-in 600ms 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mg-transition--arrive .mg-transition-panel--left {
    animation: mg-open-left 1200ms 600ms cubic-bezier(0.65, 0, 0.25, 1) both;
}

.mg-transition--arrive .mg-transition-panel--right {
    animation: mg-open-right 1200ms 600ms cubic-bezier(0.65, 0, 0.25, 1) both;
}

.mg-transition--arrive .mg-transition-copy {
    animation: mg-cover-out 450ms 400ms ease-in both;
}

@keyframes mg-close-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes mg-close-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes mg-open-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes mg-open-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes mg-cover-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mg-cover-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .mg-story-transition .mg-transition-panel,
    .mg-story-transition .mg-transition-copy { animation: none; }
    .mg-transition--leave { animation: mg-cover-in 450ms ease-out both; }
    .mg-transition--arrive { animation: mg-cover-out 450ms ease-in both; }
    @keyframes mg-cover-in { from { opacity: 0; } to { opacity: 1; } }
}