/* ==========================================================================
   motion.css — PC 端动效层
   实测目标站：animate-marquee 20s linear infinite / 8 组 keyframes /
   124 处渐变 / 39 处阴影 / 18 处 transition。
   本层负责所有"动态感"：跑马灯、入场、轮播、数字滚动、reveal、返回顶部。
   ========================================================================== */

/* --------------------------------------------------------------------------
   跑马灯 — 实测：flex w-max / 20s linear infinite /
   @keyframes marquee { 100% { transform: translateX(var(--marquee-to,-50%)) } }
   内容需渲染两遍才能无缝衔接。
   -------------------------------------------------------------------------- */
.marquee-viewport {
  position: relative;
  overflow: hidden;
  padding: var(--sd-s2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 20s linear infinite;   /* 实测 20s */
  will-change: transform;
}

.marquee-track:hover { animation-play-state: paused; }

/* 位移一个「单遍宽度」实现无缝衔接。
   --marquee-to 由 JS 按实际单遍宽度计算并写入 inline style，
   不能写死 -50% —— 广告数量少时单遍宽度不足以铺满视口。 */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-to, -50%)); }
}

/* 跑马灯内单项：实测 96×74 */
.mq-item {
  flex-shrink: 0;
  width: 96px;
  padding-right: var(--sd-s6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-s1);
  transition: transform var(--sd-dur) var(--sd-ease);
}
.mq-item:hover { transform: translateY(-3px); }

.mq-thumb {
  width: 48px;                                   /* 实测 48×48 */
  height: 48px;
  border-radius: var(--sd-r-sm);
  overflow: hidden;
  background: var(--sd-surface-2);
  position: relative;
}
.mq-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mq-item:hover .mq-thumb {
  outline: 2px solid var(--sd-brand);
  outline-offset: 2px;
}

.mq-cap {
  font-size: var(--sd-fs-micro);
  color: var(--text-3);
  transition: color var(--sd-dur) var(--sd-ease);
}
.mq-item:hover .mq-cap { color: var(--text); }

/* --------------------------------------------------------------------------
   滚动入场 — 元素进入视口时淡入上移
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s var(--sd-ease),
    transform .6s var(--sd-ease);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 交错延迟：让分区依次浮现 */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* 卡片内图片入场：轻微缩放回落 */
.pcard .pcard-pic img {
  transform: scale(1.04);
  opacity: .86;
  transition:
    transform .7s var(--sd-ease),
    opacity .7s var(--sd-ease);
}
.pcard.is-in .pcard-pic img { transform: none; opacity: 1; }

/* 榜单行入场 */
.rank-item {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .5s var(--sd-ease), transform .5s var(--sd-ease);
}
.rank-item.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Hero 轮播切换动画
   -------------------------------------------------------------------------- */
.rail-card {
  transition:
    width .45s var(--sd-ease),
    transform .45s var(--sd-ease),
    opacity .45s var(--sd-ease);
}

/* Hero 文本入场 */
.hero-label,
.hero-meta,
.hero-actions {
  opacity: 0;
  animation: hero-rise .8s var(--sd-ease) forwards;
}
/* .hero-title 双动画：hero-rise 入场（opacity/transform）+ brandSheen 鎏金流光（background-position，keyframes 在 components.css）。
   两者动画属性不重叠，可并行；brandSheen 延迟 .8s 等入场结束后再开始流动。 */
.hero-title {
  opacity: 0;
  animation:
    hero-rise .8s var(--sd-ease) .14s forwards,
    brandSheen 7s ease-in-out .8s infinite;
}
.hero-label  { animation-delay: .05s; }
.hero-meta   { animation-delay: .24s; }
.hero-actions { animation-delay: .34s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   数字滚动 — 热度值从 0 递增
   -------------------------------------------------------------------------- */
.num[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   加载态 — 页面骨架微光
   -------------------------------------------------------------------------- */
.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--sd-surface-2);
}
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   回到顶部 — 滚动 400px 后浮现
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 300;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-line);
  color: var(--text-2);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--sd-dur) var(--sd-ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--sd-surface-3); color: var(--sd-brand); border-color: var(--sd-brand); }

.to-top::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}

/* --------------------------------------------------------------------------
   复制/分享等轻提示
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  z-index: 400;
  padding: 10px 20px;
  border-radius: var(--sd-r-full);
  background: rgba(19, 20, 28, .96);
  border: 1px solid var(--sd-line);
  color: var(--text);
  font-size: var(--sd-fs-cap);
  white-space: nowrap;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: all .28s var(--sd-ease);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* --------------------------------------------------------------------------
   导航切换时 Header 收缩阴影
   -------------------------------------------------------------------------- */
.hdr {
  transition: box-shadow var(--sd-dur) var(--sd-ease),
              background var(--sd-dur) var(--sd-ease);
}
.hdr.is-stuck {
  background: rgba(11, 12, 18, .98);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

/* 顶部进度条（滚动阅读进度，实测目标站常见） */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sd-brand), var(--sd-gold-deep));
  z-index: 500;
  width: 0;
  transition: width .1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .pcard .pcard-pic img { transform: none; opacity: 1; }
  .rank-item { opacity: 1; transform: none; }
  /* Hero 入场即时显示（同时停掉 brandSheen 鎏金流光；::after 流光由 firstscreen.css 同名块隐藏） */
  .hero-label, .hero-title, .hero-meta, .hero-actions { animation: none; opacity: 1; transform: none; }
}