/*
 * 外观换相层：阿斯忒拉用定向切面，阿莱忒娅用连续丝线与柔性薄幕。
 * 颜色只在遮挡峰值提交，避免复杂构件暴露原始跳色。
 */

.appearance-transition {
  --appearance-duration: 900ms;
  --appearance-from: #eef3f6;
  --appearance-mid: #657482;
  --appearance-to: #0b1118;
  --appearance-stage: #657482;
  --appearance-matte: #0b1118;
  --appearance-plane: #182333;
  --appearance-plane-soft: rgba(79, 92, 119, 0.46);
  --appearance-memory: rgba(111, 92, 145, 0.5);
  --appearance-sanctuary: rgba(19, 27, 43, 0.82);
  --appearance-line: rgba(187, 202, 214, 0.5);
  --appearance-echo: rgba(153, 135, 180, 0.58);
  --appearance-bloom: rgba(187, 202, 214, 0.5);
  --appearance-ink: #f2f5f6;
  --appearance-accent: #c3aa78;
  position: fixed;
  z-index: 820;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
  visibility: hidden;
}

.appearance-transition.is-active {
  visibility: visible;
}

.appearance-transition__matte,
.appearance-transition__astera,
.appearance-transition__garden,
.appearance-transition__astera-map,
.appearance-transition__silk-window,
.appearance-transition__silk-track,
.appearance-transition__silk-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.appearance-transition__matte {
  z-index: 1;
  top: -15dvh;
  right: auto;
  bottom: auto;
  left: -35vw;
  width: 170vw;
  height: 130dvh;
  background: var(--appearance-matte);
  will-change: transform, opacity;
}

.appearance-transition__astera,
.appearance-transition__garden {
  z-index: 2;
  display: none;
}

.appearance-transition[data-kind="astera"] .appearance-transition__astera,
.appearance-transition[data-kind="garden"] .appearance-transition__garden {
  display: block;
}

.appearance-transition[data-kind="astera"] .appearance-transition__matte {
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  animation: appearance-matte-astera var(--appearance-duration) cubic-bezier(0.58, 0, 0.22, 1) both;
}

.appearance-transition[data-kind="garden"] .appearance-transition__matte {
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--appearance-from);
}

.appearance-transition[data-kind="garden"] .appearance-transition__matte::before,
.appearance-transition[data-kind="garden"] .appearance-transition__matte::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  will-change: opacity;
}

.appearance-transition[data-kind="garden"] .appearance-transition__matte::before {
  background: var(--appearance-mid);
}

.appearance-transition[data-kind="garden"] .appearance-transition__matte::after {
  background: var(--appearance-to);
}

.appearance-transition[data-kind="garden"][data-phase="compose"] .appearance-transition__matte::before {
  animation: appearance-stage-garden-mid var(--appearance-duration) linear both;
}

.appearance-transition[data-kind="garden"][data-phase="compose"] .appearance-transition__matte::after {
  animation: appearance-stage-garden-target var(--appearance-duration) linear both;
}

/* 退出时只收起局部构图；同色底幕保持完全不透明，不再露出底层页面。 */
.appearance-transition[data-kind="garden"][data-phase="release"] .appearance-transition__matte {
  background: var(--appearance-to);
}

.appearance-transition[data-kind="garden"][data-phase="release"] .appearance-transition__garden {
  animation: appearance-garden-release var(--appearance-release-duration) cubic-bezier(0.42, 0, 0.2, 1) both;
  will-change: opacity;
}

.appearance-transition__plane {
  position: absolute;
  left: -118vw;
  width: 116vw;
  opacity: 0;
  will-change: transform, opacity;
}

.appearance-transition__plane--one {
  top: 10dvh;
  height: 31dvh;
  background: linear-gradient(100deg, transparent 0 5%, var(--appearance-plane-soft) 5% 74%, transparent 74%);
  clip-path: polygon(0 24%, 91% 0, 100% 62%, 13% 100%);
  animation: appearance-plane-one var(--appearance-duration) cubic-bezier(0.54, 0, 0.24, 1) both;
}

