/* ==========================================================================
   SITE-CN-912 · 跨页面转场引擎（稳定版 v2）
   --------------------------------------------------------------------------
   本文件由 <head> 中的 bootstrap 脚本配合 resources/site-transitions.js 使用。
   设计目标：任何浏览器、任何跳转路径下都不会出现“白屏闪一下 / 硬切 / 动画错乱”。

   稳定性要点（改动前请先读完）：
   1. @view-transition 必须写在 CSS 里，不能只在 pageswap 里靠 JS 添加；
      只有 CSS 里声明了它，浏览器才会在这次跨文档导航中创建 ViewTransition。
   2. 出站页与入站页都必须引用本文件（两边都有 @view-transition 才会生效）。
   3. 旧/新快照层默认带 mix-blend-mode: normal，这里显式固定，避免某些主题下
      出现混合模式导致的发白/发灰。
   4. ::view-transition 的背景色固定为站点底色，用来吃掉新旧快照之间的缝隙。
   5. 浏览器不支持跨文档转场时（Firefox 143-、Safari 18.1- 等），由 bootstrap
      在首帧前给 <html> 加上 .vt-unsupported，本文件用 .vt-fallback 幕布补一个
      稳定、廉价、不依赖任何 API 的淡入，保证“过场始终存在”。
   ========================================================================== */

@view-transition {
  navigation: auto;
}

/* --- 快照层基础 ------------------------------------------------------------------ */

::view-transition {
  /* 页面之间露出的底色：跟站点暗色一致，避免白色闪缝 */
  background-color: #0b0d0d;
}

::view-transition-group(root) {
  animation-duration: 900ms;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

/* 浏览器的默认交叉淡入依赖 plus-lighter 混合模式，并给 old/new 的父层加了
   isolation: isolate。一旦我们自己接管动画（透明度之和不等于 1），
   这个混合模式会把亮度叠加到过曝发白。所以两层都要显式重置。 */
::view-transition-image-pair(root) {
  isolation: auto;
}

/* 站点蓝，用于光圈 / 斜切 / 失帧这类带幕布的转场 */
html:active-view-transition-type(site-iris)::view-transition,
html:active-view-transition-type(site-diagonal)::view-transition,
html:active-view-transition-type(site-signal)::view-transition {
  background-color: #002fa7;
}

/* --- 交叠推进（同层级页面之间） ---------------------------------------------------- */

@keyframes site-overlap-out {
  0% { opacity: 1; filter: blur(0) brightness(1); transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; filter: blur(6px) brightness(.9); transform: translate3d(-105vw, 0, 0) scale(.94); }
}

@keyframes site-overlap-in {
  0% { opacity: .18; filter: blur(4px) brightness(1.04); transform: translate3d(9vw, 0, 0) scale(1.025); }
  100% { opacity: 1; filter: blur(0) brightness(1); transform: translate3d(0, 0, 0) scale(1); }
}

html:active-view-transition-type(site-overlap)::view-transition-old(root) {
  z-index: 2;
  animation: site-overlap-out 900ms cubic-bezier(.55, .05, .25, 1) both;
}

html:active-view-transition-type(site-overlap)::view-transition-new(root) {
  animation: site-overlap-in 820ms cubic-bezier(.2, .75, .25, 1) 100ms both;
}

/* --- 圆形光圈（跨层级页面） -------------------------------------------------------- */

@keyframes site-iris-close {
  0% { clip-path: circle(75% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}

@keyframes site-iris-open {
  0% { clip-path: circle(0% at 50% 50%); opacity: 0; }
  34% { clip-path: circle(0% at 50% 50%); opacity: 0; }
  35% { opacity: 1; }
  100% { clip-path: circle(150% at 50% 50%); opacity: 1; }
}

html:active-view-transition-type(site-iris)::view-transition-old(root) {
  z-index: 2;
  animation: site-iris-close 520ms cubic-bezier(.76, 0, .24, 1) both;
}

html:active-view-transition-type(site-iris)::view-transition-new(root) {
  animation: site-iris-open 820ms cubic-bezier(.16, 1, .3, 1) 460ms both;
}

/* --- 斜向擦除 --------------------------------------------------------------------- */

@keyframes site-diagonal-out {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); opacity: .1; }
}

@keyframes site-diagonal-in {
  0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); opacity: .2; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}

html:active-view-transition-type(site-diagonal)::view-transition-old(root) {
  z-index: 2;
  animation: site-diagonal-out 760ms cubic-bezier(.76, 0, .24, 1) both;
}

