/* ==========================================================================
   telebirr 积分 H5 —— 动效层
   原则：只用 transform / opacity，不触发重排；prefers-reduced-motion 时全关。
   所有插图都是内联 SVG，零依赖、零额外请求。
   ========================================================================== */

/* ---------------------------- 全局入场编排 ---------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.86); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* 主页面进入时，卡片依次浮起（阶梯延迟） */
#view-main.active .stagger > * {
  animation: fadeUp .46s cubic-bezier(.22, 1, .36, 1) both;
}
#view-main.active .stagger > *:nth-child(1) { animation-delay: .02s; }
#view-main.active .stagger > *:nth-child(2) { animation-delay: .08s; }
#view-main.active .stagger > *:nth-child(3) { animation-delay: .14s; }
#view-main.active .stagger > *:nth-child(4) { animation-delay: .20s; }
#view-main.active .stagger > *:nth-child(5) { animation-delay: .26s; }
#view-main.active .stagger > *:nth-child(6) { animation-delay: .32s; }

/* ---------------------------- 登录页插图 ---------------------------- */
.login-art {
  position: relative;
  width: 200px; height: 200px;
  margin: 0 auto 6px;
}
.login-art svg { width: 100%; height: 100%; display: block; }

/* 金币缓慢上浮 */
@keyframes coinFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-9px) rotate(3deg); }
}
.coin-1 { animation: coinFloat 3.6s ease-in-out infinite; transform-origin: center; }
.coin-2 { animation: coinFloat 4.4s ease-in-out infinite .6s; transform-origin: center; }
.coin-3 { animation: coinFloat 3.9s ease-in-out infinite 1.2s; transform-origin: center; }

/* 光圈呼吸 */
@keyframes haloPulse {
  0%, 100% { transform: scale(1);    opacity: .5; }
  50%      { transform: scale(1.10); opacity: .22; }
}
.art-halo { animation: haloPulse 4.2s ease-in-out infinite; transform-origin: center; }

/* 手机轻微摆动 */
@keyframes phoneIdle {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
.art-phone { animation: phoneIdle 3.2s ease-in-out infinite; transform-origin: 50% 80%; }

/* 闪光扫过 */
@keyframes sparkle {
  0%, 70%, 100% { opacity: 0; transform: scale(.6); }
  80%           { opacity: 1; transform: scale(1.15); }
  90%           { opacity: .4; transform: scale(.9); }
}
.spark-1 { animation: sparkle 3.4s ease-in-out infinite; }
.spark-2 { animation: sparkle 3.4s ease-in-out infinite 1.7s; }

/* logo 光晕呼吸 */
.brand-mark { position: relative; }
.brand-mark::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 34px;
  background: radial-gradient(circle, rgba(148, 200, 74, .45) 0%, rgba(148, 200, 74, 0) 70%);
  animation: haloPulse 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* 登录按钮：一层缓缓移动的光 */
.btn.primary.lg {
  position: relative;
  overflow: hidden;
}
.btn.primary.lg::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 100%);
  animation: shine 3.4s ease-in-out infinite;
}
@keyframes shine {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}

/* ---------------------------- 余额卡数字滚动 ---------------------------- */
.hero-balance {
  display: inline-block;
  transform-origin: left center;
}
.hero-balance.bump {
  animation: numberBump .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes numberBump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.11); }
  100% { transform: scale(1); }
}

/* 余额卡缓慢流光 */
.hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.30) 48%, rgba(255,255,255,0) 66%);
  background-size: 260% 100%;
  animation: heroSweep 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroSweep {
  0%        { background-position: 140% 0; }
  55%, 100% { background-position: -60% 0; }
}

/* 入场时数字从 0 涨上来（JS 驱动 textContent，这里只管出现） */
.hero-balance.counting { opacity: .92; }

/* ---------------------------- 摇一摇增强 ---------------------------- */
/* 摇动时向外扩散的波纹 */
.phone-wrap { position: relative; display: inline-block; }
.shake-ripple {
  position: absolute; left: 50%; top: 50%;
  width: 118px; height: 118px;
  margin: -59px 0 0 -59px;
  border-radius: 50%;
  border: 2px solid rgba(148, 200, 74, .75);
  opacity: 0; pointer-events: none;
}
.shake-ripple.go { animation: rippleOut .78s ease-out; }
@keyframes rippleOut {
  0%   { opacity: .85; transform: scale(.55); }
  100% { opacity: 0;   transform: scale(1.9); }
}

