/* ============================================================
   LY 页面加载动画组件  ly-loader.css  v1.0
   品牌色：主蓝 #036FB8 / 品牌黄 #F8B62D
   ============================================================ */

:root {
  --ly-blue: #036FB8;
  --ly-yellow: #F8B62D;
}

/* ---------- 遮罩层 ---------- */
.ly-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity .45s ease, visibility .45s ease;
}
.ly-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ly-loader__box {
  text-align: center;
  transition: transform .4s cubic-bezier(.55,0,.75,.35), opacity .4s ease;
}
.ly-loader.is-done .ly-loader__box {
  transform: translateY(-16px) scale(.97);
  opacity: 0;
}

/* ---------- Logo 动画 ---------- */
.ly-loader__logo {
  width: min(190px, 42vw);
  margin: 0 auto;
  animation: ly-float 2.8s ease-in-out 1.9s infinite;
}
.ly-loader.is-done .ly-loader__logo { animation: none; }
.ly-loader__logo svg { display: block; width: 100%; height: auto; }

/* 蓝色 L：先描线，再填色 */
.ly-loader__logo .ly-g-ly path {
  stroke: var(--ly-blue);
  stroke-width: 13;
  fill-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ly-draw .7s ease forwards, ly-fill .4s ease .6s forwards;
}

/* 黄色斜带：沿自身方向扫入，压过 L 的笔画（动画加在外层包装组上，
   避免覆盖内层的矢量坐标变换） */
.ly-loader__logo .ly-a-band {
  transform-box: fill-box;
  transform-origin: center;
  animation: ly-band .8s cubic-bezier(.22,.9,.34,1) .45s both;
}

/* 底部袋子锁扣：弹性弹出 */
.ly-loader__logo .ly-a-bag {
  transform-box: fill-box;
  transform-origin: 50% 85%;
  animation: ly-pop .55s cubic-bezier(.34,1.56,.64,1) 1.1s both;
}

@keyframes ly-draw { to { stroke-dashoffset: 0; } }
@keyframes ly-fill { to { fill-opacity: 1; } }

@keyframes ly-band {
  from { opacity: 0; transform: translate(16%, -16%); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes ly-pop {
  from { opacity: 0; transform: scale(.2) translateY(8%); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ly-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ---------- 进度条 ---------- */
.ly-loader__bar {
  width: 180px;
  height: 4px;
  margin: 30px auto 0;
  border-radius: 999px;
  background: #EDF1F5;
  overflow: hidden;
}
.ly-loader__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ly-blue), var(--ly-yellow));
  animation: ly-bar 2s cubic-bezier(.2,.65,.25,1) forwards;
}
@keyframes ly-bar { to { width: 100%; } }

/* 手动进度模式（调用 LYLoader.progress 时切换） */
.ly-loader.is-manual .ly-loader__bar i { animation: none; transition: width .3s ease; }

/* ---------- 文案 ---------- */
.ly-loader__text {
  margin-top: 14px;
  font: 500 11px/1 ui-sans-serif, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .42em;
  text-indent: .42em;
  color: #9AA7B2;
  text-transform: uppercase;
}
.ly-loader__text b { color: var(--ly-blue); font-weight: inherit; }

/* ---------- 页面内容入场（配合 body.ly-page-ready） ---------- */
.ly-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.34,1);
}
body.ly-page-ready .ly-reveal { opacity: 1; transform: none; }
body.ly-page-ready .ly-reveal:nth-child(2) { transition-delay: .08s; }
body.ly-page-ready .ly-reveal:nth-child(3) { transition-delay: .16s; }

/* ---------- 弱化动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ly-loader__logo .ly-g-ly path,
  .ly-loader__logo .ly-g-band,
  .ly-loader__logo .ly-g-bag,
  .ly-loader__logo,
  .ly-loader__bar i { animation-duration: .01s !important; animation-delay: 0s !important; }
  .ly-reveal { transition: none; }
}