/* ---- 页面之间的切换 ---- */
/* 五块内容与首页叠在同一块舞台上，静止状态只差不透明度：当前板块可见，其余让位。
   换场的节拍、底图的擦换与模糊都在 scene.js 里，这里不管过程 */
.stage{
  position:relative;z-index:1;overflow:hidden;
}
.track{
  position:relative;flex:0 0 auto;width:100%;
}

.view-intro{display:flex;align-items:center;width:100%;opacity:1;visibility:visible}
html[data-scene]:not([data-scene="intro"]) .view-intro{opacity:0;visibility:hidden}
.view-story,.view-video,.view-chat,.view-music,.view-about{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;
}
html[data-scene="story"] .view-story,
html[data-scene="video"] .view-video,
html[data-scene="chat"] .view-chat,
html[data-scene="music"] .view-music,
html[data-scene="about"] .view-about{opacity:1;visibility:visible}

html.view-on body{height:100dvh;min-height:0;overflow:hidden}
html.view-on .stage{flex:1 1 0;min-height:0}
html.view-on .track{height:100%}
html.view-on .view-intro{height:100%}
.view-intro .wrap{width:100%}

/* 首页也按一屏排：页面本身不滚，滚动只落在左侧文字列上（见 base.css 的 .intro-copy）。
   门槛与诀之忆、吾之诀同一把尺，高度说了算，宽度不参与——窄窗口由内容区横向滚兜住 */
@media (min-height:420px){
  html[data-scene="intro"] body{height:100dvh;min-height:0;overflow:hidden}
  html[data-scene="intro"] .stage{flex:1 1 0;min-height:0}
  html[data-scene="intro"] .track{height:100%}
  html[data-scene="intro"] .view-intro{height:100%}
  /* 横向滚的条子落在内容区底边，正在页脚上方；外面那层舞台会把溢出的留白裁掉 */
  html[data-scene="intro"] .view-intro > .wrap{height:100%;display:flex;align-items:center}
}

/* 再矮才退回整页滚动，下限同样取 420；文字列与立绘同时放开内滚与定高，
   整页只留一层滚动 */
@media (max-height:419px){
  html[data-scene="intro"] body{height:auto;min-height:420px;overflow:auto}
  html[data-scene="intro"] .intro-copy{max-height:none}
  html[data-scene="intro"] .intro-art img{max-height:min(var(--fit-h),1200px)}
}

/* 吾之诀正文：靠左的一条阅读列，40em 与故事页正文同宽；竖条不画，滚轮照旧可滚 */
.view-about .about-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.view-about .about-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.view-about .about{padding-top:var(--pad-y);padding-bottom:var(--pad-y)}
/* 首行标题取首页末段引语那套字面：宋体、700 */
.about-title{font-family:var(--serif);font-weight:700}
.about-note{
  max-width:min(40em,100%);
  padding-left:clamp(18px,1.8vw,30px);
  border-left:1px solid var(--line);
}
.about-note p{
  margin:0;
  font-size:clamp(15px,1.05vw,17px);line-height:2.05;
  color:rgba(224,224,224,.84);
}
.about-note p + p{margin-top:16px}
/* 停顿行单独成拍：缩小变灰，上下各留一段安静 */
.about-note .is-beat{
  margin:28px 0;
  font-family:var(--serif);font-size:15px;letter-spacing:.6em;
  color:var(--ash);
}
/* 收尾那句用宋体抬一档，与故事页年代栏同一字体 */
.about-note .is-emph{
  margin-top:30px;
  font-family:var(--serif);font-size:clamp(17px,1.3vw,20px);
  letter-spacing:.02em;line-height:1.9;
  color:var(--paper);
}

/* 页眉中央：返回键常驻，当前板块名跟在右侧 */
.bar-mid{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:16px;
  pointer-events:none;
}
.bar-mid > *{pointer-events:auto}
.bar-view{
  max-width:0;overflow:hidden;opacity:0;white-space:nowrap;
  font:14px/1.4 var(--serif);letter-spacing:.1em;color:var(--smoke);
  transition:opacity .3s ease,max-width .34s cubic-bezier(.22,.68,.16,1);
}
/* 与返回键之间的一道竖线，同时把两段文字分开 */
.bar-view::before{
  content:"";display:inline-block;width:1px;height:11px;margin-right:14px;
  background:rgba(224,224,224,.3);vertical-align:middle;
  opacity:0;transition:opacity .3s ease;
}
html.view-on .bar-view{max-width:10em;opacity:1}
html.view-on .bar-view::before{opacity:1}
/* 故事页的标题就在正文顶上，滚过它之后才让页眉这个名字接替 */
html[data-scene="story"] .bar-mid:not(.is-past-head) .bar-view{max-width:0;opacity:0}
html[data-scene="story"] .bar-mid:not(.is-past-head) .bar-view::before{opacity:0}

.view-back{
  display:none;align-items:center;gap:8px;
  padding:4px 0;border:0;background:none;
  font:11px/1.4 var(--sans);letter-spacing:.18em;color:var(--ash);
  cursor:pointer;transition:color .2s ease;
}
html.view-on .view-back{display:inline-flex}
.view-back svg{flex:none;width:12px;height:12px}
.view-back:hover{color:var(--smoke)}
.view-back:focus-visible{outline:1px solid var(--smoke);outline-offset:4px}

/* 影像页的模式切换：一组横排的「照片／视频」，挂在居中那一组的右端，由 100% 定位，
   不会把返回键推离中线；按钮本身与清单头顶那组同一套件（见 video.css 的 .mode-btn） */
.bar-modes{
  position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);
  display:flex;gap:6px;
}
.bar-modes[hidden]{display:none}
/* 这组比原来那颗单键宽出一倍多（两枚各 61px），再窄就会顶到右侧播放器
   （700 宽时只剩 13px，680 宽前后重叠）；720 以下让位，切换改由清单头顶那组承担 */
@media (max-width:720px){
  .bar-modes{display:none}
}

@media (max-width:520px){
  html.view-on .page-name{display:none}
  .bar-view{display:none}
}

/* 竖向让位落在内容层上，view-intro 自己的高度留给横向舞台 */
@media (max-height:859px){
  html.view-on .view-intro{align-items:flex-start}
  html.view-on .view-intro > .wrap{
    transform:translateY(calc(-1 * var(--preview-shift,0px)));
  }
}

@media (max-height:619px){
  html.view-on body{height:auto;min-height:620px;overflow:auto}
  /* 诀之忆、吾之诀、诀之影、诀之音与诀之念都自带内滚，窗口矮一些也压在一屏里：页脚贴底，不出现第二层滚动 */
  html[data-scene="story"].view-on body,
  html[data-scene="about"].view-on body,
  html[data-scene="video"].view-on body,
  html[data-scene="music"].view-on body,
  html[data-scene="chat"].view-on body{height:100dvh;min-height:0;overflow:hidden}
}

/* 再矮才退回整页滚动，页脚随之进折叠区；下限同样放低，免得跨过阈值时页面猛地长高一大截 */
@media (max-height:419px){
  html[data-scene="story"].view-on body,
  html[data-scene="about"].view-on body,
  html[data-scene="video"].view-on body,
  html[data-scene="music"].view-on body,
  html[data-scene="chat"].view-on body{height:auto;min-height:420px;overflow:auto}
}