/* ============================================================================
   FLEET OS V2 · 登录过场（CINEMATIC ACCESS）
   时序：光幕 → 环轨 → 粒子汇聚 → 进度闭合 → 光爆揭幕（约 3.4s）
   深色＝方舟终端；浅色＝液态玻璃。均由 --fx-* 变量驱动。
   ========================================================================== */

.login-fx {
  --fx-dur: 3.45s;
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; overflow: hidden;
  transition: opacity .45s var(--ease);
  isolation: isolate;
}
.login-fx.on { opacity: 1; pointer-events: auto; }

/* 光幕：模糊页面 + 冷暖辉光 */
.fx-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 42% at 50% 42%, color-mix(in srgb, var(--lime) 12%, transparent), transparent 68%),
    radial-gradient(38% 36% at 74% 22%, color-mix(in srgb, var(--cool) 9%, transparent), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.62) 100%),
    #06090b;
  backdrop-filter: blur(42px) saturate(135%);
  -webkit-backdrop-filter: blur(42px) saturate(135%);
}
.login-fx.on .fx-veil { animation: fxVeilIn .55s var(--ease) both; }
@keyframes fxVeilIn { from { opacity: 0; } to { opacity: 1; } }

.fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; opacity: .95;
}

/* 舞台 */
.fx-stage {
  position: relative; z-index: 3;
  width: min(92vw, 560px); height: 470px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
  transform-origin: 50% 50%;
}
.login-fx.on .fx-stage { animation: fxStageOut .5s var(--ease) 2.95s both; }
@keyframes fxStageOut {
  to { opacity: 0; transform: scale(1.06) translateY(-8px); filter: blur(6px); }
}

/* 两侧导轨 */
.fx-rails { position: absolute; left: 0; right: 0; top: 50%; height: 1px; pointer-events: none; }
.fx-rails i {
  position: absolute; top: 0; height: 1px; width: 34%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lime) 72%, transparent));
  transform: scaleX(0); opacity: 0;
}
.fx-rails i:first-child { left: 0; transform-origin: right center; }
.fx-rails i:last-child {
  right: 0; transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 72%, transparent), transparent);
}
.login-fx.on .fx-rails i { animation: fxRailIn 1.1s var(--ease) .25s both; }
@keyframes fxRailIn {
  0% { opacity: 0; transform: scaleX(0); }
  30% { opacity: .9; }
  100% { opacity: .25; transform: scaleX(1); }
}