.appearance-transition__plane--two {
  top: 39dvh;
  height: 46dvh;
  background: linear-gradient(96deg, transparent 0 3%, var(--appearance-plane) 3% 83%, transparent 83%);
  clip-path: polygon(0 42%, 95% 0, 100% 55%, 8% 100%);
  animation: appearance-plane-two var(--appearance-duration) cubic-bezier(0.5, 0, 0.2, 1) both;
}

.appearance-transition__plane--three {
  top: 62dvh;
  height: 17dvh;
  background: linear-gradient(90deg, transparent, var(--appearance-accent) 9% 63%, transparent 78%);
  clip-path: polygon(0 56%, 98% 0, 100% 22%, 3% 100%);
  animation: appearance-plane-three var(--appearance-duration) cubic-bezier(0.6, 0, 0.25, 1) both;
}

.appearance-transition__astera-map {
  z-index: 4;
  overflow: visible;
  fill: none;
}

.appearance-transition__silk-window {
  z-index: 4;
  overflow: hidden;
  contain: paint;
  transform: translate3d(-100%, 0, 0);
  animation: appearance-silk-window var(--appearance-duration) var(--ease-ceremonial) both;
}

.appearance-transition__silk-track {
  transform: translate3d(100%, 0, 0);
  animation: appearance-silk-track var(--appearance-duration) var(--ease-ceremonial) both;
}

.appearance-transition.is-active[data-kind="garden"] .appearance-transition__silk-window,
.appearance-transition.is-active[data-kind="garden"] .appearance-transition__silk-track {
  will-change: transform;
}

.appearance-transition__silk-canvas {
  display: block;
  overflow: visible;
}

.appearance-transition__silk-canvas--portrait {
  display: none;
}

.appearance-transition__axis,
.appearance-transition__orbit {
  fill: none;
  stroke: var(--appearance-line);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.appearance-transition__axis {
  animation: appearance-axis-cross var(--appearance-duration) cubic-bezier(0.33, 0, 0.2, 1) both;
}

.appearance-transition__axis--echo {
  stroke-width: 0.72;
  opacity: 0.48;
  animation-name: appearance-axis-echo-cross;
}

.appearance-transition__orbit {
  stroke: color-mix(in srgb, var(--appearance-line) 64%, transparent);
  stroke-width: 0.8;
  animation: appearance-orbit-cross var(--appearance-duration) cubic-bezier(0.2, 0.68, 0.3, 1) both;
}

.appearance-transition__orbit--far {
  opacity: 0.38;
}

.appearance-transition__nodes circle {
  fill: var(--appearance-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: appearance-node-cross var(--appearance-duration) cubic-bezier(0.22, 0.76, 0.24, 1) both;
}

.appearance-transition__nodes circle:nth-child(2) { animation-delay: 24ms; }
.appearance-transition__nodes circle:nth-child(3) { animation-delay: 48ms; }

.appearance-transition__sanctuary {
  position: absolute;
  inset: -8dvh 22vw;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04) 31%, transparent 72%),
    var(--appearance-sanctuary);
  mask-image: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  will-change: opacity;
  animation: appearance-sanctuary-breathe var(--appearance-duration) ease both;
}

.appearance-transition__loader {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(520px, calc(100vw - 72px));
  justify-items: center;
  color: var(--appearance-ink);
  opacity: 0;
  text-align: center;
  transform: translate(-50%, -50%);
  animation: appearance-loader-presence var(--appearance-duration) linear both;
}

.appearance-transition__signature {
  width: min(390px, 78vw);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.1;
  opacity: 0.9;
}

.appearance-transition__signature .signature-guide {
  opacity: 0.2;
}

.appearance-transition__phase {
  display: grid;
  width: min(360px, 76vw);
  gap: 5px;
  margin-top: 13px;
}

.appearance-transition__phase > span {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.32em;
}

