/* ============================================================================
   RHINE LAB ARCHIVE · 动效层 v1
   忠实复现 LBEILC/RhineLabUI 的界面动效语言
   ─────────────────────────────────────────────────────────────────────────
   · boot 启动序列（纸色遮盖 + 名称 + 扫描式加载条，1.3s 循环）
   · 元素阶梯进场（23px 上浮 + 淡入，cubic-bezier(.16,1,.3,1)）
   · HUD 四角线生长 / 悬停延长
   · 按钮底线扫过（180ms cubic-bezier(.22,1,.36,1)）
   · tab 滑动指示器 · 状态灯呼吸 · 光标闪烁 · 装饰环轨道旋转
   · 数字滚动计数 · 容器扫描线
   · prefers-reduced-motion 全量降级
   ============================================================================ */

/* ============================ 关键帧 ============================ */
@keyframes rlFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rlEnter {
  from { opacity: 0; transform: translateY(23px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rlModalEnter {
  from { opacity: 0; transform: translateY(25px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rlBlink { 50% { opacity: 0; } }
@keyframes rlOrbit { to { transform: rotate(360deg); } }
@keyframes rlLoading {
  from { transform: translateX(-60px); }
  to   { transform: translateX(180px); }
}
@keyframes rlGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rlGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rlScan {
  0%   { transform: translateY(-100%); opacity: 0; }
  12%  { opacity: 0.55; }
  88%  { opacity: 0.55; }
  100% { transform: translateY(1400%); opacity: 0; }
}

/* ============================ boot 启动序列 ============================ */
/* ============================ boot 启动序列（v2 · 参考 rhinelab-blog-theme） ============================ */
/* 时序：名称坞入 720ms → 次级行 360ms 起每行 80ms 错开 → 停留 420ms → 左右移出 320ms
   驱动：WAAPI 纯时间函数采样（帧率无关、可打断）；此处仅定义静态外观与兜底 */
.rl-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--rl-paper, #eae5e1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='0.75' fill='%23d8d2c6'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  /* 兜底：即使脚本失效，3.6s 后也自动隐去，绝不遮挡页面 */
  animation: rlBootAutoHide 0.5s ease 3.6s forwards;
}
@keyframes rlBootAutoHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.rl-boot.done { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }

.rl-boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  will-change: transform, opacity;
}
.rl-boot-name {
  font-family: var(--rl-font-title, system-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rl-ink, #080a08);
  opacity: 0;   /* 由 WAAPI 接管 */
}
.rl-boot-bar {
  position: relative;
  width: 150px;
  height: 1px;
  background: var(--rl-line-soft, #c2bdb1);
  overflow: hidden;
  opacity: 0;
}
.rl-boot-bar i {
  position: absolute;
  top: 0; left: 0;
  width: 60px;
  height: 1px;
  background: var(--rl-accent, #9b7247);
  animation: rlLoading 1.3s ease-in-out infinite;
}
.rl-boot-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--rl-muted, #77756d);
  opacity: 0;
}
.rl-boot-status i {
  width: 3px;
  height: 14px;
  background: var(--rl-ink, #080a08);
  animation: rlBlink 0.8s steps(1) infinite;
}

/* ============================ 元素阶梯进场 ============================ */
.rl-stagger > * {
  opacity: 0;
  animation: rlEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--rl-i, 0) * 70ms);
}
/* 未加 .rl-stagger 时，容器整体淡入 */
.rl-fade { animation: rlFadeIn 0.7s ease both; }

/* ============================ HUD 四角线生长 ============================ */
.container::before, .container::after,
.guild-container::before, .guild-container::after,
.admin-container::before, .admin-container::after,
.card::before, .card::after,
.modal-content::before {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}
.container::before, .guild-container::before, .admin-container::before, .card::before, .modal-content::before {
  animation-name: rlGrowX;
  transform-origin: left top;
}
.container::after, .guild-container::after, .admin-container::after, .card::after {
  animation-name: rlGrowX;
  transform-origin: right bottom;
  animation-delay: 0.12s;
}
/* 内嵌 HUD 角标（用于卡片/面板） */
.rl-hud { position: relative; }
.rl-hud::before, .rl-hud::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1), height 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rl-hud::before { top: -1px; left: -1px; border-top: 2px solid var(--rl-accent); border-left: 2px solid var(--rl-accent); }
.rl-hud::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--rl-accent); border-right: 2px solid var(--rl-accent); }
.rl-hud:hover::before, .rl-hud:hover::after { width: 26px; height: 26px; }

/* ============================ 按钮底线扫过 ============================ */
.btn, .rhine-btn, .btn-user, .modal-btn, .btn-small, .back-link, .link-back, .back-btn, .protocol-option {
  position: relative;
  overflow: hidden;
}
.btn::after, .rhine-btn::after, .btn-user::after, .modal-btn::after,
.btn-small::after, .back-link::after, .link-back::after, .back-btn::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--rl-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover::after, .rhine-btn:hover::after, .btn-user:hover::after, .modal-btn:hover::after,
.btn-small:hover::after, .back-link:hover::after, .link-back:hover::after, .back-btn:hover::after {
  transform: scaleX(1);
}
/* hover 反色节奏（RhineLabUI 180ms） */
.btn, .rhine-btn, .modal-btn, .btn-user, .btn-small, .menu-card, .feature-card, .contract-card, .map-card, .protocol-option, .tab {
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
              color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================ 卡片：角标延长 + 微抬升 ============================ */
.menu-card::before, .menu-card::after {
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1), height 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms;
}
.menu-card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 16px; height: 16px;
  border-bottom: 2px solid var(--rl-line-soft);
  border-right: 2px solid var(--rl-line-soft);
}
.menu-card:hover::before, .menu-card:hover::after { width: 26px; height: 26px; }
.menu-card:hover::after { border-color: var(--rl-accent); }
.menu-card-icon { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms, filter 180ms; }
.menu-card:hover .menu-card-icon { transform: translateY(-3px); }

/* ============================ tab 滑动指示器 ============================ */
.tabs { position: relative; }
.rl-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--rl-accent);
  transform-origin: left center;
  pointer-events: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), width 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tab.active::after { content: none; }

