/*
 * 首页大图（通栏横幅）：左右两个大人物 + 6 个卡片位（从作品池轮流替换）+ 背后光晕 + 光点，标语居中。
 * 关闭方法：把 js/data.js 里的 PM.HERO_ANIM 改成 false（恢复原来左文右图的整张图），
 * 不再需要时可删除本文件、index.html 里引用它的那一行，以及 assets/hero/ 目录。
 */
.v2-featured.wide-hero { position: relative; background: radial-gradient(ellipse 40% 90% at 12% 50%, #43200b 0, transparent 70%), radial-gradient(ellipse 40% 90% at 88% 50%, #43200b 0, transparent 70%), linear-gradient(100deg, #170d07, #1e1109 50%, #170d07); }
.wide-hero .v2-feat-art { background: none; }
.wide-hero .v2-feat-copy { position: relative; z-index: 2; align-items: center; text-align: center; }
.wide-hero .v2-chip-label { align-self: center; }
.wide-hero .v2-feat-copy .actions, .wide-hero .v2-feat-copy .app-links { justify-content: center; }

.hero-stage { position: absolute; inset: 0; overflow: hidden; container-type: size; --mx: 0; --my: 0; }
/* 覆盖原来大图 img 的全屏铺满样式 */
.v2-feat-art .hero-stage img.hs-layer { inset: auto; width: auto; height: auto; max-width: none; object-fit: contain; }
.v2-feat-art .hero-stage .hs-layer { position: absolute; user-select: none; pointer-events: none; transition: translate .5s cubic-bezier(.16, 1, .3, 1); }

/* 两侧人物背后的光晕：缓慢呼吸 */
.v2-feat-art .hero-stage .hs-glow { inset: -10%; translate: calc(var(--mx) * 4px) calc(var(--my) * 3px);
  background: radial-gradient(circle at 16% 52%, #ff7a1a5c 0, #ff5a0026 16%, transparent 34%), radial-gradient(circle at 84% 52%, #ff7a1a5c 0, #ff5a0026 16%, transparent 34%), radial-gradient(circle at 50% 95%, #ff6a1a1c 0, transparent 30%);
  animation: hsGlow 5.5s ease-in-out infinite alternate; }
@keyframes hsGlow { from { opacity: .65; transform: scale(.95); } to { opacity: 1; transform: scale(1.05); } }

/* 标语背后很淡的暗角，保证文字清楚 */
.v2-feat-art .hero-stage .hs-veil { inset: 0; background: radial-gradient(ellipse 27% 48% at 50% 50%, #0e0805b3 0, #0e080559 45%, transparent 75%); }

/* 上升的光点 */
.v2-feat-art .hero-stage .hs-dots { inset: 0; }
.v2-feat-art .hero-stage .hs-dots i { position: absolute; left: var(--x); bottom: -4%; width: var(--s); height: var(--s); border-radius: 50%; background: #ffb35c; box-shadow: 0 0 6px 1px #ff8a2a; opacity: 0; animation: hsRise var(--d) linear infinite; animation-delay: var(--l); }
@keyframes hsRise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 80% { opacity: .5; } 100% { opacity: 0; transform: translateY(-105cqh); } }

/* 左右人物：贴底，轻微呼吸，鼠标移动时轻微视差 */
.v2-feat-art .hero-stage img.hs-char { height: 88cqh; bottom: -6cqh; filter: drop-shadow(0 16px 28px #000a); animation: hsBreath 6s ease-in-out infinite; }
.v2-feat-art .hero-stage img.hs-left { scale: -1 1; /* 水平镜像，让两人相对 */ left: -3%; translate: calc(var(--mx) * 7px) calc(var(--my) * 4px); }
.v2-feat-art .hero-stage img.hs-right { height: 84cqh; right: -2%; translate: calc(var(--mx) * 7px) calc(var(--my) * 4px); animation-delay: -3s; }
@keyframes hsBreath { 50% { transform: translateY(-1.6cqh); } }

/* 卡片：各自节奏漂浮、轻微摆动；后排两张更小更虚并缓慢横向漂移 */
.v2-feat-art .hero-stage img.hs-card { transform: rotate(var(--r)); animation: hsFloat var(--fd) ease-in-out infinite; animation-delay: var(--fl); filter: drop-shadow(0 14px 22px #000b); }
@keyframes hsFloat { 50% { transform: translateY(-4.5cqh) rotate(calc(var(--r) + 2.5deg)); } }
@keyframes hsDrift { 25% { transform: translate(2cqh, -3cqh) rotate(calc(var(--r) + 2deg)); } 50% { transform: translate(5cqh, -1cqh) rotate(var(--r)); } 75% { transform: translate(2cqh, 2cqh) rotate(calc(var(--r) - 2deg)); } }
/* 卡片位（电脑）：以标语为中心（50% = 横幅中线，cqh = 横幅高度的 1%），大小、角度、高低都错开
   前排 1–8（同时显示 6 张）；后排 9–11（同时显示 2 张，虚化半透明，压在标语文字后面） */
.v2-feat-art .hero-stage img.hs-p1 { height: 31cqh; left: calc(50% - 200px - 26cqh); top: 4%; --r: -11deg; --fd: 6.2s; --fl: -1s; }
.v2-feat-art .hero-stage img.hs-p2 { height: 23cqh; left: calc(50% - 340px - 19cqh); top: 38%; --r: 7deg; --fd: 7.4s; --fl: -4s; }
.v2-feat-art .hero-stage img.hs-p3 { height: 27cqh; left: calc(50% - 215px - 23cqh); top: 63%; --r: 10deg; --fd: 6.8s; --fl: -2s; }
.v2-feat-art .hero-stage img.hs-p4 { height: 27cqh; right: calc(50% - 235px - 23cqh); top: 9%; --r: 8deg; --fd: 7.2s; --fl: -5s; }
.v2-feat-art .hero-stage img.hs-p5 { height: 31cqh; right: calc(50% - 200px - 26cqh); top: 52%; --r: -9deg; --fd: 5.6s; --fl: -3s; }
.v2-feat-art .hero-stage img.hs-p6 { height: 22cqh; right: calc(50% - 350px - 19cqh); top: 40%; --r: -5deg; --fd: 8.2s; --fl: -6s; }
.v2-feat-art .hero-stage img.hs-p7 { height: 22cqh; left: calc(50% - 345px - 19cqh); top: 72%; --r: -7deg; --fd: 7.8s; --fl: -2.5s; }
.v2-feat-art .hero-stage img.hs-p8 { height: 21cqh; right: calc(50% - 355px - 18cqh); top: 76%; --r: 12deg; --fd: 8.6s; --fl: -7s; }
.v2-feat-art .hero-stage img.hs-p1, .v2-feat-art .hero-stage img.hs-p3, .v2-feat-art .hero-stage img.hs-p4, .v2-feat-art .hero-stage img.hs-p5 { translate: calc(var(--mx) * 16px) calc(var(--my) * 10px); }
.v2-feat-art .hero-stage img.hs-p2, .v2-feat-art .hero-stage img.hs-p6, .v2-feat-art .hero-stage img.hs-p7, .v2-feat-art .hero-stage img.hs-p8 { translate: calc(var(--mx) * 11px) calc(var(--my) * 7px); }
.v2-feat-art .hero-stage img.hs-p9, .v2-feat-art .hero-stage img.hs-p10, .v2-feat-art .hero-stage img.hs-p11 { opacity: .42; filter: blur(2.4px) brightness(.75); animation-name: hsDrift; translate: calc(var(--mx) * -8px) calc(var(--my) * -5px); }
.v2-feat-art .hero-stage img.hs-p9 { height: 24cqh; left: calc(50% - 150px); top: 1%; --r: -12deg; --fd: 9s; --fl: -2s; }
.v2-feat-art .hero-stage img.hs-p10 { height: 22cqh; right: calc(50% - 170px); bottom: 2%; --r: 10deg; --fd: 9.6s; --fl: -5s; }
.v2-feat-art .hero-stage img.hs-p11 { height: 20cqh; right: calc(50% - 175px); top: 30%; --r: 14deg; --fd: 10s; --fl: -7s; }

@media (min-width: 1101px) {
  .v2-featured.wide-hero { display: block; min-height: 440px; }
  .wide-hero .v2-feat-art { position: absolute; inset: 0; min-height: 0; }
  .wide-hero .v2-feat-copy { max-width: 600px; min-height: 440px; margin: 0 auto; padding: 48px 24px; }
}
@media (max-width: 1100px) {
  /* 上下排列：图在上，底部渐隐进文字区域 */
  .wide-hero .hero-stage { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .wide-hero .v2-feat-copy { margin-top: -18px; }
  .v2-feat-art .hero-stage .hs-veil { display: none; }
  .v2-feat-art .hero-stage img.hs-char { height: 112cqh; bottom: -14cqh; }
  .v2-feat-art .hero-stage img.hs-left { left: -3%; }
  .v2-feat-art .hero-stage img.hs-right { right: -2%; }
  .v2-feat-art .hero-stage img.hs-p1 { height: 46cqh; left: 34%; top: 6%; }
  .v2-feat-art .hero-stage img.hs-p5 { height: 42cqh; left: auto; right: 33%; top: 42%; }
  .v2-feat-art .hero-stage img.hs-p2, .v2-feat-art .hero-stage img.hs-p3, .v2-feat-art .hero-stage img.hs-p4, .v2-feat-art .hero-stage img.hs-p6, .v2-feat-art .hero-stage img.hs-p7, .v2-feat-art .hero-stage img.hs-p8, .v2-feat-art .hero-stage img.hs-p11 { display: none; }
  .v2-feat-art .hero-stage img.hs-p9 { height: 24cqh; left: 27%; top: 56%; }
  .v2-feat-art .hero-stage img.hs-p10 { height: 24cqh; right: 28%; bottom: auto; top: 4%; }
}
@media (prefers-reduced-motion: reduce) { .hero-stage * { animation: none !important; transition: none !important; } }


/* 卡片轮换：旧卡片缓慢淡出缩小 → 看不见时换图换位置 → 在新位置缓慢浮现 */
.v2-feat-art .hero-stage img.hs-card { transition: translate .5s cubic-bezier(.16, 1, .3, 1), opacity .8s cubic-bezier(.4, 0, .2, 1), scale .8s cubic-bezier(.4, 0, .2, 1); }
.v2-feat-art .hero-stage img.hs-card.hs-out { opacity: 0 !important; scale: .8; }
.v2-feat-art .hero-stage img.hs-card.hs-in { opacity: 0 !important; scale: .8; transition: none; }

/* 电脑上前排卡片的位置由 js（heroArrange）按人物与标语之间的实际空隙计算后写在行内样式里；放不下的卡片位隐藏 */
.v2-feat-art .hero-stage img.hs-card.hs-off { display: none; }