/* 环轨：三层不同速度 */
.fx-rings { position: absolute; width: 400px; height: 400px; pointer-events: none; opacity: 0; }
.fx-rings i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lime) 30%, transparent);
}
.fx-rings .r1 { border-style: dashed; border-width: 1px; animation: fxSpin 16s linear infinite; }
.fx-rings .r2 {
  inset: 34px; border-style: dotted;
  border-color: color-mix(in srgb, var(--cool) 34%, transparent);
  animation: fxSpin 11s linear infinite reverse;
}
.fx-rings .r3 {
  inset: 68px; border-color: color-mix(in srgb, var(--lime) 18%, transparent);
  animation: fxSpin 24s linear infinite;
}
.login-fx.on .fx-rings { animation: fxRingsIn 1s var(--ease) .1s both; }
@keyframes fxRingsIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* 中心光环：细射线日冕 */\n.fx-halo {\n  position: absolute; width: 300px; height: 300px; border-radius: 50%;\n  pointer-events: none; opacity: 0;\n  background: repeating-conic-gradient(from 0deg,\n    color-mix(in srgb, var(--lime) 30%, transparent) 0deg 0.5deg,\n    transparent 0.5deg 7.5deg);\n  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 44%, #000 58% 92%, transparent 100%);\n  mask-image: radial-gradient(circle at 50% 50%, transparent 0 44%, #000 58% 92%, transparent 100%);\n  animation: fxSpin 46s linear infinite reverse;\n}\n.login-fx.on .fx-halo { animation: fxSpin 46s linear infinite reverse, fxHaloIn 1.2s var(--ease) .35s both; }\n@keyframes fxHaloIn { from { opacity: 0; transform: scale(.8); } to { opacity: .28; transform: scale(1); } }\n\n/* 雷达扫光：锥形渐变 + 环形遮罩 */
.fx-sweep {
  position: absolute; width: 440px; height: 440px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg 306deg,
    color-mix(in srgb, var(--lime) 14%, transparent) 342deg,
    color-mix(in srgb, var(--lime) 32%, transparent) 357deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 64%, #000 66% 99%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 64%, #000 66% 99%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: blur(1px);
  animation: fxSweep 2.6s linear infinite;
}
.login-fx.on .fx-sweep { animation: fxSweep 2.6s linear infinite, fxSweepIn .8s var(--ease) .3s both; }
@keyframes fxSweep { to { transform: rotate(360deg); } }
@keyframes fxSweepIn { from { opacity: 0; } to { opacity: .85; } }

/* 中心徽标：SVG 进度环 + 玻璃菱标 */
.fx-badge { position: relative; width: 152px; height: 152px; display: grid; place-items: center; flex: none; }
.fx-glow {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--lime) 14%, transparent) 0%,
    color-mix(in srgb, var(--lime) 5%, transparent) 44%,
    transparent 64%);
  filter: blur(30px);
}
.login-fx.on .fx-glow { animation: fxGlowIn 1.4s var(--ease) .5s both; }
@keyframes fxGlowIn {
  0% { opacity: 0; transform: scale(.6); }
  60% { opacity: .9; }
  100% { opacity: .55; transform: scale(1); }
}
.fx-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.fx-ring-svg .fx-track {
  fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 2;
}
.fx-ring-svg .fx-bar {
  fill: none; stroke: url(#fx-grad); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 377; stroke-dashoffset: 377;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lime) 55%, transparent));
}
.login-fx.on .fx-ring-svg .fx-bar { animation: fxRingFill 2s var(--ease) 1s both; }
@keyframes fxRingFill { to { stroke-dashoffset: 0; } }

.fx-mark {
  position: relative; z-index: 2;
  display: grid; place-items: center; width: 70px; height: 70px;
  border: 1.5px solid color-mix(in srgb, var(--lime) 78%, transparent);
  border-radius: 4px; color: var(--lime);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lime) 18%, transparent), color-mix(in srgb, var(--lime) 4%, transparent));
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--lime) 6%, transparent),
    0 0 34px color-mix(in srgb, var(--lime) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  font: 700 24px/1 var(--mono);
  transform: rotate(45deg) scale(.6); opacity: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fx-mark > span { transform: rotate(-45deg); }
.login-fx.on .fx-mark { animation: fxMarkIn .9s cubic-bezier(.2,1.4,.3,1) .95s both; }
@keyframes fxMarkIn {
  0% { opacity: 0; transform: rotate(45deg) scale(.55); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: rotate(45deg) scale(1); }
}
.fx-pulse {
  position: absolute; width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lime) 50%, transparent);
  opacity: 0;
}
.login-fx.on .fx-pulse { animation: fxPulseOut 1.6s var(--ease) 1.5s infinite; }
@keyframes fxPulseOut {
  0% { opacity: .8; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.75); }
}

/* 文案 */
.fx-title {
  position: relative; margin-top: 6px; color: var(--ink);
  font: 800 30px/1.1 var(--sans); letter-spacing: .4em; text-indent: .4em;
  clip-path: inset(0 100% 0 0);
}
.login-fx.on .fx-title { animation: fxTitleIn 1.05s var(--ease) 1.55s both; }
@keyframes fxTitleIn {
  0% { clip-path: inset(0 100% 0 0); opacity: .2; letter-spacing: .6em; }
  100% { clip-path: inset(0 -2% 0 0); opacity: 1; letter-spacing: .42em; }
}
/* 标题扫光 */
.fx-title::after {
  content: ""; position: absolute; top: -12%; bottom: -12%; left: -46%; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  mix-blend-mode: overlay; opacity: 0; pointer-events: none;
  transform: skewX(-18deg);
}
.login-fx.on .fx-title::after { animation: fxShine 1.2s var(--ease) 2.3s both; }
@keyframes fxShine {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: translateX(430%) skewX(-18deg); }
}
.fx-sub {
  color: var(--ink-3); font: 600 10.5px/1 var(--mono); letter-spacing: .28em;
  opacity: 0;
}
.login-fx.on .fx-sub { animation: fxSubIn .7s var(--ease) 2.05s both; }
@keyframes fxSubIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 四角读数 */
.fx-hud {
  position: absolute; z-index: 4; opacity: 0;
  color: var(--ink-3); font: 600 9px/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase;
}
.fx-hud b { color: var(--lime); font-weight: 700; }
.fx-hud.tl { top: 26px; left: 30px; }
.fx-hud.tr { top: 26px; right: 30px; }
.fx-hud.bl { bottom: 26px; left: 30px; }
.fx-hud.br { bottom: 26px; right: 30px; }
.login-fx.on .fx-hud { animation: fxHudIn .6s var(--ease) .35s both; }
@keyframes fxHudIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: .9; transform: none; } }

