/* ==========================================================
   Gate · 访客维护页样式
   移动优先 · 100dvh 铺满 · 无 JS 亦有动画
   ========================================================== */

/* ---------- 主题变量 ---------- */
html[data-theme="dark"] {
  --bg1:#070b14; --bg2:#0c1322; --bg3:#111a2e;
  --fg:#e8eefb; --fg-2:#93a3bd; --fg-3:#5d6d87;
  --panel1:#1e293b; --panel2:#0f172a; --panel3:#334155;
  --hole:#0b1220; --line:rgba(148,163,184,.14);
  --chip:rgba(255,255,255,.045); --chip-b:rgba(148,163,184,.18);
  --shadow:0 18px 50px -18px rgba(0,0,0,.85);
}
html[data-theme="light"] {
  --bg1:#f6f9ff; --bg2:#eef3fb; --bg3:#e4ecf8;
  --fg:#0f1b2e; --fg-2:#4a5b74; --fg-3:#8496ae;
  --panel1:#dde6f3; --panel2:#eef3fb; --panel3:#c2d0e4;
  --hole:#f6f9ff; --line:rgba(15,27,46,.10);
  --chip:rgba(255,255,255,.72); --chip-b:rgba(15,27,46,.10);
  --shadow:0 16px 40px -20px rgba(15,27,46,.42);
}
html[data-accent="sky"]     { --a1:#7dd3fc; --a2:#3b82f6; }
html[data-accent="violet"]  { --a1:#c4b5fd; --a2:#8b5cf6; }
html[data-accent="emerald"] { --a1:#6ee7b7; --a2:#10b981; }
html[data-accent="amber"]   { --a1:#fcd34d; --a2:#f59e0b; }
html[data-accent="rose"]    { --a1:#fda4af; --a2:#f43f5e; }

/* ---------- 基础 ---------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0;
  min-height:100dvh;
  display:flex; flex-direction:column;
  background:var(--bg1);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- 背景 ---------- */
.bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bg .blob {
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:.5;
  animation:drift 22s ease-in-out infinite;
}
.b1 { width:56vmin; height:56vmin; left:-16vmin; top:-12vmin; background:var(--a2); }
.b2 { width:46vmin; height:46vmin; right:-14vmin; top:24vmin; background:var(--a1);
      animation-delay:-8s; opacity:.36; }
.b3 { width:60vmin; height:60vmin; left:16vmin; bottom:-26vmin; background:var(--a2);
      animation-delay:-15s; opacity:.24; }
html[data-theme="light"] .bg .blob { opacity:.34; }

.grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 42%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 42%, #000 30%, transparent 78%);
}
@keyframes drift {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  33%     { transform:translate3d(6vmin,4vmin,0) scale(1.12); }
  66%     { transform:translate3d(-5vmin,6vmin,0) scale(.94); }
}

/* ---------- 顶栏 ---------- */
.topbar {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:9px;
  padding:16px 20px 0;
  font-size:11.5px; letter-spacing:.14em; font-weight:600;
  color:var(--fg-3); text-transform:uppercase;
}
.pulse {
  width:7px; height:7px; border-radius:50%; background:var(--a2);
  box-shadow:0 0 0 0 var(--a2); animation:pulse 2s ease-out infinite; flex:none;
}
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(59,130,246,.55); }
  70%  { box-shadow:0 0 0 9px rgba(59,130,246,0); }
  100% { box-shadow:0 0 0 0 rgba(59,130,246,0); }
}
.topbar .brand { color:var(--fg-2); }
.tb-code {
  margin-left:auto; letter-spacing:.02em; text-transform:none;
  font-weight:500; font-size:11px; color:var(--fg-3);
  max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- 主区 ---------- */
.wrap {
  position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:26px 26px 12px; text-align:center; width:100%;
}

.anim-box { width:min(46vw,186px); aspect-ratio:1; margin-bottom:30px; }
.anim { width:100%; height:100%; display:block; overflow:visible; }

.title {
  margin:0 0 14px; font-size:clamp(23px,6.6vw,32px);
  line-height:1.24; font-weight:700; letter-spacing:-.02em;
  color:var(--fg); max-width:16em;
  text-wrap:balance;
}
.subtitle {
  margin:0; font-size:clamp(14px,3.9vw,16px); line-height:1.68;
  color:var(--fg-2); max-width:21em; text-wrap:pretty;
}

/* ---------- 倒计时 ---------- */
.cd {
  position:relative; margin-top:34px;
  width:158px; height:158px; display:grid; place-items:center;
}
.cd-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.cd-ring circle { fill:none; stroke-width:5; stroke-linecap:round; }
.ring-bg { stroke:var(--line); }
.ring-fg {
  stroke:var(--a1);
  stroke-dasharray:327;
  transition:stroke-dashoffset 1s linear;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--a1) 55%, transparent));
}
.cd-inner { position:relative; text-align:center; }
.cd-time {
  font-size:27px; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--fg);
}
.cd-label {
  margin-top:5px; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3);
}

