/*
 * 艺术运动层：只负责比例、空间深度与短促的几何响应。
 * 页面主体仍由原有样式定义，避免运动效果反过来稀释信息层级。
 */

/* 容量仪器只发生浅层偏转，文字、进度和刻度仍保持可读。 */
.capacity-panel {
  perspective: 980px;
  perspective-origin: 48% 46%;
}

.capacity-orbit {
  --orbit-rx: 0deg;
  --orbit-ry: 0deg;
  --orbit-x: 0px;
  --orbit-y: 0px;
  transform: translate3d(var(--orbit-x), var(--orbit-y), 0) rotateX(var(--orbit-rx)) rotateY(var(--orbit-ry)) rotateZ(-2.2deg);
  transform-style: preserve-3d;
}

.capacity-orbit.is-gyro-active {
  will-change: transform;
}

.capacity-orbit .orbit-svg {
  transform: translateZ(8px);
}

.capacity-orbit .orbit-core {
  transform: translateZ(25px);
}

.capacity-orbit .orbit-code {
  transform: translateZ(38px);
}

.orbit-gyro {
  position: absolute;
  z-index: 1;
  inset: 8.5%;
  border: 1px solid color-mix(in srgb, var(--accent) 31%, transparent);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
  transform-style: preserve-3d;
}

.orbit-gyro--equator {
  transform: translateZ(15px) rotateX(68deg) rotateZ(4deg) scaleX(0.97);
}

.orbit-gyro--meridian {
  border-color: color-mix(in srgb, var(--line-strong) 74%, transparent);
  transform: translateZ(11px) rotateY(69deg) rotateZ(-7deg) scaleY(0.96);
}

