/*
 * /static/css/components/public-detail-transition.css
 * 公开页 <-> 详情页跨文档纵深切换动画真源。
 * 相关文件：static/js/public-detail-transition.js, views/base.html, docs/开发/公开页切页动画维护.md
 */

@view-transition {
  navigation: auto;
}

:root {
  --public-detail-enter-duration: 600ms;
  --public-detail-exit-duration: 500ms;
  --public-detail-enter-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --public-detail-exit-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --public-detail-enter-scale-from: 1.015;
  --public-detail-enter-back-scale-from: 0.985;
  --public-detail-exit-scale-to: 0.985;
  --public-detail-exit-back-scale-to: 1.015;
}

/*
 * 详情跨文档过渡的新页会在 pagereveal 前后先读取 theme 初始化状态。
 * 这里只在目标链路上临时放开 body/card 的初始化隐藏，避免整屏先露出主题底色。
 */
html.public-detail-prewarming body {
  visibility: visible !important;
}

html.public-detail-prewarming .card,
html.public-detail-prewarming .server-card,
html.public-detail-prewarming .dashboard-inner-card,
html.public-detail-prewarming .dashboard-outer-card,
html.public-detail-prewarming .dashboard-card {
  opacity: 1 !important;
}

html.public-detail-transitioning::view-transition-group(public-detail-stage) {
  animation: none;
}

html.public-detail-transitioning::view-transition-image-pair(public-detail-stage) {
  isolation: isolate;
}

html.public-detail-transitioning::view-transition-old(public-detail-stage),
html.public-detail-transitioning::view-transition-new(public-detail-stage) {
  backface-visibility: hidden;
  mix-blend-mode: normal;
  will-change: transform;
}

html.public-detail-transitioning[data-public-detail-transition-type="detail-enter"]::view-transition-old(public-detail-stage) {
  animation:
    public-detail-exit-forward var(--public-detail-exit-duration)
    var(--public-detail-exit-easing) both;
}

html.public-detail-transitioning[data-public-detail-transition-type="detail-enter"]::view-transition-new(public-detail-stage) {
  animation:
    public-detail-enter-forward var(--public-detail-enter-duration)
    var(--public-detail-enter-easing) both;
}

html.public-detail-transitioning[data-public-detail-transition-type="detail-exit"]::view-transition-old(public-detail-stage) {
  animation:
    public-detail-exit-backward var(--public-detail-exit-duration)
    var(--public-detail-exit-easing) both;
}

html.public-detail-transitioning[data-public-detail-transition-type="detail-exit"]::view-transition-new(public-detail-stage) {
  animation:
    public-detail-enter-backward var(--public-detail-enter-duration)
    var(--public-detail-enter-easing) both;
}

/*
 * 详情页纵深切换的内容层不是实底画布。
 * 因为详情首屏大量使用 glass-card 与半透明面板，
 * 所以这里不能再对 old/new 快照做 opacity 交叉，否则会把稳定背景透出来，形成闪烁感。
 */
@keyframes public-detail-enter-forward {
  0% {
    transform: scale(var(--public-detail-enter-scale-from));
  }

  84% {
    transform: scale(1.002);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes public-detail-exit-forward {
  0% {
    transform: scale(1);
  }

  80% {
    transform: scale(var(--public-detail-exit-scale-to));
  }

  100% {
    transform: scale(var(--public-detail-exit-scale-to));
  }
}

@keyframes public-detail-enter-backward {
  0% {
    transform: scale(var(--public-detail-enter-back-scale-from));
  }

  84% {
    transform: scale(0.998);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes public-detail-exit-backward {
  0% {
    transform: scale(1);
  }

  80% {
    transform: scale(var(--public-detail-exit-back-scale-to));
  }

  100% {
    transform: scale(var(--public-detail-exit-back-scale-to));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.public-detail-transitioning::view-transition-old(public-detail-stage),
  html.public-detail-transitioning::view-transition-new(public-detail-stage) {
    animation: none;
    will-change: auto;
  }
}