html:active-view-transition-type(site-diagonal)::view-transition-new(root) {
  animation: site-diagonal-in 760ms cubic-bezier(.16, 1, .3, 1) 250ms both;
}

/* --- 信号失帧 --------------------------------------------------------------------- */

@keyframes site-signal-out {
  0% { clip-path: inset(0); filter: none; transform: translateX(0); opacity: 1; }
  13% { clip-path: inset(0 0 72%); filter: contrast(1.8); transform: translateX(1.2%); }
  14% { clip-path: inset(0); transform: translateX(-1%); }
  30% { clip-path: inset(38% 0 34%); filter: saturate(.2); transform: translateX(1.4%); }
  31% { clip-path: inset(0); transform: translateX(-.8%); }
  48% { clip-path: inset(76% 0 0); filter: contrast(2); transform: translateX(1.1%); }
  49% { clip-path: inset(0); transform: translateX(0); }
  72% { clip-path: inset(0); filter: brightness(2.1) saturate(.15); opacity: .8; }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); filter: brightness(1.8) blur(3px); opacity: 0; }
}

@keyframes site-signal-in {
  0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); filter: brightness(2) saturate(.25); opacity: .2; }
  34% { clip-path: inset(48% 0 48%); filter: brightness(1.8); opacity: .7; }
  35% { clip-path: inset(0 0 78%); transform: translateX(-1%); }
  36% { clip-path: inset(0); transform: translateX(1%); }
  100% { clip-path: inset(0); filter: none; transform: none; opacity: 1; }
}

html:active-view-transition-type(site-signal)::view-transition-old(root) {
  z-index: 2;
  animation: site-signal-out 880ms cubic-bezier(.76, 0, .24, 1) both;
}

html:active-view-transition-type(site-signal)::view-transition-new(root) {
  animation: site-signal-in 880ms cubic-bezier(.16, 1, .3, 1) both;
}

/* --- 四色升幕（首页那套幕布，用于“跳过原生转场”的场合） ----------------------------- */

@keyframes site-foundation-out {
  0% { clip-path: inset(0); opacity: 1; transform: translateY(0); }
  100% { clip-path: inset(0 0 100%); opacity: 0; transform: translateY(-3vh); }
}

@keyframes site-foundation-in {
  0% { clip-path: inset(100% 0 0); opacity: 0; }
  30% { clip-path: inset(100% 0 0); opacity: 0; }
  31% { opacity: 1; }
  100% { clip-path: inset(0); opacity: 1; }
}

html:active-view-transition-type(site-foundation)::view-transition {
  background-color: #002fa7;
}

html:active-view-transition-type(site-foundation)::view-transition-old(root) {
  z-index: 2;
  animation: site-foundation-out 480ms cubic-bezier(.76, 0, .24, 1) both;
}

html:active-view-transition-type(site-foundation)::view-transition-new(root) {
  animation: site-foundation-in 820ms cubic-bezier(.16, 1, .3, 1) both;
}

/* ==========================================================================
   无 ViewTransition 时的兜底幕布
   --------------------------------------------------------------------------
   bootstrap 在首帧前检测：不支持跨文档转场时给 <html> 加 .vt-unsupported。
   此时用 html::before 画一条幕布，用一次性淡入把“硬切”换成“过场”。
   没有 JS 时（.vt-nojs）同样生效，保证最坏情况也有过场。
   ========================================================================== */

.vt-unsupported,
.vt-nojs {
  background-color: #0b0d0d;
  min-height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .vt-unsupported::before,
  .vt-nojs::before {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: block;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0, 47, 167, .55) 0 2px, rgba(0, 47, 167, 0) 2px),
      #0b0d0d;
    /* 只要 opacity / translate3d，全部走合成器，不会掉帧。
       时长给足 900ms：这也是“页面自己先播幕布再跳转”场景的兜底层，
       幕布退场必须晚于导航切换，否则会露出中间态。 */
    animation: vt-curtain-lift 900ms cubic-bezier(.16, 1, .3, 1) forwards;
  }

  .vt-unsupported.vt-curtain-dip::before,
  .vt-nojs.vt-curtain-dip::before {
    background: #000;
  }
}

@keyframes vt-curtain-lift {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, -1.5%, 0); }
}

/* ==========================================================================
   降低动态效果
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .vt-unsupported::before,
  .vt-nojs::before {
    display: none;
    animation: none;
  }

  html,
  body {
    scroll-behavior: auto;
  }
}