/* ============================================================
光中传媒 · index-v3 交互光影系统
文件: interactions.css
依赖: tokens.css → base.css → sections.css → interactions.css
说明:
· hover 交互 (全用光影, 无 scale)
· 章节过渡 - 影子呼吸带
· 导航底部 2px 渐变滚动进度条 (光划过纸面的轨迹)
· 联系表单 - 四态光效闭环
· 轮播点 - 渐变光效
============================================================ */
/* ============================================================
1. 导航底部 2px 渐变滚动进度条
三重角色：边框替代 + 进度指示 + 光影叙事
四段光影节奏：
0% → opacity 0.15 暗纹 (故事待启, 光未出鞘)
1%~30% → opacity 0.75, 右端 5px 橙光点呼吸 (光开始流动)
30%~80% → opacity 1.0 全亮 (光均匀划过)
80%~100% → 羽化拖尾 10px→24px (余韵未散)
100%瞬发 → 整段青色闪一下 (聚光灯收光于终点)
============================================================ */
.nav-progress {
position: absolute;
left: 0;
right: 0;
bottom: calc(-1 * var(--nav-progress-height)); /* 正好压在 border-bottom 上 */
z-index: var(--z-progress);
height: var(--nav-progress-height);
pointer-events: none;
width: 100%;
background: transparent;
}
.nav-progress__bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
transform-origin: left center;
transform: scaleX(0);
/* 品牌渐变: 橙 → 浅橙 → 青 (左暖右冷, 光划过纸面的色彩温度变化) */
background: linear-gradient(90deg,
var(--color-brand) 0%,
var(--color-brand-light) 55%,
var(--color-cyan-light) 92%,
var(--color-cyan) 100%);
/* blend-mode: 深色底发光, 浅色底亮边 */
mix-blend-mode: screen;
border-radius: 0 1px 1px 0;
/* 初始暗 */
opacity: 0.15;
filter: drop-shadow(0 0 2px rgba(255,160,0,0.08));
will-change: transform, opacity, filter;
transition:
opacity 0.4s var(--ease-interact),
filter 0.4s var(--ease-interact);
}
.nav-progress__trail {
position: absolute;
top: 0;
bottom: 0;
/* left + width 由 JS 动态驱动到进度条末端 */
left: 0;
width: var(--nav-progress-trail, 10px);
pointer-events: none;
background: linear-gradient(90deg,
rgba(0,168,198,0.85) 0%,
rgba(43,212,239,0.45) 55%,
rgba(43,212,239,0) 100%);
mix-blend-mode: screen;
filter: blur(0.8px);
border-radius: 0 2px 2px 0;
transform-origin: left center;
transform: translateX(-100%);
opacity: 0;
will-change: transform, opacity, width;
transition:
opacity 0.5s var(--ease-interact),
width 0.5s var(--ease-enter);
}
/* 进度条节奏: 1%~30% 右端呼吸光点 */
.nav-progress[data-stage="warm"] .nav-progress__bar {
opacity: 0.75;
filter: drop-shadow(0 0 4px rgba(255,160,0,0.35));
}
.nav-progress[data-stage="warm"] .nav-progress__bar::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
transform: translate(50%, -50%);
background: var(--color-brand-light);
box-shadow: 0 0 8px rgba(255,184,77,0.8);
animation: navProgressWarmBlink 1.6s ease-in-out infinite;
}
@keyframes navProgressWarmBlink {
0%, 100% { opacity: 0.5; transform: translate(50%, -50%) scale(0.9); }
50% { opacity: 1.0; transform: translate(50%, -50%) scale(1.2); }
}
/* 进度条节奏: 30%~80% 全亮均匀划 */
.nav-progress[data-stage="run"] .nav-progress__bar {
opacity: 1.0;
filter: drop-shadow(0 0 5px rgba(255,160,0,0.25));
}
.nav-progress[data-stage="run"] .nav-progress__trail {
opacity: 0.72;
/* 维持默认 10px */
}
/* 进度条节奏: 80%~100% 拖尾渐宽 (余韵) */
.nav-progress[data-stage="linger"] .nav-progress__bar {
opacity: 1.0;
filter: drop-shadow(0 0 8px rgba(0,168,198,0.35));
}
.nav-progress[data-stage="linger"] .nav-progress__trail {
opacity: 0.88;
/* 拖尾 10→24px 由 JS 动态设置 style */
}
/* 100% 触底: 青色瞬时闪一次 */
.nav-progress[data-stage="flash"] .nav-progress__bar {
animation: navProgressFinishFlash 0.7s ease-out forwards;
}
@keyframes navProgressFinishFlash {
0% { filter: drop-shadow(0 0 5px rgba(0,168,198,0.3)); }
18% { filter: drop-shadow(0 0 18px rgba(0,168,198,0.95)) brightness(1.1); }
100% { filter: drop-shadow(0 0 6px rgba(0,168,198,0.35)); opacity: 0.9; }
}
/* 深色章节上, 进度条亮度略提升 */
.nav.nav-on-dark .nav-progress__bar {
filter: drop-shadow(0 0 4px rgba(255,160,0,0.22)) drop-shadow(0 0 1px rgba(255,255,255,0.15));
}
/* 减少动效: 静态 1px 橙色边 (无渐变无动画) */
@media (prefers-reduced-motion: reduce) {
.nav-progress__bar {
background: var(--color-brand) !important;
mix-blend-mode: normal !important;
filter: none !important;
transition: none !important;
animation: none !important;
}
.nav-progress__trail { display: none; }
.nav-progress[data-stage] .nav-progress__bar::after { display: none; }
}
/* ============================================================
2. hover 光影交互 (全站不使用 scale, 用光揭示)
============================================================ */
/* 3.1 深底业务项：底边橙线扫光 + 名称橙辉光 + 整项文字全白凸显 */
.service-item::after {
content: '';
position: absolute;
left: 12%;
right: 12%;
bottom: 10px;
height: 2px;
background: linear-gradient(90deg, rgba(255,160,0,0), var(--color-brand) 45%, var(--color-brand) 55%, rgba(255,160,0,0));
transform-origin: center;
transform: scaleX(0);
pointer-events: none;
transition: transform var(--duration-sweep) var(--ease-sweep);
filter: drop-shadow(0 0 6px rgba(255,160,0,0.5));
}
.service-item:hover::after { transform: scaleX(1); }
.service-item:hover .service-item__name {
color: #fff;
text-shadow: 0 0 22px rgba(255,160,0,0.40), 0 0 2px rgba(255,160,0,0.10);
}
.service-item:hover .service-item__desc { color: #fff; }
.service-item:hover .service-item__tags { color: #fff; }
/* 3.2 作品卡片: 四角径向橙光扩散 (图片层) + 标题转橙色 + 元信息变青 */
.work-card:hover .work-card__media {
border-color: rgba(255,160,0,0.35);
box-shadow: var(--shadow-card-hover);
}
.work-card:hover .work-card__media img {
filter: saturate(1.02) brightness(1.02);
}
.work-card:hover .work-card__glow {
opacity: 1;
background:
radial-gradient(circle at 8% 6%, rgba(255,184,77,0.45) 0%, transparent 28%),
radial-gradient(circle at 92% 6%, rgba(255,184,77,0.38) 0%, transparent 28%),
radial-gradient(circle at 8% 94%, rgba(0,168,198,0.28) 0%, transparent 32%),
radial-gradient(circle at 92% 94%, rgba(0,168,198,0.35) 0%, transparent 32%);
}
.work-card:hover .work-card__title {
color: var(--color-brand);
}
.work-card:hover .work-card__meta {
color: var(--color-cyan);
letter-spacing: 0.14em;
}
/* 3.3 导航链接: 下划线流动 (青色→橙色渐变)
· 保留 v3 版 6 个链接：业务 案例 场域 关于 动态 联系
· 保留 v3 现有 青→橙 左展开下划线 + hover颜色（用户明确要求保留）
· 与原 sections.css 1320-1448 对齐：新增 浅色态/深色态 三态颜色切换
============================================================ */
.nav-link::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
transform-origin: left center;
transform: scaleX(0);
background: linear-gradient(90deg, var(--color-cyan), var(--color-brand));
transition: transform var(--duration-sweep) var(--ease-sweep);
border-radius: 1px;
}
.nav-link:hover,
.nav-link:focus-visible {
color: var(--color-brand) !important;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
transform: scaleX(1);
}
/* 浅色玻璃态下hover：品牌橙深（与原 sections.css 1335 对齐）*/
.nav.is-scrolled:not(.nav-on-dark) .nav-link:hover,
.nav.is-scrolled:not(.nav-on-dark) .nav-link:focus-visible {
color: var(--color-brand-deep) !important;
}
/* 在深色章节上: hover 偏暖橙 + 微光（v3 原有细节保留）*/
.nav.nav-on-dark .nav-link:hover,
.nav.nav-on-dark .nav-link:focus-visible {
color: var(--color-brand-light) !important;
text-shadow: 0 0 10px rgba(255,160,0,0.2);
}
/* 3.4 CTA 按钮 (nav-cta · 三态 hover 与原 sections.css 1380-1448 完全对齐)
· 三态：深色Hero态 / 浅色玻璃态 / 深色章节态
· 保留 v3 版 .btn-pri / .contact-submit 样式不变，仅重写 a.nav-cta 的 hover 链
============================================================ */
a.nav-cta:hover,
a.nav-cta:focus-visible {
background-position: 100% 50%;
color: var(--color-brand); /* Hero 深色态：hover 文字变橙色 */
transform: translateY(-1px);
border: none;
box-shadow:
0 0 0 4px rgba(255, 160, 0, 0.16),
0 10px 26px rgba(255, 160, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
/* 浅色玻璃态（.is-scrolled 且不在深色章节） → hover 变品牌青 + 青绿发光环 */
.nav.is-scrolled:not(.nav-on-dark) a.nav-cta:hover,
.nav.is-scrolled:not(.nav-on-dark) a.nav-cta:focus-visible {
color: var(--color-hover); /* 品牌青 #00A8C6 */
background-position: 100% 50%;
transform: translateY(-1px);
border-color: rgba(0, 168, 198, 0.45);
box-shadow:
0 0 0 4px rgba(0, 168, 198, 0.14),
0 8px 20px rgba(0, 168, 198, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
/* 深色章节态（.is-scrolled + nav-on-dark） → hover 文字橙色，和Hero一致 */
.nav.is-scrolled.nav-on-dark a.nav-cta:hover,
.nav.is-scrolled.nav-on-dark a.nav-cta:focus-visible {
background-position: 100% 50%;
color: var(--color-brand);
transform: translateY(-1px);
border: none;
box-shadow:
0 0 0 4px rgba(255, 160, 0, 0.16),
0 10px 26px rgba(255, 160, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
/* 其余通用按钮 hover（v3 原有逻辑保留，不影响导航）*/
.btn-pri:hover,
.contact-submit:not(:disabled):not([data-state="success"]):not([data-state="loading"]):hover {
filter: brightness(1.05) saturate(1.05);
box-shadow:
inset 0 0 0 1px rgba(255,160,0,0.5),
0 0 0 4px rgba(255,160,0,0.08),
0 10px 28px rgba(255,160,0,0.3);
}
.btn-sec:hover {
border-color: rgba(255,160,0,0.45);
background: rgba(255,160,0,0.06);
color: var(--color-brand-light);
box-shadow: 0 0 0 2px rgba(255,160,0,0.08), inset 0 0 0 1px rgba(255,160,0,0.22);
}
/* 3.5 新闻卡片: 顶部橙色细边渐亮 + 标题色变 */
.news-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--color-brand-light), var(--color-brand-deep));
transform: scaleX(0);
transform-origin: left center;
border-radius: 4px 4px 0 0;
transition: transform var(--duration-sweep) var(--ease-sweep);
}
.news-card:hover {
border-color: rgba(255,160,0,0.22);
box-shadow: 0 14px 40px rgba(0,0,0,0.08);
background: #FFFDF8;
}
.news-card:hover::before {
transform: scaleX(1);
}
.news-card:hover .news-card__title {
color: var(--color-brand-deep);
}
/* 3.6 轮播箭头: 悬停 边框橙亮 + 光晕 */
.showcases-arrow:hover {
border-color: rgba(255,160,0,0.45);
background: rgba(255,160,0,0.14);
color: var(--color-brand-light);
box-shadow: 0 0 0 3px rgba(255,160,0,0.10), 0 0 18px rgba(255,160,0,0.22);
}
.showcases-arrow:active {
filter: brightness(0.9);
}
/* ============================================================
4. 轮播点指示器 - 渐变光效 (锁定态青渐变, hover橙边)
============================================================ */
.showcases-dot {
background-color: rgba(255,255,255,0.18);
background-image: none;
}
.showcases-dot.is-active {
background-image: linear-gradient(90deg, var(--color-cyan) 0%, var(--color-cyan-light) 100%);
box-shadow: 0 0 10px rgba(0,168,198,0.55), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.showcases-dot:hover {
border: none;
background-image: linear-gradient(90deg, var(--color-brand-light) 0%, var(--color-brand) 100%);
box-shadow: 0 0 8px rgba(255,160,0,0.45);
transform: scaleX(1.05);
}
/* ============================================================
5. 联系表单 - 四态光效闭环
四态: 空置→输入中(浅橙呼吸脉动)→合法(青绿光左扫→稳定绿边+✔)→错误(橙光左扫→橙边+右下角光点)
提交三态: 常态→loading(内部扫光进度)→success(整按钮渐变青 ✨已送达 + 径向晕光)→error(橙闪2下)
============================================================ */
/* 5.1 输入框底部扫光条 (空置态透明, JS触发时染色+动画) */
.form-field__sweep {
background: transparent;
}
/* 5.2 输入中 (未合法): 底边 1.5px 浅橙 3s/周期呼吸脉动 */
.form-field[data-state="typing"] input {
border-bottom-color: var(--color-brand-light);
background: #FFFCF6;
animation: formTypingPulse 3s ease-in-out infinite;
}
@keyframes formTypingPulse {
0%, 100% { border-bottom-color: rgba(255,184,77,0.4); }
50% { border-bottom-color: rgba(255,184,77,0.85); }
}
/* 5.3 合法确认: 青绿光带左→右扫 (0.6s) + 扫完稳定绿光边 + 右侧✔青字符 */
.form-field[data-state="valid"] .form-field__sweep {
background: linear-gradient(90deg, var(--color-success-glow) 0%, #6EE7B7 100%);
transform-origin: left center;
animation: formSweep 0.6s var(--ease-sweep) forwards;
box-shadow: 0 0 8px rgba(43,196,138,0.35);
}
.form-field[data-state="valid"] input {
border-bottom-color: var(--color-success-glow);
background: #F3FBF6;
box-shadow: 0 0 14px -4px rgba(43,196,138,0.28);
transition: box-shadow 0.5s var(--ease-sweep) 0.15s, border-color 0.5s var(--ease-sweep) 0.15s, background-color 0.5s var(--ease-sweep) 0.15s;
}
.form-field[data-state="valid"] .form-field__status {
opacity: 1;
color: var(--color-success-glow);
}
.form-field[data-state="valid"] .form-field__status::after {
content: '✔';
font-size: 14px;
}
@keyframes formSweep {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
/* 5.4 错误态: 橙光带左→右扫 + 稳定橙边 + 右下角橙色发光点 */
.form-field[data-state="invalid"] .form-field__sweep {
background: linear-gradient(90deg, var(--color-brand-light) 0%, var(--color-brand-deep) 100%);
transform-origin: left center;
animation: formSweep 0.6s var(--ease-sweep) forwards;
box-shadow: 0 0 8px rgba(204,128,0,0.35);
}
.form-field[data-state="invalid"] input {
border-bottom-color: var(--color-brand-deep);
background: #FFF7EC;
box-shadow: 0 0 14px -4px rgba(204,128,0,0.3);
transition: box-shadow 0.5s var(--ease-sweep) 0.15s, border-color 0.5s var(--ease-sweep) 0.15s, background-color 0.5s var(--ease-sweep) 0.15s;
}
.form-field[data-state="invalid"] .form-field__status {
opacity: 1;
right: 10px;
bottom: 10px;
width: 8px;
height: 8px;
background: var(--color-brand-deep);
border-radius: 50%;
box-shadow: 0 0 10px rgba(204,128,0,0.75), 0 0 2px rgba(204,128,0,0.4);
}
/* 兜底: 没找到状态时 扫光条无动画 */
.form-field:not([data-state="valid"]):not([data-state="invalid"]) .form-field__sweep {
animation: none;
}
/* 5.5 提交按钮三态: loading / success / error */
/* loading: 内部从左到右橙扫光进度 (0→100% 约1.2s) */
.contact-submit[data-state="loading"] {
background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 18px rgba(255,160,0,0.25);
pointer-events: none;
}
.contact-submit[data-state="loading"] .contact-submit__sweep {
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.35) 50%,
transparent 100%);
transform: translateX(-100%);
animation: btnLoadingSweep 1.2s ease-out 1 forwards;
}
@keyframes btnLoadingSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* success: 整按钮 0.4s 从左→右平滑青渐变 + ✨已送达 + 极淡青径向晕光 + 3s后淡回 */
.contact-submit[data-state="success"] {
background: linear-gradient(135deg, var(--color-cyan-deep) 0%, var(--color-cyan) 55%, var(--color-cyan-light) 100%);
color: #031215;
box-shadow: var(--glow-btn-success), inset 0 1px 0 rgba(255,255,255,0.32);
pointer-events: none;
animation: btnSuccessGlow 3s ease-out forwards;
}
.contact-submit[data-state="success"] .contact-submit__sweep {
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.25) 50%,
transparent 100%);
transform: translateX(-100%);
animation: btnSuccessSweep 0.4s var(--ease-sweep) forwards;
}
@keyframes btnSuccessSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes btnSuccessGlow {
0% { box-shadow: 0 0 30px rgba(0,168,198,0.45), inset 0 1px 0 rgba(255,255,255,0.32); }
15% { box-shadow: 0 0 50px rgba(0,168,198,0.60), inset 0 1px 0 rgba(255,255,255,0.35); }
80% { box-shadow: 0 0 32px rgba(0,168,198,0.28), inset 0 1px 0 rgba(255,255,255,0.3); }
100% { box-shadow: 0 0 6px rgba(0,168,198,0.10), inset 0 1px 0 rgba(255,255,255,0.2); filter: brightness(0.96); }
}
/* error: 按钮橙色不变 外一圈橙光晕快速闪2下 */
.contact-submit[data-state="error"] {
animation: btnErrorFlash 0.9s ease-out 2;
}
@keyframes btnErrorFlash {
0%, 100% { box-shadow: 0 8px 24px rgba(255,160,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35); }
50% { box-shadow: 0 0 0 2px rgba(204,128,0,0.55), 0 0 22px rgba(204,128,0,0.55); }
}
/* 5.6 普通输入 focus: 输入框底边品牌色扫光 */
.form-field:not([data-validate="email"]):focus-within .form-field__sweep {
background: linear-gradient(90deg, var(--color-brand-light), var(--color-brand-deep));
animation: formSweep 0.5s var(--ease-sweep) forwards;
}
/* 减少动效: 表单/按钮无动画, 直接跳态 */
@media (prefers-reduced-motion: reduce) {
.form-field[data-state] input { transition: none !important; }
.form-field[data-state] .form-field__sweep { animation: none !important; transform: scaleX(1) !important; }
.form-field[data-state="typing"] input { animation: none; border-bottom-color: rgba(255,184,77,0.6); }
.contact-submit[data-state] * { animation: none !important; }
.contact-submit[data-state] { animation: none !important; }
.contact-submit[data-state="loading"] .contact-submit__sweep { transform: translateX(100%); }
.contact-submit[data-state="success"] .contact-submit__sweep { transform: translateX(100%); }
}
/* ============================================================
6. 右下滚动指示器（严格参照 mihoyo 三段式结构）
· 鼠标图标：SVG 背景图 data URL（非 CSS border）
· 向下箭头：容器 overflow:hidden + 内部 span 做 CSS background-image（与鼠标统一，便于深浅主题切换）
· 实线：border-right 2px（非 background）
· 动画关键帧 scrollmove：0%→-150%, 80%→300%, 100%→300%（1.4s ease-in-out，0.4s 延迟起始）
· 主题：默认深底白 / .scroll-indicator--light 浅底深（背景亮度>128自动切）
· Hover：仅鼠标图标内部填充品牌橙（箭头/线/全局不做任何变化）
============================================================ */
/* --- 6.0 默认主题：深底白（--color-dark-text 风格） --- */
.scroll-indicator {
/* 深底白字 */
--si-main-color: rgba(255, 255, 255, 0.86);
--si-line-color: rgba(255, 255, 255, 0.82);
/* 鼠标 SVG：米哈游原版 viewBox=0 0 17 27（双环 + 中心胶囊滚轮） */
--si-svg-mouse: url("data:image/svg+xml;utf8,");
/* 鼠标 SVG Hover 版（三层结构）：
· A 外描边环：保持默认深底白（evenodd 双环）
· B 内部区域：实心填品牌橙 #FFA000（内圈圆角矩形直接 fill，不 evenodd 挖空）
· C 中心滚轮：保持默认深底白
效果：仅鼠标内部被橙色填充，外描边+滚轮始终为白色 */
--si-svg-mouse-hover: url("data:image/svg+xml;utf8,");
/* 箭头 SVG：米哈游原版 viewBox=0 0 8 11（11 顶点带提手特殊形状） */
--si-svg-arrow: url("data:image/svg+xml;utf8,");
}
/* --- 6.0b 浅色主题：浅底深字（#3D424D，与米哈游原版色系一致） --- */
.scroll-indicator--light {
--si-main-color: #3D424D;
--si-line-color: #333333;
--si-svg-mouse: url("data:image/svg+xml;utf8,");
/* 浅色底 Hover（三层结构）：
· A 外描边环：保持浅底深灰 #3D424D（evenodd 双环）
· B 内部区域：实心填品牌橙 #FFA000
· C 中心滚轮：保持浅底深灰 #3D424D
效果：仅鼠标内部被橙色填充，外描边+滚轮始终为深灰色 */
--si-svg-mouse-hover: url("data:image/svg+xml;utf8,");
--si-svg-arrow: url("data:image/svg+xml;utf8,");
}
/* --- 6.1 外层容器：fixed 定位，flex 列排，居中对齐；transition 仅留 opacity（取消位移/hover） --- */
.scroll-indicator {
position: fixed;
right: 28px;
bottom: 68px;
z-index: 400;
width: 84px;
height: 144px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0;
margin: 0;
background: transparent;
border: 0;
cursor: pointer;
color: inherit;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
/* 仅 opacity 过渡（位移/变换全部取消） */
transition: opacity 0.45s var(--ease-interact);
}
.scroll-indicator[aria-hidden="true"],
.scroll-indicator.is-hidden {
opacity: 0;
pointer-events: none;
}
/* --- 6.2 鼠标图标（SVG 背景图 + background-size 居中顶部铺放） --- */
.scroll-indicator__mouse {
position: relative;
width: 20px;
height: 35px;
flex-shrink: 0;
display: block;
padding: 0;
margin: 0;
background-image: var(--si-svg-mouse);
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 15px auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
box-sizing: border-box;
/* 颜色切换无跳帧（仅 0.2s 轻过渡） */
transition: background-image 0.2s linear;
}
/* Hover 仅作用于鼠标：切橙色 SVG；不影响容器/箭头/线 */
.scroll-indicator:hover .scroll-indicator__mouse {
background-image: var(--si-svg-mouse-hover);
}
/* --- 6.3 箭头：外层 overflow:hidden 作为裁切框，内部 span 位移循环 --- */
.scroll-indicator__arrow {
position: relative;
width: 7px;
height: 25px;
margin-top: 8px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
flex-shrink: 0;
display: block;
overflow: hidden;
padding: 0;
background: transparent;
box-sizing: border-box;
}
.scroll-indicator__arrow-img {
display: block;
width: 7px;
/* 按 viewBox=8:11 比例，7px 宽度对应 7*(11/8) ≈ 9.63px 高度 */
height: 9.625px;
margin: 0;
padding: 0;
border: 0;
position: relative;
top: 0;
left: 0;
transform: translateY(-150%);
user-select: none;
pointer-events: none;
/* 与鼠标同实现：背景图 */
background-image: var(--si-svg-arrow);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 7px auto;
background-color: transparent;
box-sizing: border-box;
/* 严格照搬米哈游 scrollmove：1.4s ease-in-out，0.4s 起始延迟，无限循环 */
animation: scrollIndicatorMove 1.4s cubic-bezier(0.42, 0, 0.58, 1) 0.4s infinite normal none running;
}
/* 关键帧：严格照搬米哈游 scrollmove（-150% → 300%，后 20% 停在 300% 等待） */
@keyframes scrollIndicatorMove {
0% { transform: translateY(-150%); }
80% { transform: translateY(300%); }
100% { transform: translateY(300%); }
}
@-webkit-keyframes scrollIndicatorMove {
0% { -webkit-transform: translateY(-150%); }
80% { -webkit-transform: translateY(300%); }
100% { -webkit-transform: translateY(300%); }
}
/* --- 6.4 竖线：严格用 border-right（非 background），与米哈游实现一致 --- */
.scroll-indicator__line {
display: block;
width: 0;
height: 67px;
margin-top: 8px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
flex-shrink: 0;
background: transparent;
border-right: 2px solid var(--si-line-color);
box-sizing: border-box;
}
/* --- 6.5 Hover：全部取消（容器位移/线变色/::before光晕/：active 均不做）；仅 6.2 中鼠标变色 --- */
/* --- 6.6 减少动效：箭头停在中间，所有 transition/animation 关闭 --- */
@media (prefers-reduced-motion: reduce) {
.scroll-indicator { transition: none; }
.scroll-indicator__mouse { transition: none; }
.scroll-indicator__arrow-img { animation: none !important; transform: translateY(0%) !important; }
}
/* --- 6.7 移动端：整体按比例缩小（米哈游同款适配） --- */
@media (max-width: 900px) {
.scroll-indicator {
right: 18px;
bottom: 48px;
width: 68px;
height: 116px;
}
.scroll-indicator__mouse { width: 16px; height: 28px; background-size: 12px auto; }
.scroll-indicator__arrow { width: 6px; height: 20px; margin-top: 6px; }
.scroll-indicator__arrow-img { width: 6px; height: 8.25px; background-size: 6px auto; }
.scroll-indicator__line { height: 54px; margin-top: 6px; border-right-width: 1.75px; }
}
@media (max-width: 744px) {
.scroll-indicator {
right: 14px;
bottom: 36px;
width: 56px;
height: 96px;
}
.scroll-indicator__mouse { width: 13px; height: 23px; background-size: 10px auto; }
.scroll-indicator__arrow { width: 5px; height: 17px; margin-top: 5px; }
.scroll-indicator__arrow-img { width: 5px; height: 6.875px; background-size: 5px auto; }
.scroll-indicator__line { height: 44px; margin-top: 5px; border-right-width: 1.5px; }
}