/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; color:#fff;
  font-family:'HarmonyOS Sans SC','HarmonyOS Sans','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:450; }
a { text-decoration:none; color:inherit; }

/* ===== 页面容器 ===== */
.page-container { width:100%; height:100vh; display:flex; flex-direction:column;
  transition:transform 0.7s cubic-bezier(0.22,0.1,0.22,1); will-change:transform; }
.page { width:100vw; height:100vh; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }

/* ===== SIGO 大字 ===== */
.sigo-morph { position:fixed; z-index:101; font-weight:800; color:#fff;
  user-select:none; pointer-events:none; line-height:1;
  transition:all 0.7s cubic-bezier(0.22,0.1,0.22,1); }
.sigo-morph { top:35%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(105px,17.5vw,262px); letter-spacing:clamp(12px,3vw,36px);
  opacity:0;
  animation:sigoFadeIn 2s ease-out 0.15s forwards; }
@keyframes sigoFadeIn {
  0%   { opacity:0; }
  100% { opacity:1; }
}
.sigo-morph.light { color:#000; }

/* ===== 入口引导 "scroll to explore" ===== */
.scroll-hint { position:absolute; z-index:1; left:50%; top:75%;
  transform:translateX(-50%);
  text-align:center; pointer-events:none; user-select:none;
  opacity:0;
  animation:hintFadeIn 1s ease-out 0.5s forwards; }
.scroll-hint .sh-text { display:block; color:#444; font-size:10px;
  letter-spacing:4px; font-weight:300; margin-bottom:6px; }
.scroll-hint .sh-arrow { display:block; color:#444; font-size:14px;
  animation:hintBounce 2s ease-in-out infinite; }
@keyframes hintFadeIn {
  0%   { opacity:0; transform:translateX(-50%) translateY(8px); }
  100% { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes hintBounce {
  0%,100% { transform:translateY(0); opacity:0.4; }
  50%     { transform:translateY(6px); opacity:1; }
}

/* ===== 导航栏 ===== */
.nav-bar { position:fixed; top:0; left:0; width:100%; height:56px; z-index:100;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:all 0.5s ease 0.15s; pointer-events:none; }
.nav-bar.show { opacity:1; pointer-events:auto; }
.nav-bar.light { background:rgba(255,255,255,0.85); }

#page2{background:#000;}
.p2-cloth { position:absolute; inset:0; z-index:15;
  display:flex; align-items:center; justify-content:center; }
.p2-content { position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; }
.nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:480px;
  width:100%;padding:0 20px;position:relative;z-index:1;}
.p-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}

/* ===== 胶囊按钮 ===== */
.nav-card{aspect-ratio:1.3/1;border:1px solid #2a2a2a;border-radius:50px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color 0.4s cubic-bezier(0.25,0.1,0.25,1),
                              box-shadow 0.4s ease;
  position:relative;overflow:hidden;user-select:none;}
.nav-card::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,0.03) 0%,transparent 70%);
  opacity:0;transition:opacity 0.4s ease;}