.appearance-transition__phase > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.appearance-transition__phase b {
  font-family: var(--font-sacred);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.appearance-transition__phase i {
  width: 30px;
  height: 1px;
  background: color-mix(in srgb, currentColor 54%, transparent);
}

.appearance-transition__phase small {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 0.2em;
  opacity: 0.62;
}

.appearance-transition__progress {
  position: relative;
  width: min(420px, 82vw);
  height: 9px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, currentColor 34%, transparent);
}

.appearance-transition__progress span {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 18% 82%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: appearance-loader-progress var(--appearance-duration) var(--ease-ceremonial) both;
}

.appearance-transition__progress i {
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  background: var(--appearance-accent);
  transform: translateX(0) rotate(45deg);
  animation: appearance-loader-node var(--appearance-duration) var(--ease-ceremonial) both;
}

/* 提交主题的这一帧关闭材质补间，由上层构图承担连续性。 */
html.is-appearance-swapping *,
html.is-appearance-swapping *::before,
html.is-appearance-swapping *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* 真正的三段式交接：旧内容退至画布，加载页独立换相，再让新内容从同色画布显现。 */
html.is-appearance-covering body > .identity-gate,
html.is-appearance-covering body > .app-shell {
  animation: appearance-page-cover var(--appearance-cover-duration) cubic-bezier(0.42, 0, 0.2, 1) both;
  pointer-events: none;
  will-change: opacity;
}

html.is-appearance-handoff body > .identity-gate,
html.is-appearance-handoff body > .app-shell {
  opacity: 0 !important;
  pointer-events: none;
  transition: none !important;
}

html.is-appearance-revealing body > .identity-gate,
html.is-appearance-revealing body > .app-shell {
  animation: appearance-page-reveal var(--appearance-reveal-duration) cubic-bezier(0.22, 0.72, 0.2, 1) both;
  will-change: opacity;
}

@keyframes appearance-matte-astera {
  0% { opacity: 0.08; transform: translate3d(-108%, 0, 0) skewX(-7deg); }
  37% { opacity: 0.97; }
  43%, 53% { opacity: 1; transform: translate3d(0, 0, 0) skewX(-7deg); }
  100% { opacity: 0.08; transform: translate3d(108%, 0, 0) skewX(-7deg); }
}

@keyframes appearance-stage-garden-mid {
  0%, 8% { opacity: 0; }
  45%, 100% { opacity: 1; }
}

@keyframes appearance-stage-garden-target {
  0%, 38% { opacity: 0; }
  74%, 100% { opacity: 1; }
}