.eta {
  margin:22px 0 0; font-size:12.5px; color:var(--fg-3);
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:999px;
  background:var(--chip); border:1px solid var(--chip-b);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.eta:empty { display:none; }

/* ---------- 页脚 ---------- */
.foot {
  position:relative; z-index:2;
  padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11.5px; color:var(--fg-3);
}
.foot .sep { opacity:.5; }

/* ==========================================================
   SVG 动画（全部由 CSS 驱动）
   ========================================================== */
.halo { opacity:.14; transform-origin:120px 120px; animation:breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(.9);opacity:.10} 50%{transform:scale(1.06);opacity:.20} }

/* --- 齿轮 --- */
.anim-gear .gear-main { transform-origin:100px 146px; animation:spin 7s linear infinite; }
.anim-gear .gear-sub  { transform-origin:176px 58px;  animation:spin 4s linear infinite reverse; }
@keyframes spin { to { transform:rotate(360deg); } }

/* --- 扳手 --- */
.anim-wrench .wrench-arm { transform-origin:64px 188px; animation:swing 2.6s ease-in-out infinite; }
.anim-wrench .bolt { transform-origin:120px 99px; animation:boltTurn 2.6s ease-in-out infinite; }
.anim-wrench .spark { transform-origin:120px 99px; animation:flash 2.6s ease-out infinite; opacity:0; }
@keyframes swing {
  0%,58%,100% { transform:rotate(0deg); }
  22%         { transform:rotate(-27deg); }
  38%         { transform:rotate(-3deg); }
}
@keyframes boltTurn {
  0%,58%,100% { transform:rotate(0deg); }
  30%         { transform:rotate(150deg); }
  44%         { transform:rotate(6deg); }
}
@keyframes flash {
  0%,34%  { opacity:0; transform:scale(.5); }
  40%     { opacity:.85; transform:scale(1); }
  56%     { opacity:0; transform:scale(1.25); }
  100%    { opacity:0; }
}

/* --- 服务器机架 --- */
.anim-server .scan { animation:scanDown 2.8s linear infinite; }
@keyframes scanDown {
  0%   { transform:translateY(0);    opacity:0; }
  12%  { opacity:.95; }
  88%  { opacity:.95; }
  100% { transform:translateY(148px); opacity:0; }
}
.anim-server .led { animation:blink 1.6s ease-in-out infinite; }
.anim-server .l0a { animation-delay:0s; }    .anim-server .l0b { animation-delay:.4s; }
.anim-server .l1a { animation-delay:.53s; } .anim-server .l1b { animation-delay:.93s; }
.anim-server .l2a { animation-delay:1.06s; } .anim-server .l2b { animation-delay:1.46s; }
@keyframes blink { 0%,100%{opacity:.18} 42%{opacity:1} 62%{opacity:.42} }
.anim-server .bar { animation:flow 1.9s ease-in-out infinite; }
.anim-server .b0-0{animation-delay:0s}   .anim-server .b0-1{animation-delay:.16s}
.anim-server .b0-2{animation-delay:.32s} .anim-server .b0-3{animation-delay:.48s}
.anim-server .b1-0{animation-delay:.24s} .anim-server .b1-1{animation-delay:.40s}
.anim-server .b1-2{animation-delay:.56s} .anim-server .b1-3{animation-delay:.72s}
.anim-server .b2-0{animation-delay:.48s} .anim-server .b2-1{animation-delay:.64s}
.anim-server .b2-2{animation-delay:.80s} .anim-server .b2-3{animation-delay:.96s}
@keyframes flow { 0%,100%{transform:scaleY(.5);opacity:.2} 50%{transform:scaleY(1);opacity:.85} }
.anim-server .bar { transform-box:fill-box; transform-origin:center; }

/* --- 时钟 --- */
.anim-clock .hand-s { transform-origin:120px 120px; animation:spin 60s steps(60) infinite; }
.anim-clock .hand-m { transform-origin:120px 120px; animation:spin 3600s linear infinite; }
.anim-clock .hand-h { transform-origin:120px 120px; animation:spin 43200s linear infinite; }
.anim-clock .core  { animation:breathe 2.6s ease-in-out infinite; }

/* ---------- 无障碍 / 省电 ---------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* ---------- 窄屏微调 ---------- */
@media (max-width:360px) {
  .anim-box { width:min(44vw,150px); margin-bottom:24px; }
  .cd { width:138px; height:138px; margin-top:28px; }
  .cd-time { font-size:24px; }
}

/* ---------- 横屏矮屏 ---------- */
@media (max-height:560px) and (orientation:landscape) {
  .anim-box { width:min(22vh,140px); margin-bottom:18px; }
  .cd { width:120px; height:120px; margin-top:20px; }
  .cd-time { font-size:21px; }
  .title { font-size:22px; margin-bottom:8px; }
  .topbar { padding-top:10px; }
}