/* HR 加载动画「写字」（汐儿 10-29 从两个样张里选定，参考「派」的写字式加载）。
   浅薰衣草色的影子标垫底，亮紫按左下、中间、右上三笔顺序顺着笔画写上去；写完紫色圆角方块带回弹浮现、三笔变白、
   右上角三道涟漪由内到外画出，成为完整的 HR 标；停一下，淡出重来。一轮 2.8 秒。
   三笔是从官方标志原图上按「互不相连的图形块」原样切下来的（形状没改），嵌在下面的 --hr-s1/2/3 里：
   单独下载的话，慢网络下动画要等图下完才出得来，嵌进来样式一到就能播。
   用法：<div class="hr-loader" style="--size:128px">…</div>，结构见 /js/loader.js；系统页开场直接写在 index.html 里。 */

:root {
  --hr-s1: url(data:image/png;base64,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);
  --hr-s2: url(data:image/png;base64,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);
  --hr-s3: url(data:image/png;base64,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);
}

/* 擦除进度：注册成可以做动画的百分比，渐变的位置才能平滑推进 */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: -12%; }

.hr-loader { position: relative; width: var(--size, 128px); height: var(--size, 128px); flex: none; }
.hr-loader .hl-tile { position: absolute; inset: 0; border-radius: 27%; overflow: hidden; background: #7563B3; opacity: 0; scale: .82;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 8px rgba(20,12,48,.18), 0 10px 26px rgba(91,75,138,.28);
  animation: hrl-tile 2.8s infinite; }
.hr-loader .hl-ripples { position: absolute; inset: 0; width: 100%; height: 100%; }
.hr-loader .hl-ripples path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: hrl-r1 2.8s infinite; }
.hr-loader .hl-ripples path:nth-child(2) { animation-name: hrl-r2; }
.hr-loader .hl-ripples path:nth-child(3) { animation-name: hrl-r3; }
/* 标在方块里的位置和比例照品牌标 */
.hr-loader .hl-mark { position: absolute; left: 50%; top: 50%; width: 48.4%; height: 52.3%; translate: -50% -50%; }
.hr-loader .hl-mark > i { position: absolute; inset: 0; mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; }
/* 影子：三笔叠在一起 */
.hr-loader .hl-ghost { background: #D3CBEA; mask-image: var(--hr-s1), var(--hr-s2), var(--hr-s3); -webkit-mask-image: var(--hr-s1), var(--hr-s2), var(--hr-s3); animation: hrl-ghost 2.8s infinite; }
/* 每一笔两层遮罩：这一笔的形状，叠上一道顺着笔画方向推进的渐变，两层取交集，就是「写到哪显到哪」 */
.hr-loader .hl-s { --p: -12%; background: #7563B3; mask-composite: intersect; -webkit-mask-composite: source-in; }
.hr-loader .hl-s1 { mask-image: var(--hr-s1), linear-gradient(150deg, #000 var(--p), transparent calc(var(--p) + 8%)); -webkit-mask-image: var(--hr-s1), linear-gradient(150deg, #000 var(--p), transparent calc(var(--p) + 8%)); animation: hrl-s1 2.8s infinite, hrl-ink 2.8s infinite; }
.hr-loader .hl-s2 { mask-image: var(--hr-s2), linear-gradient(168deg, #000 var(--p), transparent calc(var(--p) + 8%)); -webkit-mask-image: var(--hr-s2), linear-gradient(168deg, #000 var(--p), transparent calc(var(--p) + 8%)); animation: hrl-s2 2.8s infinite, hrl-ink 2.8s infinite; }
.hr-loader .hl-s3 { mask-image: var(--hr-s3), linear-gradient(158deg, #000 var(--p), transparent calc(var(--p) + 8%)); -webkit-mask-image: var(--hr-s3), linear-gradient(158deg, #000 var(--p), transparent calc(var(--p) + 8%)); animation: hrl-s3 2.8s infinite, hrl-ink 2.8s infinite; }

/* 时间线：第 1 笔 0~20%，第 2 笔 18~44%，第 3 笔 42~62%，方块浮现 62~72%，涟漪 70~88%，停到 92%，淡出到 100% */
@keyframes hrl-s1 { 0% { --p: -12%; animation-timing-function: cubic-bezier(.45,.05,.4,1); } 20%, 100% { --p: 112%; } }
@keyframes hrl-s2 { 0%, 18% { --p: -12%; animation-timing-function: cubic-bezier(.45,.05,.4,1); } 44%, 100% { --p: 112%; } }
@keyframes hrl-s3 { 0%, 42% { --p: -12%; animation-timing-function: cubic-bezier(.45,.05,.4,1); } 62%, 100% { --p: 112%; } }
@keyframes hrl-ink { 0%, 62% { background-color: #7563B3; opacity: 1; } 70%, 92% { background-color: #fff; opacity: 1; } 100% { background-color: #fff; opacity: 0; } }
@keyframes hrl-ghost { 0%, 60% { opacity: 1; } 70%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hrl-tile { 0%, 62% { opacity: 0; scale: .82; animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 72%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .96; } }
@keyframes hrl-r1 { 0%, 70% { stroke-dashoffset: 1; opacity: .7; } 80%, 92% { stroke-dashoffset: 0; opacity: .7; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hrl-r2 { 0%, 74% { stroke-dashoffset: 1; opacity: .4; } 84%, 92% { stroke-dashoffset: 0; opacity: .4; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hrl-r3 { 0%, 78% { stroke-dashoffset: 1; opacity: .2; } 88%, 92% { stroke-dashoffset: 0; opacity: .2; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 整页等待（打开系统、登录成功后跳转）：白底正中一个动画 */
.loader-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #fff; animation: hrl-in .25s ease-out; }
@keyframes hrl-in { from { opacity: 0; } to { opacity: 1; } }
/* 页面切换时数据没到：主区正中一个小号的 */
.loader-inline { display: grid; place-items: center; min-height: 52vh; animation: hrl-in .25s ease-out; }

/* 系统里开了「减少动态效果」：不播动画，直接显示完整的标 */
@media (prefers-reduced-motion: reduce) {
  .hr-loader *, .loader-screen, .loader-inline { animation: none !important; }
  .hr-loader .hl-tile { opacity: 1; scale: 1; }
  .hr-loader .hl-ghost { opacity: 0; }
  .hr-loader .hl-s { --p: 112%; background: #fff; }
  .hr-loader .hl-ripples path { stroke-dashoffset: 0; }
}