/* 奖励数字上浮飘走 */
#shake-reward {
  position: relative;
  font-style: normal; font-size: 20px; font-weight: 800;
  color: var(--brand-deep);
  opacity: 0;
}
#shake-reward.show { animation: rewardFly 1.05s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rewardFly {
  0%   { opacity: 0; transform: translateY(10px) scale(.8); }
  28%  { opacity: 1; transform: translateY(-4px) scale(1.18); }
  100% { opacity: 0; transform: translateY(-38px) scale(1); }
}

/* 次数用完时，手机灰掉 */
.phone.exhausted {
  filter: grayscale(.72);
  opacity: .58;
  border-color: var(--line);
}

/* 手机待机轻晃，提示可以点 */
.phone:not(.shaking):not(.exhausted) {
  animation: phoneIdle 4.2s ease-in-out infinite;
}

/* ---------------------------- 买积分卡片 ---------------------------- */
.pkg { animation: popIn .42s cubic-bezier(.22, 1, .36, 1) both; }
.pkg:nth-child(1) { animation-delay: .04s; }
.pkg:nth-child(2) { animation-delay: .10s; }
.pkg:nth-child(3) { animation-delay: .16s; }
.pkg:nth-child(4) { animation-delay: .22s; }

/* 「最超值」角标呼吸 */
.pkg-badge { animation: badgePulse 2.2s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 3px 8px rgba(240, 118, 42, .35); }
  50%      { transform: scale(1.07); box-shadow: 0 5px 14px rgba(240, 118, 42, .55); }
}

/* 按压回弹 */
.pkg:active { transform: scale(.965); }

/* 购买成功时卡片闪一下 */
.pkg.bought { animation: boughtFlash .9s ease-out; }
@keyframes boughtFlash {
  0%   { background: var(--brand-soft); box-shadow: 0 0 0 0 rgba(148, 200, 74, .6); }
  35%  { background: #e8f7cd; box-shadow: 0 0 0 10px rgba(148, 200, 74, 0); }
  100% { background: var(--card-2); box-shadow: 0 0 0 0 rgba(148, 200, 74, 0); }
}

/* ---------------------------- 会员列表 ---------------------------- */
.tier-row { animation: slideRight .4s cubic-bezier(.22, 1, .36, 1) both; }
.tier-row:nth-child(1) { animation-delay: .04s; }
.tier-row:nth-child(2) { animation-delay: .10s; }
.tier-row:nth-child(3) { animation-delay: .16s; }

/* 当前会员的奖牌轻轻跳 */
.tier-row.current .medal { animation: medalBounce 2.4s ease-in-out infinite; }
@keyframes medalBounce {
  0%, 62%, 100% { transform: translateY(0) rotate(0); }
  72%           { transform: translateY(-4px) rotate(-6deg); }
  82%           { transform: translateY(0) rotate(5deg); }
}

/* 开通会员时整行高亮扩散 */
.tier-row.just-bought { animation: tierGlow 1.1s ease-out; }
@keyframes tierGlow {
  0%   { box-shadow: 0 0 0 0 rgba(148, 200, 74, .65); }
  100% { box-shadow: 0 0 0 14px rgba(148, 200, 74, 0); }
}

/* ---------------------------- 兑换列表 ---------------------------- */
.item-row { animation: fadeUp .4s cubic-bezier(.22, 1, .36, 1) both; }
.item-row:nth-child(1) { animation-delay: .04s; }
.item-row:nth-child(2) { animation-delay: .10s; }
.item-row:nth-child(3) { animation-delay: .16s; }
.item-row:nth-child(4) { animation-delay: .22s; }

.item-icon { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.item-row:active .item-icon { transform: scale(1.14) rotate(-6deg); }

/* 兑换成功：整行闪绿 */
.item-row.done { animation: rowDone .95s ease-out; }
@keyframes rowDone {
  0%   { border-color: var(--brand); background: #eaf7d2; }
  100% { border-color: var(--line);   background: var(--card-2); }
}

/* ---------------------------- 进度条流动 ---------------------------- */
.progress-bar { position: relative; overflow: hidden; }
.progress-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  background-size: 60% 100%;
  animation: barFlow 1.8s linear infinite;
}
@keyframes barFlow {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

/* ---------------------------- 数字键盘/输入反馈 ---------------------------- */
.input-wrap { transition: border-color .22s, box-shadow .22s, background .22s, transform .18s; }
.input-wrap:focus-within { transform: translateY(-1px); }

/* ---------------------------- 底部气泡装饰 ---------------------------- */
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(12px, -14px) scale(1.06); }
  66%      { transform: translate(-10px, 8px) scale(.96); }
}

/* ---------------------------- 无障碍：尊重系统设置 ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}