/* =========================================================================
 * loading.css —— 行程日历 · 高级加载动效
 * 包含：启动页（Splash + 真实进度）/ 顶部进度条 / 文件读取进度 / 等待呼吸点
 *
 * 设计规范落地：
 *   · 仅动画 transform / opacity；进度一律 transform: scaleX + origin:left
 *   · 缓动 --eo(ease-out) 进入退出 / --ei(ease-in-out) 屏幕内形变 / hover 用 ease 150ms
 *   · 时长 微交互 120ms / 标准 200ms / 整页 280ms / splash 退出 240ms（略快于进入）
 *   · 入场初始态scale(0.95)
 *   · 模糊 ≤ 20px
 *   · hover 统一包在 @media (hover: hover) and (pointer: fine)
 *   · 循环动画在 reduced-motion 下用负 animation-delay 暂停在好看的帧
 * ========================================================================= */

#lpSplash {
  --p: 0;
  --eo: cubic-bezier(0.22, 1, 0.36, 1);
  --ei: cubic-bezier(0.65, 0, 0.35, 1);
}

:root {
  /* 动效令牌（与既有主题变量共存，不覆盖） */
  --lp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lp-dur-micro: 120ms;
  --lp-dur-ui: 200ms;
  --lp-dur-page: 280ms;
}

/* ---------- 启动页 Splash ---------- */
#lpSplash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background:
    radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--accent, #FF3B30) 8%, transparent) 0%, transparent 60%),
    var(--bg, #FFFFFF);
  opacity: 1;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  will-change: transform, opacity;
  /* 退场比入场快约 20%：入场 280ms → 退场 240ms */
  transition: opacity 240ms var(--lp-ease-out), transform 240ms var(--lp-ease-out);
}
#lpSplash.lp-gone { opacity: 0; transform: scale(0.96); pointer-events: none; }