/* 凭证页以一次性的向右冲击完成入场，随后立即归于静止。 */
.key-masthead__trace .key-trace {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.key-masthead__trace .key-trace--primary {
  stroke: rgba(var(--accent-rgb), 0.44);
}

.key-masthead__trace .key-trace--echo {
  stroke: rgba(var(--key-cold), 0.22);
}

.key-masthead__trace .key-trace--upper {
  stroke: rgba(var(--key-cold), 0.16);
}

.key-impact-shards polygon {
  fill: rgba(var(--key-cold), 0.065);
  opacity: 0;
  transform: scaleX(0.04) skewX(-4deg);
  transform-box: fill-box;
  transform-origin: left center;
}

.view--keys.is-active .key-trace--primary {
  animation: key-trace-draw 720ms var(--ease-ceremonial) 70ms both;
}

.view--keys.is-active .key-trace--echo {
  animation: key-trace-draw 640ms var(--ease-ceremonial) 165ms both;
}

.view--keys.is-active .key-trace--upper {
  animation: key-trace-draw 500ms var(--ease-ceremonial) 285ms both;
}

.view--keys.is-active .key-impact-shards polygon:first-child {
  animation: key-shard-enter 650ms var(--ease-ceremonial) 115ms both;
}

.view--keys.is-active .key-impact-shards polygon:last-child {
  animation: key-shard-enter 570ms var(--ease-ceremonial) 215ms both;
}

.view--keys.is-active .key-masthead__copy::before {
  animation: key-axis-enter 520ms var(--ease-ceremonial) 250ms both;
  transform-origin: top;
}

.view--keys.is-active .key-shared-note > span {
  animation: key-support-enter 520ms var(--ease-ceremonial) 440ms both;
  transform-origin: left;
}

/* 庭中凭证以多股连续丝线穿过散物，轨迹分别取自长发、飘带与卷梢。 */
.garden-key-thread {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.garden-key-thread--violet,
.garden-key-keepsakes path,
.garden-key-petals path,
.garden-key-seeds > * {
  opacity: 0;
  transform-box: fill-box;
}

.garden-key-keepsakes path {
  transform: translateY(2px) scale(0.9) rotate(-1deg);
  transform-origin: center;
}

.garden-key-petals path {
  transform: scale(0.88) rotate(-2deg);
  transform-origin: center;
}

html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-thread {
  animation: garden-key-thread-draw var(--thread-duration, 620ms) var(--ease-ceremonial) var(--thread-delay, 40ms) both;
}

html[data-surface="member"][data-member-theme="garden"] .garden-key-thread--memory { --thread-duration: 860ms; --thread-delay: 40ms; }
html[data-surface="member"][data-member-theme="garden"] .garden-key-thread--echo { --thread-duration: 760ms; --thread-delay: 150ms; }
html[data-surface="member"][data-member-theme="garden"] .garden-key-thread--companion { --thread-duration: 940ms; --thread-delay: 250ms; }
html[data-surface="member"][data-member-theme="garden"] .garden-key-thread--curl { --thread-duration: 620ms; --thread-delay: 390ms; }

html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-keepsakes path {
  animation: garden-key-keepsake-arrive 440ms var(--ease-ceremonial) both;
}

html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-keepsakes path:nth-child(1) { animation-delay: 115ms; }
html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-keepsakes path:nth-child(2) { animation-delay: 360ms; }

html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-petals path:nth-child(1) {
  animation: garden-key-bloom-arrive 440ms var(--ease-ceremonial) 350ms both;
}

html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-petals path:nth-child(2) {
  animation: garden-key-bloom-arrive 460ms var(--ease-ceremonial) 405ms both;
}

html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-petals path:nth-child(3) {
  animation: garden-key-bloom-arrive 430ms var(--ease-ceremonial) 455ms both;
}

html[data-surface="member"][data-member-theme="garden"] .view--keys.is-active .garden-key-seeds > * {
  animation: garden-key-seed-arrive 330ms ease-out 500ms both;
}

@keyframes key-trace-draw {
  from { opacity: 0.12; stroke-dashoffset: 1; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes key-shard-enter {
  0% { opacity: 0; transform: scaleX(0.04) skewX(-4deg); }
  36% { opacity: 0.8; }
  100% { opacity: 1; transform: scaleX(1) skewX(0); }
}

@keyframes key-axis-enter {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes key-support-enter {
  from { opacity: 0; transform: scaleX(0.08); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes garden-key-thread-draw {
  from { opacity: 0.12; stroke-dashoffset: 1; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes garden-key-keepsake-arrive {
  0% { opacity: 0; transform: translateY(2px) scale(0.9) rotate(-1deg); }
  52% { opacity: 0.82; }
  100% { opacity: 1; transform: none; }
}

@keyframes garden-key-bloom-arrive {
  from { opacity: 0; transform: scale(0.88) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}

@keyframes garden-key-seed-arrive {
  0% { opacity: 0; transform: scale(0.45); }
  58% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: none; }
}

/* 超宽屏不再把两组视觉锚点推到屏幕两端，而是构成一个居中的完整舞台。 */
@media (min-width: 1921px) {
  .identity-gate {
    --identity-stage-width: clamp(1800px, 72vw, 3000px);
    --identity-stage-edge: max(90px, calc((100vw - var(--identity-stage-width)) / 2));
    --identity-status-width: clamp(570px, 21vw, 820px);
    padding-inline: var(--identity-stage-edge);
    column-gap: clamp(96px, 5vw, 210px);
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }

  .identity-gate::before {
    width: clamp(940px, 32vw, 1240px);
  }

  .identity-gate::after {
    width: clamp(820px, 30vw, 1120px);
  }

  .identity-gate__art {
    align-items: flex-end;
  }

  .identity-gate__content {
    justify-items: start;
  }

  .identity-art__signature {
    width: clamp(380px, 12.5vw, 520px);
  }

  .identity-geometry {
    width: clamp(680px, 25vw, 1040px);
  }

  .identity-card {
    width: clamp(660px, 24vw, 980px);
  }

  .identity-gate__foot {
    right: var(--identity-stage-edge);
    left: var(--identity-stage-edge);
  }

  .public-status-signal--gate {
    right: var(--identity-stage-edge);
    width: var(--identity-status-width);
  }

  .identity-card__intro,
  .identity-status > p:not(.identity-form-error) {
    font-size: clamp(12px, 0.7vw, 15px);
  }

  .identity-mode-switch button,
  .identity-field label {
    font-size: clamp(11px, 0.64vw, 13px);
  }

  .identity-field > span {
    font-size: 7px;
    letter-spacing: 0.11em;
  }

  .identity-field input,
  .identity-field textarea {
    font-size: clamp(13px, 0.76vw, 16px);
  }

  .password-toggle,
  .identity-form-note {
    font-size: 10px;
  }

  .identity-form-note {
    color: color-mix(in srgb, var(--text-2) 62%, var(--text-3));
  }

  .public-status-signal--gate span,
  .public-status-signal--gate small {
    font-size: 7px;
  }

  .public-status-signal--gate b {
    font-size: 11px;
  }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  .identity-card {
    padding: 68px 76px 62px 92px;
  }

  .identity-card__head h1,
  .identity-status h1 {
    font-size: clamp(34px, 1.12vw, 44px);
  }

  .identity-field input {
    height: 49px;
  }

  .identity-form {
    gap: 20px;
  }
}

/* 只抬高承担操作与状态含义的字号；装饰性微缩文字继续保持原有密度。 */
@media (min-width: 1280px) {
  .capacity-meta span,
  .metric-card > p,
  .activity-legend,
  .provider-row small,
  .provider-row > code {
    color: color-mix(in srgb, var(--text-2) 68%, var(--text-3));
  }

  .capacity-meta span,
  .metric-card > p {
    font-size: 10px;
  }

  .capacity-meta b,
  .provider-row b {
    font-size: 11px;
  }

  .activity-legend,
  .provider-row small,
  .provider-row > code {
    font-size: 8px;
  }

  .view--keys .key-masthead__copy > p:last-child {
    font-size: 13px;
  }

  .view--keys .key-shared-note,
  .view--keys .key-route__identity b {
    font-size: 11px;
  }

  .view--keys .key-route__identity code,
  .view--keys .key-route__usage small,
  .view--keys .key-route__usage time,
  .view--keys .key-route em,
  .view--keys .key-endpoint > p,
  .view--keys .key-endpoint > button {
    font-size: 9px;
  }

  .view--keys .key-endpoint > code {
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .identity-art__signature {
    top: 12px;
    width: min(44vw, 170px);
  }

  .public-status-signal--gate {
    top: 57px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capacity-orbit {
    transform: rotateZ(-2.2deg) !important;
  }

  .view--keys.is-active .key-trace,
  .view--keys.is-active .key-impact-shards polygon,
  .view--keys.is-active .garden-key-thread,
  .view--keys.is-active .garden-key-keepsakes path,
  .view--keys.is-active .garden-key-petals path,
  .view--keys.is-active .garden-key-seeds > *,
  .view--keys.is-active .key-masthead__copy::before,
  .view--keys.is-active .key-shared-note > span {
    animation: none !important;
  }

  .key-masthead__trace .key-trace {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .key-impact-shards polygon {
    opacity: 1;
    transform: none;
  }

  .garden-key-thread {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .garden-key-keepsakes path,
  .garden-key-petals path,
  .garden-key-seeds > * {
    opacity: 1;
    transform: none;
  }
}