/* static/css/loading.css —— 变量集中版：时长/尺寸都可在 :root 一处调整 */

/* ================================
   ✅ 统一可调变量（时间/尺寸）
   --------------------------------
   时长单位均为毫秒（ms）
   ================================ */
:root {
  /* —— 时间（和 JS 里的 T.* 对齐） —— */
  --dur-extend:       2000; /* 左右线 extend 的 keyframes 总时长 */
  --dur-lines-fade:    500; /* 两侧线淡出（.lines 透明度过渡） */
  --dur-combo-move:    550; /* .hero-combo 的 transform 过渡（logo 左移） */
  --dur-combo-fade:    600; /* .hero-combo 的透明淡出（最终一起淡出） */
  --dur-bg-fade:       600; /* #loader::before 的透明淡出 */
  --dur-pivot-appear-o:150; /* pivot 初现（opacity） */
  --dur-pivot-appear-t:150; /* pivot 初现（scaleX） */
  --dur-pivot-rotate:  500; /* pivot 旋转为竖线（turned 阶段） */
  --dur-pivot-shrink-t:450; /* pivot 竖线收缩（可选，不用也行） */
  --dur-pivot-shrink-o:300; /* pivot 竖线收缩时的透明过渡 */
  --dur-title-slide:   550; /* 标题滑出（transform） */

  /* —— 尺寸 —— */
  --logo-width:       200px; /* logo 基础宽度 */
  --logo-half:        calc(var(--logo-width) / 2); /* 便于复用的半宽 */
  --title-height:     150px; /* 标题图高度 */
  --pivot-width:       24px; /* pivot 初始宽度（横线长度） */

  /* —— 运动幅度 —— */
  --logo-move-x:     -140px; /* phase-a 时 logo 左移的距离 */
  --title-slide-x:     20px; /* 标题滑出时向右位移 */

  /* —— 其他 —— */
  --lines-height:       4px; /* 横线高度 */
  --line-color:      #000;   /* 线/文字/图标默认色（按需） */
  --bg-color:        #fff;   /* 初始遮罩背景色 */
}

/* 默认隐藏滚动条（首帧不显示） */
html { overflow-y: hidden; }

/* 在“白色背景淡出期间”与“淡出结束后”都显示滚动条，并稳定占位 */
html.reveal-scroll,
html.ready {
  overflow-y: scroll;
  scrollbar-gutter: stable; /* 避免布局抖动 */
}

body.is-loading { overflow: hidden; } /* 首帧锁滚（与 JS 配合） */

/* 加载层（整页居中） */
#loader {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;   /* 白色背景放到 ::before */
  z-index: 9999;
  flex-direction: column;
}

/* 白色遮罩背景（可淡出） */
#loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-color);
  opacity: 1;
  transition: opacity calc(var(--dur-bg-fade) * 1ms) ease;
  z-index: 0;
}

/* 允许隐藏/移除 */
#loader.hidden { display: none; }

/* 组合：logo图标 + 中间短线 + 标题 */
.hero-combo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 3;
  transition:
    transform calc(var(--dur-combo-move) * 1ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity  calc(var(--dur-combo-fade) * 1ms) ease;  /* 退出时一并淡出 */
}

/* 左右延展线容器 */
.lines {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--lines-height);
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 2;
  transition: opacity calc(var(--dur-lines-fade) * 1ms) ease;  /* 退出时淡出 */
}

/* 左右两条线动画 */
.left-line,
.right-line {
  height: 100%;
  background: var(--line-color);
  opacity: 1;
  animation: extend calc(var(--dur-extend) * 1ms) ease-in-out forwards;
  transition: opacity calc(var(--dur-lines-fade) * 1ms) ease; /* 兜底：单条线也能平滑淡出 */
}

/* 左右线终点各为 “视口一半 - logo半宽” */
@keyframes extend {
  0%   { width: 0; }
  100% { width: calc(50% - var(--logo-half)); }
}