/* 底部仪表：百分比 + 日志 */
.fx-meter {
  position: absolute; left: 0; right: 0; bottom: clamp(46px, 8vh, 92px);
  margin: 0 auto; z-index: 4; width: min(78vw, 420px); text-align: center; opacity: 0;
}
.login-fx.on .fx-meter { animation: fxFadeIn .6s var(--ease) 1.15s both; }
@keyframes fxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.fx-pct {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  color: var(--ink); font: 700 36px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.fx-pct i { color: var(--ink-3); font: 600 11px/1 var(--mono); font-style: normal; letter-spacing: .1em; }
.fx-log {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-top: 12px; min-height: 62px;
  color: var(--ink-3); font: 600 9.5px/1.6 var(--mono); letter-spacing: .16em;
}
.fx-log i { font-style: normal; opacity: 0; white-space: nowrap; }
.fx-log i::before { content: "▸ "; color: var(--lime); }
.fx-log i.on { opacity: 1; animation: fxLineIn .35s var(--ease) both; }
@keyframes fxLineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 光爆揭幕 */
.fx-flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background:
    radial-gradient(38% 38% at 50% 46%, rgba(255,255,255,.96), rgba(228,250,134,.55) 42%, transparent 72%);
  mix-blend-mode: screen;
}
.login-fx.on .fx-flash { animation: fxFlash 1s var(--ease) 2.62s both; }
@keyframes fxFlash {
  0% { opacity: 0; transform: scale(.2); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ===== 浅色 · 液态玻璃 ===== */
[data-ui="light"] .fx-veil {
  background:
    radial-gradient(46% 42% at 50% 40%, rgba(255,255,255,.95), transparent 66%),
    radial-gradient(42% 38% at 72% 20%, rgba(199,155,255,.30), transparent 70%),
    radial-gradient(40% 36% at 26% 78%, rgba(95,227,171,.28), transparent 72%),
    radial-gradient(120% 100% at 50% 50%, transparent 44%, rgba(180,198,214,.42) 100%),
    #eef3f8;
  backdrop-filter: blur(34px) saturate(160%);
  -webkit-backdrop-filter: blur(34px) saturate(160%);
}
[data-ui="light"] .fx-rings i { border-color: rgba(47,58,44,.22); }
[data-ui="light"] .fx-rings .r2 { border-color: rgba(0,113,227,.24); }
[data-ui="light"] .fx-sweep {
  background: conic-gradient(from 0deg, transparent 0deg 306deg,
    rgba(255,255,255,.40) 342deg, rgba(211,236,99,.55) 357deg, transparent 360deg);
}
[data-ui="light"] .fx-ring-svg .fx-track { stroke: rgba(12,24,36,.12); }
[data-ui="light"] .fx-mark {
  border-color: rgba(255,255,255,.9);
  color: var(--on-lime);
  background: linear-gradient(180deg, rgba(211,236,99,.98), rgba(211,236,99,.8));
  box-shadow:
    0 0 0 8px rgba(255,255,255,.45),
    0 16px 36px rgba(95,125,23,.24),
    inset 0 1px 0 rgba(255,255,255,.9);
}
[data-ui="light"] .fx-title { color: #3f5a12; }
[data-ui="light"] .fx-sub { color: rgba(60,60,67,.55); }
[data-ui="light"] .fx-hud { color: rgba(60,60,67,.5); }
[data-ui="light"] .fx-hud b { color: #4f6b10; }
[data-ui="light"] .fx-log { color: rgba(60,60,67,.55); }
[data-ui="light"] .fx-log i::before { color: #4f6b10; }
[data-ui="light"] .fx-flash {
  background: radial-gradient(38% 38% at 50% 46%, #fff, rgba(211,236,99,.45) 44%, transparent 72%);
}
[data-ui="light"] .fx-rails i {
  background: linear-gradient(90deg, transparent, rgba(95,125,23,.45));
}
[data-ui="light"] .fx-rails i:last-child {
  background: linear-gradient(90deg, rgba(95,125,23,.45), transparent);
}

@media (max-width: 620px) {
  .fx-stage { height: 400px; }
  .fx-rings { width: 270px; height: 270px; }
  .fx-rings .r2 { inset: 28px; }
  .fx-rings .r3 { inset: 56px; }
  .fx-sweep { width: 350px; height: 350px; }
  .fx-title { font-size: 20px; letter-spacing: .3em; text-indent: .3em; }
  .fx-pct { font-size: 24px; }
  .fx-hud.tl, .fx-hud.tr { top: 18px; }
  .fx-hud.tl { left: 18px; }
  .fx-hud.tr { right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-rings i, .fx-sweep, .fx-pulse { animation: none !important; }
  .fx-canvas { display: none; }
}