/* Studio Vault — Base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink-900);
  color: var(--mist-200);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: 'liga', 'dlig', 'kern';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

/* iOS 风液态动态背景：固定全屏，多个色斑独立循环漂移（持续运动，不停顿） */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, #0e1a30 0%, #060d1a 60%, #03060d 100%);
  overflow: hidden;
}
.bg-aurora::before, .bg-aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bg-aurora::before {
  width: 55vw; height: 55vw;
  top: -10vw; left: -8vw;
  background: radial-gradient(circle at 30% 30%, #c8a96b 0%, rgba(200,169,107,0.5) 35%, transparent 70%);
  opacity: 0.55;
  animation-name: drift1;
  animation-duration: 22s;
}
.bg-aurora::after {
  width: 52vw; height: 52vw;
  bottom: -12vw; right: -10vw;
  background: radial-gradient(circle at 60% 40%, #6b3a6b 0%, rgba(107,58,107,0.55) 40%, transparent 75%);
  opacity: 0.55;
  animation-name: drift2;
  animation-duration: 26s;
}
.bg-aurora .blob-c, .bg-aurora .blob-d, .bg-aurora .blob-e {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bg-aurora .blob-c {
  width: 45vw; height: 45vw;
  top: 25%; left: 35%;
  background: radial-gradient(circle, #1f3b6e 0%, rgba(31,59,110,0.55) 40%, transparent 75%);
  opacity: 0.6;
  animation-name: drift3;
  animation-duration: 28s;
}
.bg-aurora .blob-d {
  width: 38vw; height: 38vw;
  top: 55%; left: 5%;
  background: radial-gradient(circle, #7a2c3d 0%, rgba(122,44,61,0.5) 40%, transparent 75%);
  opacity: 0.5;
  animation-name: drift4;
  animation-duration: 32s;
}
.bg-aurora .blob-e {
  width: 30vw; height: 30vw;
  top: 5%; right: 15%;
  background: radial-gradient(circle, #d8be86 0%, rgba(216,190,134,0.45) 35%, transparent 75%);
  opacity: 0.4;
  animation-name: drift5;
  animation-duration: 19s;
}

/* 每个动画都是闭合的 0% == 100% 循环路径，保证持续运动而不是来回徘徊 */
@keyframes drift1 {
  0%   { transform: translate(0, 0)         scale(1); }
  20%  { transform: translate(10vw, 6vh)    scale(1.08); }
  40%  { transform: translate(14vw, 18vh)   scale(0.95); }
  60%  { transform: translate(4vw, 22vh)    scale(1.05); }
  80%  { transform: translate(-6vw, 12vh)   scale(1.02); }
  100% { transform: translate(0, 0)         scale(1); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0)         scale(1); }
  20%  { transform: translate(-10vw, -8vh)  scale(1.1); }
  40%  { transform: translate(-16vw, 4vh)   scale(0.92); }
  60%  { transform: translate(-6vw, 10vh)   scale(1.05); }
  80%  { transform: translate(4vw, 2vh)     scale(0.98); }
  100% { transform: translate(0, 0)         scale(1); }
}
@keyframes drift3 {
  0%   { transform: translate(0, 0)         scale(1); }
  25%  { transform: translate(-12vw, 6vh)   scale(1.12); }
  50%  { transform: translate(8vw, 12vh)    scale(0.95); }
  75%  { transform: translate(14vw, -4vh)   scale(1.06); }
  100% { transform: translate(0, 0)         scale(1); }
}
@keyframes drift4 {
  0%   { transform: translate(0, 0)         scale(1); }
  20%  { transform: translate(8vw, -6vh)    scale(1.06); }
  40%  { transform: translate(18vw, 4vh)    scale(1.1); }
  60%  { transform: translate(10vw, 14vh)   scale(0.95); }
  80%  { transform: translate(-4vw, 6vh)    scale(1.02); }
  100% { transform: translate(0, 0)         scale(1); }
}
@keyframes drift5 {
  0%   { transform: translate(0, 0)         scale(1); }
  25%  { transform: translate(-6vw, 8vh)    scale(1.1); }
  50%  { transform: translate(-14vw, 18vh)  scale(0.94); }
  75%  { transform: translate(-4vw, 14vh)   scale(1.06); }
  100% { transform: translate(0, 0)         scale(1); }
}

/* 颗粒噪点叠加层，给液态光斑加一点电影感胶片质感 */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* 链接 / 通用元素 */
a { color: var(--gold-500); text-decoration: none; }
a:hover { color: var(--gold-400); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold-500); color: var(--ink-900); }

.serial { font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; color: var(--gold-500); font-weight: 400; }
.label  { font-family: var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; color: var(--mist-500); font-weight: 400; }
.script { font-family: var(--f-display); font-style: italic; font-weight: 500; letter-spacing: 0.01em; }
.script-up { font-family: var(--f-display-up); }

.gold-rule { height: 1px; width: 100%; background: var(--gold-line); }

.app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 28px; width: 100%; }

@media (max-width: 720px) {
  .container { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  /* 仅减少 UI 过渡动画，背景液态保留运动 */
  *:not(.bg-aurora):not(.bg-aurora *) {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}