.nav-card:hover{border-color:#555;box-shadow:0 0 0 1px rgba(255,255,255,0.05);}
.nav-card:hover::before{opacity:1;}
.nav-card:active{transform:scale(0.97);}
.card-icon{color:#fff;font-size:34px;margin-bottom:10px;}
.card-title{color:#fff;font-size:16px;font-weight:500;letter-spacing:4px;}
.card-desc{color:#555;font-size:10px;letter-spacing:2px;margin-top:4px;}

/* ===== 粒子画布 ===== */
.particle-canvas { position:absolute; inset:0; width:100%; height:100%;
  z-index:40; pointer-events:none; }

#page3{background:#000;flex-direction:column;padding:0 16px;}
.ending-content{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;overflow:hidden;}
.typewriter{font-size:clamp(50px,10vw,120px);font-weight:800;letter-spacing:clamp(4px,1.5vw,10px);
  display:flex;align-items:center;gap:2px;margin-bottom:30px;max-width:100%;overflow:hidden;}
.tw-char{color:#fff;opacity:0.15;transition:opacity 0.4s ease;}
.tw-char.reveal{opacity:1;}
.tw-dot{color:#555;}
.tw-cursor{display:inline-block;color:#fff;font-weight:300;
  animation:blink 0.8s step-end infinite;margin-left:4px;}
.ending-divider{width:50px;height:1px;background:#333;margin:20px auto;}
.ending-tagline{color:#ccc;font-size:clamp(12px,1.5vw,16px);letter-spacing:8px;opacity:0.85;font-weight:500;}
.beian-row{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;}
.beian{color:#999;font-size:10px;letter-spacing:2px;text-align:center;opacity:0.8;
  display:flex;align-items:center;gap:4px;}
.gongan-icon{width:14px;height:14px;vertical-align:middle;}

/* ===== 展开页 (弹窗 - 玻璃特效) ===== */
.page-tear { position:fixed; z-index:20; border-radius:50px;
  overflow:hidden;
  pointer-events:none; visibility:hidden;
  background:rgba(26,26,26,0.35);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  will-change:transform; }
.page-tear.active { visibility:visible; pointer-events:auto;
  box-shadow:0 16px 64px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.06); }
.page-tear.light { background:rgba(245,245,245,0.35);
  box-shadow:0 16px 48px rgba(0,0,0,0.15); border-color:rgba(0,0,0,0.06); }
.tear-body { width:100%; height:100%; display:flex; flex-direction:column;
  padding:36px 32px 28px; overflow:hidden; }
.tear-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.tear-title { font-size:28px; font-weight:700; letter-spacing:6px; }
.tear-actions { display:flex; align-items:center; gap:4px; }
.tear-edit, .tear-close { font-size:18px; cursor:pointer; opacity:0.4; transition:opacity 0.3s; padding:8px; }
.tear-edit:hover, .tear-close:hover { opacity:1; }
.tear-edit { font-size:20px; }
.tear-edit-hidden { display:none !important; }
.tear-scroll { flex:1; overflow-y:auto; font-size:14px; letter-spacing:2px; line-height:2; font-weight:500; }

/* 编辑模式 */
.tear-editing .tear-scroll { opacity:0.3; pointer-events:none; transition:opacity 0.3s; }
.tear-textarea-wrap { position:absolute; inset:80px 40px 40px; z-index:2; display:none; }
.tear-textarea-wrap.show { display:flex; flex-direction:column; }
.tear-textarea { flex:1; width:100%; background:rgba(255,255,255,0.04);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  color:#ddd; font-size:14px; letter-spacing:2px; line-height:2;
  padding:20px; resize:none; outline:none; font-family:inherit;
  transition:border-color 0.3s; }
.tear-textarea:focus { border-color:rgba(255,255,255,0.25); }
.page-tear.light .tear-textarea { background:rgba(0,0,0,0.03);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-color:rgba(0,0,0,0.06); color:#222; }
.page-tear.light .tear-textarea:focus { border-color:rgba(0,0,0,0.2); }
.tear-save-bar { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }
.tear-save-btn, .tear-cancel-btn { padding:8px 24px; border-radius:50px; cursor:pointer;
  font-size:13px; letter-spacing:2px; transition:all 0.3s; border:none; font-family:inherit; }
.tear-save-btn { background:#fff; color:#000; }
.tear-save-btn:hover { opacity:0.8; }
.tear-cancel-btn { background:transparent; color:#555; border:1px solid #333; }
.tear-cancel-btn:hover { color:#fff; border-color:#555; }

/* ===== 密码弹窗 ===== */
.tp-overlay { position:absolute; inset:0; z-index:20; background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.3s; }
.tp-overlay.show { opacity:1; pointer-events:auto; }
.tp-box { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:16px;
  padding:36px 32px 28px; width:320px; max-width:90vw; display:flex; flex-direction:column;
  align-items:center; }
.tp-title { font-size:16px; font-weight:500; letter-spacing:4px; margin-bottom:28px; }
.tp-input { width:100%; padding:12px 16px; border-radius:8px; border:1px solid #333;
  background:transparent; color:#fff; font-size:14px; letter-spacing:2px;
  outline:none; transition:border-color 0.3s; font-family:inherit; }
.tp-input:focus { border-color:#666; }
.tp-input::placeholder { color:#444; letter-spacing:1px; }
.tp-error { color:#ff4444; font-size:12px; letter-spacing:1px; margin-top:12px;
  opacity:0; transition:opacity 0.3s; }
.tp-error.show { opacity:1; }
.tp-actions { display:flex; gap:12px; margin-top:24px; width:100%; }
.tp-btn { flex:1; text-align:center; padding:10px 0; border-radius:50px; cursor:pointer;
  font-size:13px; letter-spacing:2px; transition:all 0.3s; }
.tp-confirm { background:#fff; color:#000; }
.tp-confirm:hover { opacity:0.8; }
.tp-cancel { border:1px solid #333; color:#555; }
.tp-cancel:hover { color:#fff; border-color:#555; }

.page-tear.light .tp-box { background:#f0f0f0; border-color:#ddd; }
.page-tear.light .tp-title { color:#000; }
.page-tear.light .tp-input { color:#000; border-color:#ccc; }
.page-tear.light .tp-input:focus { border-color:#888; }
.page-tear.light .tp-input::placeholder { color:#bbb; }
.page-tear.light .tp-confirm { background:#000; color:#fff; }
.page-tear.light .tp-cancel { border-color:#ccc; color:#888; }
.page-tear.light .tp-cancel:hover { color:#000; border-color:#888; }

.page-tear.light { background:#f5f5f5; }
.page-tear.light .tear-title { color:#000; }
.page-tear.light .tear-edit, .page-tear.light .tear-close { color:#000; }
.page-tear.light .tear-scroll { color:#555; }
.page-tear.light .tear-cancel-btn { color:#888; border-color:#ccc; }
.page-tear.light .tear-cancel-btn:hover { color:#000; border-color:#888; }
.page-tear.light .tear-save-btn { background:#000; color:#fff; }

.page-tear.dark { background:#1a1a1a; }
.page-tear.dark .tear-title { color:#fff; }
.page-tear.dark .tear-edit, .page-tear.dark .tear-close { color:#fff; }
.page-tear.dark .tear-scroll { color:#888; }

/* 内容条目 */
.tear-item { margin-bottom:24px; }
.tear-item:last-child { margin-bottom:0; }
.tear-item img, .tear-item video { max-width:100%; border-radius:8px; margin-top:12px; }

/* ===== 动画 ===== */
/* ===== 子域名链接选项框 ===== */
.sublink-box { display:flex; flex-direction:column; gap:12px; }
.sublink-item { display:flex; align-items:center; gap:12px;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:all 0.25s ease;
  text-decoration:none; }
.sublink-item:hover { border-color:rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06);
  transform:translateX(4px); }
.sublink-name { font-size:16px; font-weight:600; letter-spacing:2px; color:#fff; }
.sublink-desc { flex:1; font-size:12px; letter-spacing:1px; color:#666; }
.sublink-arrow { font-size:14px; color:#555; transition:transform 0.25s ease; }
.sublink-item:hover .sublink-arrow { transform:translate(2px,-2px); color:#888; }

.page-tear.light .sublink-item { border-color:rgba(0,0,0,0.08); background:rgba(0,0,0,0.02); }
.page-tear.light .sublink-item:hover { border-color:rgba(0,0,0,0.18); background:rgba(0,0,0,0.04); }
.page-tear.light .sublink-name { color:#000; }
.page-tear.light .sublink-desc { color:#999; }
.page-tear.light .sublink-arrow { color:#bbb; }
.page-tear.dark .sublink-item { border-color:rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); }
.page-tear.dark .sublink-item:hover { border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); }
.page-tear.dark .sublink-name { color:#fff; }
.page-tear.dark .sublink-desc { color:#888; }
.page-tear.dark .sublink-arrow { color:#666; }

@keyframes blink{50%{opacity:0;}}