@keyframes appearance-garden-release {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes appearance-page-cover {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes appearance-page-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes appearance-loader-presence {
  0%, 10% { opacity: 0; }
  25%, 100% { opacity: 1; }
}

@keyframes appearance-loader-progress {
  0%, 12% { opacity: 0; transform: scaleX(0); }
  24% { opacity: 1; }
  76%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes appearance-loader-node {
  0%, 12% { opacity: 0; transform: translateX(0) rotate(45deg); }
  24% { opacity: 1; }
  76% { transform: translateX(calc(min(420px, 82vw) - 7px)) rotate(225deg); }
  90%, 100% { opacity: 1; transform: translateX(calc(min(420px, 82vw) - 7px)) rotate(225deg); }
}

@keyframes appearance-plane-one {
  0%, 4% { opacity: 0; transform: translate3d(0, 5dvh, 0); }
  18%, 49% { opacity: 0.66; }
  60% { opacity: 0.28; }
  100% { opacity: 0; transform: translate3d(242vw, -4dvh, 0); }
}

@keyframes appearance-plane-two {
  0%, 8% { opacity: 0; transform: translate3d(-9vw, 0, 0); }
  25%, 53% { opacity: 0.94; }
  67% { opacity: 0.38; }
  100% { opacity: 0; transform: translate3d(251vw, -8dvh, 0); }
}

@keyframes appearance-plane-three {
  0%, 13% { opacity: 0; transform: translate3d(-14vw, 0, 0); }
  29%, 48% { opacity: 0.9; }
  63% { opacity: 0.32; }
  100% { opacity: 0; transform: translate3d(258vw, -3dvh, 0); }
}

@keyframes appearance-axis-cross {
  0%, 5% { opacity: 0; stroke-dashoffset: 1; }
  34%, 58% { opacity: 0.92; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -1; }
}

@keyframes appearance-axis-echo-cross {
  0%, 12% { opacity: 0; stroke-dashoffset: 1; }
  42%, 62% { opacity: 0.48; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -1; }
}

@keyframes appearance-orbit-cross {
  0%, 30% { opacity: 0; stroke-dashoffset: 1; }
  52%, 76% { opacity: 0.56; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -0.28; }
}

@keyframes appearance-node-cross {
  0%, 28% { opacity: 0; transform: scale(0.35); }
  43%, 66% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.72); }
}

@keyframes appearance-sanctuary-breathe {
  0%, 8% { opacity: 0; }
  35%, 100% { opacity: 0.16; }
}

@keyframes appearance-silk-window {
  0%, 5% { transform: translate3d(-100%, 0, 0); }
  68%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes appearance-silk-track {
  0%, 5% { transform: translate3d(100%, 0, 0); }
  68%, 100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) {
  .appearance-transition__matte {
    top: -25dvh;
    left: -58vw;
    width: 216vw;
    height: 152dvh;
  }

  .appearance-transition[data-kind="astera"] .appearance-transition__matte {
    clip-path: polygon(0 20%, 78% 0, 100% 82%, 22% 100%);
    animation-name: appearance-matte-astera-portrait;
  }

  .appearance-transition__plane--one {
    top: 8dvh;
    left: -136vw;
    width: 124vw;
    height: 42dvh;
  }

  .appearance-transition__plane--two {
    top: 43dvh;
    left: -145vw;
    width: 130vw;
    height: 46dvh;
  }

  .appearance-transition__plane--three,
  .appearance-transition__axis--echo,
  .appearance-transition__orbit--far,
  .appearance-transition__nodes circle:nth-child(3),
  .appearance-transition__silk-canvas--landscape {
    display: none;
  }

  .appearance-transition__astera-map {
    transform: rotate(-18deg) scale(1.22);
  }

  .appearance-transition__sanctuary {
    inset: -4dvh 12vw;
  }

  .appearance-transition__silk-canvas--portrait {
    display: block;
  }

  @keyframes appearance-matte-astera-portrait {
    0% { opacity: 0.08; transform: translate3d(-82%, 27%, 0) rotate(-9deg); }
    38% { opacity: 0.97; }
    43%, 54% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-9deg); }
    100% { opacity: 0.08; transform: translate3d(82%, -27%, 0) rotate(-9deg); }
  }

}

.appearance-transition[data-motion="ambient"] .appearance-transition__plane--three,
.appearance-transition[data-motion="ambient"] .appearance-transition__axis--echo,
.appearance-transition[data-motion="ambient"] .appearance-transition__orbit--far,
.appearance-transition[data-motion="ambient"] .appearance-transition__sanctuary {
  display: none;
}

.appearance-transition[data-motion="reduced"] .appearance-transition__astera,
.appearance-transition[data-motion="reduced"] .appearance-transition__garden {
  display: none;
}

.appearance-transition[data-motion="reduced"][data-phase="compose"] .appearance-transition__matte {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  clip-path: none;
  background: var(--appearance-from);
  animation: appearance-stage-reduced var(--appearance-duration) linear both;
}

@keyframes appearance-stage-reduced {
  0% { background-color: var(--appearance-from); transform: none; }
  20% { background-color: color-mix(in oklab, var(--appearance-from) 72%, var(--appearance-mid)); transform: none; }
  70%, 100% { background-color: var(--appearance-to); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .appearance-transition *,
  .appearance-transition *::before,
  .appearance-transition *::after {
    animation-timing-function: ease !important;
  }
}