/* 跨页面转场引擎。由 <head> 的 bootstrap 与 resources/site-transitions.js 配合使用。
   稳定性要点（改动前先读完）：
   1. @view-transition 必须写在 CSS 里，不能只在 pageswap 里靠 JS 添加；
      只有 CSS 声明了它，浏览器才会为这次跨文档导航创建 ViewTransition。
   2. 出站页与入站页都要引用本文件，两边都有才生效。
   3. old/new 快照层显式固定 mix-blend-mode: normal；接管动画后还要重置
      ::view-transition-image-pair 的 isolation，否则会过曝发白。
   4. ::view-transition 底色取站点暗色，吃掉新旧快照间的缝隙。
   5. 不支持跨文档转场时由 bootstrap 加 .vt-unsupported，用幕布补一次淡入。 */

@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 + 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;
}

.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;

    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;
  }
}