/*
 * /static/css/components/public-detail-transition.css
 * 公开页跨文档切换：完整画面短促交叉淡化，保持文字、图表与玻璃背景。
 * 相关文件：static/js/public-detail-transition.js, views/base.html
 */

@view-transition {
  navigation: auto;
}

:root {
  --public-detail-fade-duration: 180ms;
  --public-detail-enter-duration: 220ms;
  --public-detail-enter-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
  --public-detail-enter-offset: 18px;
}

/*
 * 详情跨文档过渡的新页会在 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: plus-lighter;
  will-change: opacity;
}

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

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

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

html.public-detail-transitioning[data-public-detail-transition-type="detail-exit"]::view-transition-new(public-detail-stage) {
  animation:
    public-detail-fade-in var(--public-detail-fade-duration) ease-out both;
}

/* 与首页玻璃态切换一样，只移动真实内容，壁纸与导航不参与快照。 */
html.public-detail-live-transitioning [data-public-detail-live-stage="1"] {
  will-change: transform;
}

html.public-detail-live-transitioning[data-public-detail-transition-type="detail-enter"] [data-public-detail-live-stage="1"] {
  transform: translateX(var(--public-detail-enter-offset));
  animation: public-detail-enter-forward var(--public-detail-enter-duration) var(--public-detail-enter-easing) both;
}

html.public-detail-live-transitioning[data-public-detail-transition-type="detail-exit"] [data-public-detail-live-stage="1"] {
  transform: translateX(calc(-1 * var(--public-detail-enter-offset)));
  animation: public-detail-enter-backward var(--public-detail-enter-duration) var(--public-detail-enter-easing) both;
}

html.public-detail-live-transitioning[data-public-detail-transition-type="page-forward"] [data-public-detail-live-stage="1"] {
  transform: translateX(28px);
  animation: public-page-enter-forward 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

html.public-detail-live-transitioning[data-public-detail-transition-type="page-backward"] [data-public-detail-live-stage="1"] {
  transform: translateX(-28px);
  animation: public-page-enter-backward 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes public-page-enter-forward {
  from { transform: translateX(28px); }
  to { transform: translateX(0); }
}

@keyframes public-page-enter-backward {
  from { transform: translateX(-28px); }
  to { transform: translateX(0); }
}

/* 两张完整画面以相同曲线交叉淡化；背景不会因半透明内容快照叠加而变暗。 */
@keyframes public-detail-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes public-detail-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 不支持跨文档快照时沿用真实 DOM 位移动画，玻璃祖先不能做 opacity 动画。 */
@keyframes public-detail-enter-forward {
  from { transform: translateX(var(--public-detail-enter-offset)); }
  to { transform: translateX(0); }
}

@keyframes public-detail-enter-backward {
  from { transform: translateX(calc(-1 * var(--public-detail-enter-offset))); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.public-detail-live-transitioning [data-public-detail-live-stage="1"],
  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;
  }
}