/* 品牌标记：日历轮廓 + 呼吸光晕（纯循环，linear 匀速） */
.lp-mark { position: relative; width: 74px; height: 74px; display: grid; place-items: center; }
.lp-mark svg { width: 46px; height: 46px; color: var(--text, #1C1C1E); position: relative; z-index: 1; }
.lp-mark::before,
.lp-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent, #FF3B30) 55%, transparent);
  will-change: transform, opacity;
  animation: lpMarkPulse 2.1s linear infinite;
}
.lp-mark::after { animation-delay: -1.05s; }
@keyframes lpMarkPulse {
  0%   { transform: scale(0.72); opacity: 0; }
  35%  { opacity: 0.85; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* 标题（入场：scale 0.95 → 1，280ms ease-out） */
.lp-word {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: lpEnter 280ms var(--lp-ease-out) both;
}
.lp-title {
  font-size: 17px; font-weight: 700; letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--text, #1C1C1E);
}
.lp-sub { font-size: 11px; letter-spacing: 0.18em; color: var(--text2, #8E8E93); }

@keyframes lpEnter {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* 真实进度条：transform: scaleX，不动画 width */
.lp-bar {
  --p: 0;
  position: relative; width: min(240px, 62vw); height: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--text, #1C1C1E) 10%, transparent);
  overflow: hidden;
}
.lp-bar > i {
  position: absolute; inset: 0; border-radius: 3px;
  transform: scaleX(var(--p)); transform-origin: left center;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent, #FF3B30) 65%, #fff),
    var(--accent, #FF3B30));
  transition: transform 200ms var(--lp-ease-out);
  will-change: transform;
}
/* 流动高光：匀速循环，纯 transform 位移 */
.lp-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  will-change: transform;
  animation: lpShimmer 1.5s linear infinite;
}
@keyframes lpShimmer {
  from { transform: translate3d(-60px, 0, 0); }
  to   { transform: translate3d(260px, 0, 0); }
}

.lp-pct { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text2, #8E8E93); letter-spacing: 0.1em; }
.lp-stage { font-size: 12px; color: var(--text, #1C1C1E); min-height: 16px; }

/* ---------- 顶部进度条（2~3px） ---------- */
#lpTop {
  --p: 0;
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9998;
  pointer-events: none;
  background: color-mix(in srgb, var(--text, #1C1C1E) 6%, transparent);
  opacity: 0;
  transition: opacity var(--lp-dur-ui) var(--lp-ease-out);
  will-change: opacity;
}
#lpTop.lp-on { opacity: 1; }
#lpTop > i {
  position: absolute; inset: 0; display: block;
  transform: scaleX(var(--p)); transform-origin: left center;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent, #FF3B30) 55%, #fff),
    var(--accent, #FF3B30));
  transition: transform 180ms var(--lp-ease-out), opacity 180ms var(--lp-ease-out);
  will-change: transform;
}
/* 头部亮点：独立元素随进度平移（与进度条同duration / 同easing） */
#lpTop > b {
  position: absolute; top: 0; left: 0; width: 34px; height: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent, #fff);
  transform: translate3d(calc(var(--p) * (100vw - 34px)), 0, 0);
  transform-origin: left center;
  opacity: 0.9;
  transition: transform 180ms var(--lp-ease-out), opacity 180ms var(--lp-ease-out);
  will-change: transform;
}
/* 收尾：冲到 100% 后淡出（不生硬消失） */
#lpTop.lp-done > i,
#lpTop.lp-done > b { opacity: 0; }
#lpTop.lp-done { background: transparent; }

/* ---------- 文件读取进度 ----------
   bottom 由页面传入 --lp-bottom-offset：底部有固定导航（页签/工具栏）的页面
   需把它抬到导航之上，避免卡片被压在导航下面且pointer-events:none 导致点不到。
   不设该变量的页面回落到28px 旧行为。 */
#lpUpload {
  position: fixed; left: 50%;
  bottom: calc(var(--lp-bottom-offset, 28px) + var(--safe-bottom, 0px));
  z-index: 10001; width: min(320px, 86vw);
  padding: 14px 16px; border-radius: 16px;
  background: var(--card-solid, #fff);
  border: 1px solid color-mix(in srgb, var(--text, #1C1C1E) 10%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  opacity: 0; pointer-events: none;
  transform: translate3d(-50%, 12px, 0) scale(0.95);
  transition: opacity 200ms var(--lp-ease-out), transform 200ms var(--lp-ease-out);
  will-change: transform, opacity;
}
#lpUpload.lp-on { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }

.lp-up-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text, #1C1C1E); }
.lp-up-head .lp-ico { width: 15px; height: 15px; color: var(--accent, #FF3B30); flex: none; }
.lp-up-head .lp-ok {
  margin-left: auto; opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms var(--lp-ease-out), transform 160ms var(--lp-ease-out);
  color: #34C759;
}
#lpUpload.lp-ok .lp-ok { opacity: 1; transform: scale(1); }

.lp-up-track {
  --p: 0;
  margin-top: 10px; height: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--text, #1C1C1E) 10%, transparent);
  overflow: hidden;
}
.lp-up-track > i {
  display: block; height: 100%;
  transform: scaleX(var(--p)); transform-origin: left center;
  background: var(--accent, #FF3B30);
  transition: transform 120ms linear;   /* 文件读取：匀速跟随真实字节流 */
  will-change: transform;
}

/* ---------- 等待呼吸点（行程进行中） ---------- */
/* 嵌在今日概览条的事件条目里，需比正文更紧凑 */
.today-strip .ts-ev-item .lp-live { font-size: 9px; padding: 0 6px 0 4px; gap: 3px; }
.today-strip .ts-ev-item .lp-live > i { width: 4px; height: 4px; }

.lp-live {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 6px; padding: 1px 7px 1px 5px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent, #FF3B30);
  background: color-mix(in srgb, var(--accent, #FF3B30) 12%, transparent);
  vertical-align: middle;
}
.lp-live > i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  will-change: transform, opacity;
  animation: lpBreathe 1.8s var(--lp-ease-in-out) infinite;
}
@keyframes lpBreathe {
  0%, 100% { opacity: 0.35; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

/* ---------- Hover（仅精确指针设备） ---------- */
@media (hover: hover) and (pointer: fine) {
  #lpUpload:hover { transform: translate3d(-50%, -2px, 0) scale(1); }
}

/* ---------- 无障碍：减弱动态 ----------
   去掉 transform / 位移 / 缩放；循环动画用负 delay 暂停在好看的帧；
   保留 opacity 淡入淡出。 */
@media (prefers-reduced-motion: reduce) {
  #lpSplash.lp-gone { transform: none; }
  .lp-word { animation: none; opacity: 1; transform: none; }
  .lp-mark::before,
  .lp-mark::after,
  .lp-bar::after,
  .lp-live > i {
    animation-play-state: paused;
    animation-delay: -0.62s;   /* 停在扩散环最亮的一帧 */
  }
  #lpUpload { transform: translate3d(-50%, 0, 0) scale(1); }
  #lpUpload.lp-on { transform: translate3d(-50%, 0, 0) scale(1); }
  #lpUpload:hover { transform: translate3d(-50%, 0, 0) scale(1); }
  .lp-up-head .lp-ok { transform: none; }
  .lp-bar > i, #lpTop > i, #lpTop > b, .lp-up-track > i {
    transition-duration: 1ms !important;
  }
  #lpSplash, #lpTop, #lpUpload { transition-duration: 120ms !important; }
}