/* 元素：logo图标、短横线（pivot）、标题 */
.logo-loading {
  width: var(--logo-width);
  height: auto;
  position: relative;
  z-index: 2;
  transform: none;
  transition: transform calc(var(--dur-combo-move) * 1ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.pivot-line {
  position: absolute;
  margin-left: calc(-1 * var(--logo-half));
  display: inline-block;
  background: var(--line-color);
  height: 2px;
  width: var(--pivot-width);
  border-radius: 1px;
  opacity: 0;
  transform-origin: center center;
  transform: scaleX(0) rotate(0deg);
  transition:
    opacity  calc(var(--dur-pivot-appear-o) * 1ms) ease,
    transform calc(var(--dur-pivot-appear-t) * 1ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.logo-title {
  position: absolute;
  left: calc(100% - 220px); /* 如需更严谨，可也抽变量；此处保留你原逻辑 */
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0;
  height: var(--title-height);
  width: auto;
  transition: transform calc(var(--dur-title-slide) * 1ms) cubic-bezier(0.22, 1, 0.36, 1);
}

/* 阶段：logo左移、短线出现 */
.hero-combo.phase-a .logo-loading {
  transform: translateX(var(--logo-move-x));
}
.hero-combo.phase-a .pivot-line {
  opacity: 1;
  transform: scaleX(1) rotate(0deg);
}

/* 短线旋转为竖线 */
.hero-combo.turned .pivot-line {
  /* 旋转阶段沿用 pivot-line 的 transition 时长；如需单独更改，可给 .turned 下再次覆盖 */
  transition:
    opacity  calc(var(--dur-pivot-appear-o) * 1ms) ease,
    transform calc(var(--dur-pivot-rotate) * 1ms) cubic-bezier(0.22, 1, 0.36, 1);
  transform: rotate(90deg) scaleX(6.0) scaleY(1.0);
}

/* 竖线向中心收缩并淡出（可选阶段） */
.hero-combo.pivot-shrink .pivot-line {
  transform: rotate(90deg) scaleX(6.0) scaleY(0);
  opacity: 0;
  transition:
    transform calc(var(--dur-pivot-shrink-t) * 1ms) ease,
    opacity  calc(var(--dur-pivot-shrink-o) * 1ms) ease;
}

/* 标题从竖线右侧滑出 */
.hero-combo.phase-b .logo-title {
  transform: translate(var(--title-slide-x), -50%);
  opacity: 1;
}

/* ====== 退出：背景 + logo + 线 同步淡出 ====== */
#loader.fade-out-all::before { opacity: 0; }
#loader.fade-out-all .hero-combo { opacity: 0; }
#loader.fade-out-all .lines { opacity: 0; }

/* ============ 新增：滚动条“从右侧滑出”的视觉模拟 ============ */
/* 估算一条竖向带的宽度来模拟滚动条显现（仅视觉过渡，不改原生滚动条行为） */
:root {
  --sbw: 12px; /* 典型 WebKit 滚动条宽度，可按需调整 */
}

/* 初始带宽为 0；当开始淡出时（html.reveal-scroll）让它由 0 → --sbw */
html::after {
  content: "";
  position: fixed;
  top: 0; right: 0;
  width: 0;
  height: 100vh;
  pointer-events: none;
  /* 低对比度的右侧竖向渐隐带，营造“滑出”观感 */
  background: linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0));
  transition: width calc(var(--dur-bg-fade) * 1ms) cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9990; /* 低于 #loader(9999)，高于普通内容；如你的 navbar 更高也没关系 */
}

/* 白色背景开始淡出时触发（由 JS 添加 .reveal-scroll） */
html.reveal-scroll::after {
  width: var(--sbw);
}

/* ============ 新增：navbar 在淡出期间自上而下滑入 ============ */
/* 让 navbar 初始在视口上方；当 html 带有 .navbar-in 时滑入 */
.navbar {
  transform: translateY(-100%);
  transition: transform calc(var(--dur-bg-fade) * 1ms) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* JS 在开始淡出时会加 .navbar-in 到 <html> */
html.navbar-in .navbar {
  transform: translateY(0);
}

/* 可选：减少动画（无障碍） */
@media (prefers-reduced-motion: reduce) {
  html::after { transition: none; }
  .navbar { transition: none; }
}


/* ============ 小屏适配（可选） ============ */
@media (max-width: 768px) {
  :root {
    --logo-width:    150px;  /* 缩小 logo */
    --title-height:   36px;  /* 缩小标题高 */
    --pivot-width:    20px;

    /* 如需在小屏加快节奏，也可以在这里单独覆盖时长：
       --dur-extend: 1700;
       --dur-title-slide: 480;
       ... */
  }

  /* 小屏下 extend 终点同样用变量自动适配，无需重写 keyframes */
}