/* =====================================================================
   effects.css — 关键帧 / 卡片 stagger / 金色脉冲 / 轮播 / 跑马灯 /
   下拉刷新 / 数字滚动 / prefers-reduced-motion
   ===================================================================== */
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes page-in-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes page-pop { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes btn-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes btn-sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes stripes { from { background-position: 0 0; } to { background-position: 24px 0; } }
@keyframes glow-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } }
@keyframes shimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes orb-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, 40px) scale(1.15); } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes ring-out { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-14px) scale(.95); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes modal-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes modal-out { to { opacity: 0; transform: scale(.9); } }
@keyframes gold-pulse { 0%, 100% { text-shadow: 0 0 6px rgba(245, 185, 66, .35); transform: scale(1); } 50% { text-shadow: 0 0 18px rgba(245, 185, 66, .95), 0 0 32px rgba(245, 185, 66, .45); transform: scale(1.04); } }
@keyframes gold-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 185, 66, .35); } 50% { box-shadow: 0 0 0 6px rgba(245, 185, 66, 0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cap-progress { from { width: 0; } to { width: 100%; } }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- 卡片 stagger 进入 ---------- */
.stagger > * { animation: fade-up .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.fade-up { animation: fade-up .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.shake { animation: shake .5s both; }
.bump { animation: bump .4s var(--spring); }

/* ---------- 盈利金色脉冲 ---------- */
.gold-pulse { display: inline-block; color: var(--gold); animation: gold-pulse 1.8s ease-in-out infinite; }
.gold-ring { animation: gold-ring 1.8s ease-in-out infinite; }

/* ---------- 轮播：自动播放 + 指示点 + 手势 ---------- */
.carousel { position: relative; aspect-ratio: 2 / 1; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px; background: var(--glass); box-shadow: var(--shadow); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.carousel .slides { position: absolute; inset: 0; }
.carousel .slide { position: absolute; inset: 0; display: block; transform: translate3d(calc(var(--off, 0) * 100%), 0, 0); transition: transform var(--dur, .6s) var(--ease); will-change: transform; }
.carousel.dragging .slide { transition: none; }
.carousel .slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.carousel .slide-ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--grad); color: rgba(255, 255, 255, .85); font-weight: 800; font-size: 18px; letter-spacing: 2px; }
.carousel .slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(5, 8, 20, .75)); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.carousel .slide.cur .slide-cap { animation: fade-up .6s var(--ease) both; }
.carousel .dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; z-index: 3; }
.carousel .dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .4); transition: all .3s var(--ease); }
.carousel .dot.on { width: 18px; background: #fff; box-shadow: 0 0 8px rgba(0, 210, 255, .9); }
.carousel .progress-line { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; z-index: 3; }
.carousel .progress-line i { display: block; height: 100%; width: 0; background: var(--grad); }
.carousel .progress-line i.run { animation: cap-progress var(--interval, 4.5s) linear; }

/* ---------- 公告跑马灯 ---------- */
.marquee { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; margin-bottom: 12px; border-radius: 10px; background: rgba(245, 185, 66, .08); border: 1px solid rgba(245, 185, 66, .22); font-size: 12.5px; color: #FBE2A3; overflow: hidden; }
.marquee .mq-ic { width: 16px; height: 16px; flex: none; color: var(--gold); animation: pulse-dot 1.6s ease-in-out infinite; }
.marquee .mq-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee .mq-in { display: inline-flex; gap: 48px; white-space: nowrap; padding-right: 48px; animation: marquee var(--mq-dur, 18s) linear infinite; will-change: transform; }
.marquee.paused .mq-in { animation-play-state: paused; }

/* ---------- 下拉刷新 ---------- */
.ptr { position: fixed; left: 50%; top: calc(var(--top-h) + var(--safe-t) - 44px); transform: translateX(-50%); z-index: 39; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(20, 26, 51, .95); border: 1px solid var(--line-2); font-size: 12px; color: var(--muted); box-shadow: var(--shadow); opacity: 0; transition: top .25s var(--ease), opacity .25s; pointer-events: none; }
.ptr.show { top: calc(var(--top-h) + var(--safe-t) + 10px); opacity: 1; }
.ptr-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--p2); transform: rotate(var(--rot, 0deg)); }
.ptr.loading .ptr-ring { animation: ptr-spin .8s linear infinite; }

/* ---------- 数字滚动容器 ---------- */
.roll { display: inline-block; transition: color .3s; }
.roll.up { animation: bump .45s var(--spring); }

/* ---------- 运行中光晕（卡片边缘呼吸） ---------- */
.card.live { box-shadow: var(--shadow), 0 0 0 1px rgba(34, 197, 94, .25); }
.card.live::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 22px rgba(34, 197, 94, .25); animation: blink 2.2s ease-in-out infinite; }

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn-primary, .btn-gold, .tag.hot { animation: none !important; background-position: 0 0 !important; }
  .btn-primary::after, .progress .bar::after, .card.live::after { display: none !important; }
  .bg-orbs i, .marquee .mq-in, .progress .dot, .gold-pulse, .live-dot, .live-dot::after { animation: none !important; }
  .stagger > *, .fade-up, .page { animation: none !important; opacity: 1 !important; transform: none !important; }
}