/* ============================ 光标 ============================ */
.rl-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 6px;
  background: var(--rl-ink);
  vertical-align: -0.12em;
  animation: rlBlink 0.8s steps(1) infinite;
}

/* ============================ 装饰环（轨道旋转） ============================ */
.rl-orbit {
  position: absolute;
  border: 1px solid var(--rl-line-soft);
  border-radius: 50%;
  pointer-events: none;
  animation: rlOrbit 16s linear infinite;
}
.rl-orbit::after {
  content: '';
  position: absolute;
  top: -2px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: var(--rl-accent);
  border-radius: 50%;
}
.rl-orbit.slow { animation-duration: 24s; }
.rl-orbit.fast { animation-duration: 8s; animation-direction: reverse; }

/* ============================ 容器扫描线 ============================ */
.rl-scan { position: relative; overflow: hidden; }
.rl-scan-line {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 12%;
  background: linear-gradient(180deg, transparent, rgba(155, 114, 71, 0.055), transparent);
  pointer-events: none;
  z-index: 1;
  animation: rlScan 7.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
[data-dark-surface="true"] .rl-scan-line {
  background: linear-gradient(180deg, transparent, rgba(197, 161, 107, 0.075), transparent);
}

/* ============================ 模态进场 ============================ */
.modal.open .modal-content, .modal.active .modal-content {
  animation: rlModalEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.modal.open, .modal.active { animation: rlFadeIn 0.3s ease both; }

/* ============================ 数字滚动 ============================ */
.rl-count { font-variant-numeric: tabular-nums; }

/* ============================ 列表项进出场 ============================ */
.rl-list-enter { animation: rlEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--rl-i, 0) * 40ms); }

/* ============================ 页面切换淡出 ============================ */
.rl-leaving { animation: rlFadeIn 0.22s ease reverse both; }

/* ============================ 无障碍降级 ============================ */
@media (prefers-reduced-motion: reduce) {
    .rl-scan-line { opacity: 0 !important; }
  * { transition-duration: 0.01ms !important; }
}