/* ==========================================================================
   时序 · 统一登录组件（canonical 源）
   「墨染·莲生」过场动画 + 墨金琉璃登录卡
   源设计：.superpowers/docs/design/2026-08-12-login-unify-design.md
   提取自定稿 demo：animation-v8-fullflow.html（时序/几何）
                    animation-v7-light.html（浅色配色）
                    login-style-options.html A/B（卡面双主题）
                    login-logo-placement.html ②（logo 横排 + 墨池余韵）
   生产化：sx 前缀；10s 单次 fill-forwards；.sx-done 收尾；双主题 CSS 变量。
   四项目复制本文件接入，改动请先改此 canonical 再同步，避免漂移。
   ========================================================================== */

/* ---------- 主题变量 ---------- */
html[data-theme="dark"] .sx-stage, html:not([data-theme]) .sx-stage[data-theme="dark"]{
  --sx-bg:radial-gradient(ellipse at 50% 40%,#121626 0%,#0b101c 55%,#070b14 100%);
  --sx-gold:#d4af37;
  --sx-gold-soft:rgba(212,175,55,.35);
  --sx-drop-bg:radial-gradient(circle,#fdf3d0,#d4af37 65%,#8a6d1e);
  --sx-drop-shadow:rgba(212,175,55,.8);
  --sx-pool-bg:radial-gradient(ellipse,rgba(8,8,20,.98) 0%,rgba(30,28,54,.85) 45%,rgba(212,175,55,.18) 68%,transparent 75%);
  --sx-pool2-bg:radial-gradient(ellipse,rgba(40,36,70,.5) 0%,rgba(212,175,55,.10) 55%,transparent 72%);
  --sx-taiji-face:#f5e6c8;--sx-taiji-body:#d4af37;--sx-taiji-shadow:rgba(212,175,55,.35);
  --sx-ripple:rgba(212,175,55,.75);
  --sx-water-bg:radial-gradient(ellipse,rgba(212,175,55,.55),transparent 70%);
  --sx-pk1:#d94f86;--sx-pk2:#f78fb8;--sx-pk3:#ffe6f0;
  --sx-pk4:#b83a6e;--sx-pk5:#e56ba0;--sx-pk6:#ffc2da;
  --sx-pk7:#e56ba0;--sx-pk8:#f9a8cc;--sx-pk9:#fff2f7;
  --sx-heart1:#fff3c9;--sx-heart2:#f0c85e;
  --sx-leaf-vein:#c9f2da;
  --sx-em-a:#e56ba0;--sx-em-b:#f78fb8;--sx-em-c:#ffdcec;--sx-em-heart:#f0c85e;
  --sx-em-shadow:rgba(212,175,55,.35);
  --sx-rest-pool:radial-gradient(ellipse,rgba(8,8,20,.92) 0%,rgba(30,28,54,.72) 45%,rgba(212,175,55,.14) 68%,transparent 75%);
  --sx-rest-glow:radial-gradient(ellipse,rgba(212,175,55,.45),transparent 70%);
  --sx-rest-rip:rgba(212,175,55,.22);--sx-rest-rip2:rgba(212,175,55,.12);
  --sx-card-bg:rgba(18,22,38,.78);--sx-card-border:rgba(212,175,55,.35);
  --sx-card-shadow:0 24px 60px -18px rgba(0,0,0,.75),0 0 40px rgba(212,175,55,.08);
  --sx-text:#eae6da;--sx-title:#f5e6c8;--sx-sub:rgba(234,230,218,.55);
  --sx-field-bg:rgba(255,255,255,.05);--sx-field-border:rgba(212,175,55,.22);
  --sx-placeholder:rgba(234,230,218,.4);
  --sx-btn-bg:linear-gradient(135deg,#f0dc9a,#d4af37 55%,#b8942e);--sx-btn-text:#1a1608;
  --sx-btn-shadow:0 8px 22px -8px rgba(212,175,55,.55);
  --sx-link:rgba(234,230,218,.45);
  --sx-tabs-bg:rgba(255,255,255,.04);--sx-tab-text:rgba(234,230,218,.5);
  --sx-tab-on-bg:rgba(212,175,55,.16);--sx-tab-on-text:#f0dc9a;
  --sx-skip-text:rgba(234,230,218,.55);--sx-skip-border:rgba(212,175,55,.3);
}
html[data-theme="light"] .sx-stage, html:not([data-theme]) .sx-stage[data-theme="light"]{
  --sx-bg:radial-gradient(ellipse at 50% 40%,#fffdf7 0%,#f5f1e6 55%,#eee7d7 100%);
  --sx-gold:#a8851f;
  --sx-gold-soft:rgba(168,133,31,.4);
  --sx-drop-bg:radial-gradient(circle,#56506e,#232032 65%,#12101c);
  --sx-drop-shadow:rgba(168,133,31,.65);
  --sx-pool-bg:radial-gradient(ellipse,rgba(18,16,30,.94) 0%,rgba(44,40,62,.78) 45%,rgba(168,133,31,.22) 68%,transparent 75%);
  --sx-pool2-bg:radial-gradient(ellipse,rgba(80,74,100,.38) 0%,rgba(168,133,31,.12) 55%,transparent 72%);
  --sx-taiji-face:#fdfaf2;--sx-taiji-body:#2a2733;--sx-taiji-shadow:rgba(168,133,31,.45);
  --sx-ripple:rgba(168,133,31,.8);
  --sx-water-bg:radial-gradient(ellipse,rgba(168,133,31,.55),transparent 70%);
  --sx-pk1:#d1447c;--sx-pk2:#f47eae;--sx-pk3:#ffdcec;
  --sx-pk4:#ad3468;--sx-pk5:#dd5f96;--sx-pk6:#ffb8d2;
  --sx-pk7:#dd5f96;--sx-pk8:#f79cc2;--sx-pk9:#ffeef4;
  --sx-heart1:#fff3c9;--sx-heart2:#e8bd4e;
  --sx-leaf-vein:#d8f5e4;
  --sx-em-a:#dd5f96;--sx-em-b:#f47eae;--sx-em-c:#ffcfe2;--sx-em-heart:#e8bd4e;
  --sx-em-shadow:rgba(168,133,31,.4);
  --sx-rest-pool:radial-gradient(ellipse,rgba(18,16,30,.85) 0%,rgba(44,40,62,.6) 45%,rgba(168,133,31,.16) 68%,transparent 75%);
  --sx-rest-glow:radial-gradient(ellipse,rgba(168,133,31,.4),transparent 70%);
  --sx-rest-rip:rgba(168,133,31,.2);--sx-rest-rip2:rgba(168,133,31,.12);
  --sx-card-bg:rgba(255,255,255,.72);--sx-card-border:rgba(168,133,31,.45);
  --sx-card-shadow:0 18px 40px -16px rgba(90,70,20,.32);
  --sx-text:#2d2820;--sx-title:#4a3d1f;--sx-sub:rgba(45,40,32,.55);
  --sx-field-bg:rgba(255,255,255,.85);--sx-field-border:rgba(168,133,31,.35);
  --sx-placeholder:rgba(45,40,32,.42);
  --sx-btn-bg:linear-gradient(135deg,#c9a13b,#a8851f 55%,#8a6d1e);--sx-btn-text:#fff8e6;
  --sx-btn-shadow:0 8px 20px -8px rgba(168,133,31,.5);
  --sx-link:rgba(45,40,32,.48);
  --sx-tabs-bg:rgba(90,70,20,.06);--sx-tab-text:rgba(45,40,32,.5);
  --sx-tab-on-bg:rgba(168,133,31,.15);--sx-tab-on-text:#7a6218;
  --sx-skip-text:rgba(45,40,32,.55);--sx-skip-border:rgba(168,133,31,.35);
}

/* ---------- 舞台与构图 ---------- */
.sx-stage{position:relative;width:100%;min-height:100vh;overflow:hidden;background:var(--sx-bg)}
.sx-stage *{box-sizing:border-box}
.sx-scene{position:absolute;left:50%;top:50%;width:min(96vw,96vh);aspect-ratio:1;
  transform:translate(-50%,-50%)}
.sx-splash{position:absolute;inset:0;perspective:780px}

/* The legacy resting pool is retired; the splash owns the temporary ground shadow. */
.sx-pool-rest{display:none}
.sx-pr-pool{position:absolute;left:50%;bottom:5%;width:84%;height:15%;transform:translateX(-50%);
  border-radius:50%;filter:blur(7px);background:var(--sx-rest-pool)}
.sx-pr-glow{position:absolute;left:50%;bottom:12%;width:58%;height:5px;transform:translateX(-50%);
  filter:blur(2px);background:var(--sx-rest-glow)}
.sx-pr-rip{position:absolute;left:50%;bottom:8%;width:46%;height:7%;transform:translateX(-50%);
  border:1px solid var(--sx-rest-rip);border-radius:50%}
.sx-pr-rip.r2{width:62%;height:9.5%;bottom:6.4%;border-color:var(--sx-rest-rip2)}

/* ---------- 过场动画层（10s 单次，几何/百分比同 v8 定稿） ---------- */
.sx-drop{position:absolute;left:50%;top:-8%;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--sx-drop-bg);box-shadow:0 0 14px var(--sx-drop-shadow);
  opacity:0;animation:sxdrop 10s cubic-bezier(.55,0,.85,.4) 1 forwards}
@keyframes sxdrop{0%{top:-8%;opacity:0}1%{opacity:1}6%{top:48%;opacity:1}7%{top:50%;opacity:0}100%{top:50%;opacity:0}}

.sx-pool{position:absolute;left:50%;top:54%;width:68%;height:26%;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);opacity:0;filter:blur(5px);
  background:var(--sx-pool-bg);animation:sxpool-v2 10s ease-out 1 forwards}
@keyframes sxpool-v2{0%,8.5%{transform:translate(-50%,-50%) scale(.05);opacity:0}10.5%{opacity:.95}17%{transform:translate(-50%,-50%) scale(1)}23%{opacity:.95}30%,100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.sx-pool2{width:86%;height:32%;filter:blur(10px);background:var(--sx-pool2-bg);
  animation-name:sxpool2-v2}
@keyframes sxpool2-v2{0%,8.5%{transform:translate(-50%,-50%) scale(.05);opacity:0}10.5%{opacity:.8}20%{transform:translate(-50%,-50%) scale(1)}23%{opacity:.8}30%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

.sx-taiji-wrap{position:absolute;left:50%;top:44%;width:30%;aspect-ratio:1;
  transform:translate(-50%,-50%);opacity:0;transform-origin:50% 88%;
  filter:none;
  animation:sxemerge-v2 10s ease-in-out 1 forwards}
@keyframes sxemerge-v2{
  0%,8.5%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotateX(0deg)}
  10.5%{opacity:1}
  13%{transform:translate(-50%,-50%) scale(1.07) rotateX(0deg)}
  15%{transform:translate(-50%,-50%) scale(1) rotateX(0deg)}
  23%{opacity:1;transform:translate(-50%,-50%) scale(1) rotateX(0deg)}
  28%{opacity:.95;transform:translate(-50%,-34%) scale(.95) rotateX(-74deg)}
  30%,100%{opacity:0;transform:translate(-50%,-34%) scale(.95) rotateX(-74deg)}}
.sx-taiji{width:100%;height:100%;animation:sxspin 3.6s linear infinite}
@keyframes sxspin{to{transform:rotate(360deg)}}

.sx-ripple{position:absolute;left:50%;top:57%;width:34%;height:11%;border-radius:50%;
  border:1.5px solid var(--sx-ripple);transform:translate(-50%,-50%) scale(.15);opacity:0;
  animation:sxrip 10s ease-out 1 forwards}
.sx-ripple.r2{animation-name:sxrip2}
@keyframes sxrip{0%,24%{transform:translate(-50%,-50%) scale(.15);opacity:0}25.5%{opacity:.75}38%{transform:translate(-50%,-50%) scale(2.1);opacity:0}100%{opacity:0}}
@keyframes sxrip2{0%,27%{transform:translate(-50%,-50%) scale(.15);opacity:0}28.5%{opacity:.55}42%{transform:translate(-50%,-50%) scale(2.6);opacity:0}100%{opacity:0}}

.sx-lotus{position:absolute;left:50%;top:24%;width:68%;transform:translate(-50%,-50%);
  animation:sxdock 10s ease-in-out 1 forwards}
@keyframes sxdock{0%,52%{transform:translate(-50%,-50%) scale(1);opacity:1}
  58%,100%{transform:translate(-50%,-72%) scale(.22);opacity:0}}
.sx-leaf{transform-box:fill-box;transform-origin:50% 100%;opacity:0;
  animation:sxleafin-v2 10s cubic-bezier(.34,1.3,.64,1) 1 forwards}
@keyframes sxleafin-v2{0%,30%{transform:scale(0);opacity:0}32%{opacity:1}36%{transform:scale(1.1)}38.5%{transform:scale(1)}56%{opacity:1}100%{transform:scale(1);opacity:1}}
.sx-leaf.l2{animation-delay:.22s}.sx-leaf.l3{animation-delay:.1s}.sx-leaf.l4{animation-delay:.32s}
.sx-p{transform-box:fill-box;transform-origin:50% 100%;opacity:0;
  animation:sxbloom-v2 10s cubic-bezier(.3,1.45,.6,1) 1 forwards}
@keyframes sxbloom-v2{0%,30%{transform:scale(.04);opacity:0}33.5%{opacity:1}40%{transform:scale(1.12)}43%{transform:scale(1)}56%,100%{transform:scale(1);opacity:1}}
.sx-d0{animation-delay:0s}.sx-d1{animation-delay:.15s}.sx-d2{animation-delay:.3s}
.sx-d3{animation-delay:.45s}.sx-d4{animation-delay:.6s}
.sx-heart{transform-box:fill-box;transform-origin:50% 50%;opacity:0;
  animation:sxheart 10s ease-out 1 forwards}
@keyframes sxheart{0%,38%{opacity:0;transform:scale(.3)}42%{opacity:1;transform:scale(1)}56%,100%{opacity:1}}

.sx-water{position:absolute;left:50%;top:58%;width:60%;height:6px;border-radius:50%;
  transform:translate(-50%,-50%);filter:blur(2px);opacity:0;background:var(--sx-water-bg);
  animation:sxwater 10s ease-out 1 forwards}
@keyframes sxwater{0%,29%{opacity:0}34%{opacity:.9}50%{opacity:.9}58%,100%{opacity:0}}

/* ---------- 登录卡（墨金琉璃；62% 就位后常驻） ---------- */
.sx-card{position:absolute;left:50%;top:54%;width:340px;max-width:86%;
  transform:translate(-50%,-50%);opacity:0;
  background:var(--sx-card-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--sx-card-border);border-radius:18px;box-shadow:var(--sx-card-shadow);
  padding:52px 30px 24px;text-align:center;color:var(--sx-text);
  animation:sxcard 10s cubic-bezier(.3,1.1,.5,1) 1 forwards}
@keyframes sxcard{0%,53%{opacity:0;transform:translate(-50%,calc(-50% + 28px))}
  62%,100%{opacity:1;transform:translate(-50%,-50%)}}

.sx-emblem{position:absolute;left:50%;top:-20px;width:104px;transform:translateX(-50%);
  filter:drop-shadow(0 0 14px var(--sx-em-shadow))}

.sx-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 4px}
.sx-brand-logo{width:24px;height:24px;border-radius:50%;overflow:hidden;flex:none;
  border:1px solid var(--sx-gold);background:var(--sx-tab-on-bg);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--sx-title);font-size:11px;font-weight:600}
.sx-brand-logo img{width:100%;height:100%;object-fit:cover;display:block}
.sx-brand h3{margin:0;font-size:19px;letter-spacing:2px;color:var(--sx-title);font-weight:600}
.sx-sub{margin:0 0 20px;font-size:12px;letter-spacing:1px;color:var(--sx-sub)}

/* ---------- 登录方式 tab（segmented control） ---------- */
.sx-tabs{display:flex;gap:4px;margin:0 0 14px;padding:3px;border-radius:9px;background:var(--sx-tabs-bg)}
.sx-tab{flex:1;padding:8px 0;border:0;border-radius:7px;background:transparent;cursor:pointer;
  font-size:13px;letter-spacing:1px;color:var(--sx-tab-text);font-family:inherit}
.sx-tab.on{background:var(--sx-tab-on-bg);color:var(--sx-tab-on-text)}
.sx-panel[hidden]{display:none}

/* ---------- 表单 ---------- */
.sx-form{text-align:left}
.sx-input{display:block;width:100%;margin:0 0 14px;padding:12px 14px;border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--sx-text);
  background:var(--sx-field-bg);border:1px solid var(--sx-field-border);outline:none}
.sx-input::placeholder{color:var(--sx-placeholder)}
.sx-input:focus{border-color:var(--sx-gold)}
.sx-row{display:flex;gap:8px;align-items:stretch}
.sx-row .sx-input{flex:1;margin-bottom:0}
.sx-row+.sx-row,.sx-row{margin-bottom:14px}
.sx-btn-ghost{flex:none;padding:0 14px;border-radius:10px;cursor:pointer;font-size:13px;
  font-family:inherit;white-space:nowrap;color:var(--sx-tab-on-text);
  background:transparent;border:1px solid var(--sx-gold-soft)}
.sx-btn-ghost:disabled{opacity:.45;cursor:default}
.sx-btn{display:block;width:100%;margin-top:6px;padding:12px 0;border:0;border-radius:10px;
  cursor:pointer;font-size:15px;letter-spacing:6px;font-weight:600;font-family:inherit;
  color:var(--sx-btn-text);background:var(--sx-btn-bg);box-shadow:var(--sx-btn-shadow)}
.sx-btn:disabled{opacity:.55;cursor:default}
.sx-links{margin-top:16px;font-size:12px;letter-spacing:1px;text-align:center;color:var(--sx-link)}
.sx-links a{color:inherit;text-decoration:none}
.sx-links a:hover{color:var(--sx-gold)}
.sx-msg{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--sx-tab-on-text);
  overflow-wrap:anywhere;word-break:break-word}

/* ---------- 辅助：视觉隐藏文本 / 协议勾选行 ---------- */
.sx-stage .sx-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sx-stage .sx-check{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:12px;color:var(--sx-sub)}
.sx-stage .sx-check input{accent-color:var(--sx-gold)}

/* ---------- 跳过按钮 ---------- */
.sx-skip{position:absolute;right:18px;top:18px;z-index:5;padding:6px 14px;border-radius:999px;
  cursor:pointer;font-size:12px;letter-spacing:2px;font-family:inherit;
  color:var(--sx-skip-text);background:transparent;border:1px solid var(--sx-skip-border)}

/* ---------- 收尾与降级 ---------- */
.sx-stage.sx-done .sx-splash{display:none}
.sx-stage.sx-done .sx-skip{display:none}
.sx-stage.sx-done .sx-card{animation:none;opacity:1;transform:translate(-50%,-50%)}

@media (prefers-reduced-motion: reduce){
  .sx-stage .sx-splash{display:none}
  .sx-stage .sx-skip{display:none}
  .sx-stage .sx-card{animation:none;opacity:1;transform:translate(-50%,-50%)}
}