/* 从主站进入策略工坊时的轻量内容区过渡，仅保留量化动态图标。 */
:root { --xt-content-transition-top: 0px; }

html.is-page-navigating::after,
html.is-page-loading::after {
  content: "";
  position: fixed;
  z-index: 2147483646;
  inset: var(--xt-content-transition-top) 0 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-page) 94%, transparent);
}
html.is-page-navigating::after { animation: xt-content-fade-in 140ms ease forwards; }
html.is-page-loading::after { animation: xt-content-fade-out 180ms ease forwards; }

/* 过渡来源可能是主站的大顶栏，进入工坊后必须按工坊顶栏重新对齐，避免内容区露出半截。 */
html.is-page-loading:has(body.page-strategy-assistant)::after,
html.is-page-loading:has(body.page-strategy-workshop)::after,
html.is-page-loading:has(body.page-backtest)::after,
html.is-page-loading body.page-strategy-assistant .xt-page-loader,
html.is-page-loading body.page-strategy-workshop .xt-page-loader,
html.is-page-loading body.page-backtest .xt-page-loader {
  inset: var(--ws-topbar-h, 40px) 0 0 !important;
}

.xt-page-loader {
  position: fixed;
  z-index: 2147483647;
  inset: var(--xt-content-transition-top) 0 0;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-page) 94%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
html.is-page-loading .xt-page-loader { opacity: 1; visibility: visible; pointer-events: auto; }
.xt-page-loader[hidden], .xt-page-loader.is-exiting { opacity: 0; visibility: hidden; pointer-events: none; }

.xt-page-loader__mark {
  width: 7.5rem;
  height: 7.5rem;
  overflow: visible;
  filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--color-accent) 24%, transparent));
  animation: xt-loader-mark-in 180ms ease-out both;
}
.xt-page-loader__ring {
  stroke: color-mix(in srgb, var(--color-accent) 65%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 6 7;
  transform-origin: center;
}
.xt-page-loader__ring--outer { animation: xt-loader-spin 3.6s linear infinite; }
.xt-page-loader__ring--inner { stroke: color-mix(in srgb, var(--color-success) 75%, transparent); stroke-dasharray: 2 7; animation: xt-loader-spin 2.5s linear infinite reverse; }
.xt-page-loader__core { fill: var(--color-surface-raised); stroke: var(--color-accent); stroke-width: 2; }
.xt-page-loader__trend { stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: xt-loader-trend 1.1s ease-in-out infinite alternate; }
.xt-page-loader__signal { fill: var(--color-accent); transform-origin: center; animation: xt-loader-signal 1.15s ease-in-out infinite; }
.xt-page-loader__signal--two { fill: var(--color-success); animation-delay: .35s; }

@keyframes xt-content-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes xt-content-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes xt-loader-mark-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes xt-loader-spin { to { transform: rotate(360deg); } }
@keyframes xt-loader-trend { to { stroke-dashoffset: 0; } }
@keyframes xt-loader-signal { 50% { transform: scale(1.38); opacity: .62; } }

@media (prefers-reduced-motion: reduce) {
  html.is-page-navigating::after,
  html.is-page-loading::after,
  .xt-page-loader * { animation: none !important; transition: none !important; }
}