/* ===== 消费冲动 & 动效组件（多来源参考，非纯拼多多）===== */

/* 渐变肌理背景（替代纯色块）——柔和不土 */
.bg-warm{background:
  radial-gradient(circle at 15% 0%,rgba(235,192,120,.18),transparent 40%),
  radial-gradient(circle at 90% 12%,rgba(95,160,214,.12),transparent 45%),
  var(--paper)}
.bg-mesh{background:
  radial-gradient(circle at 20% 20%,rgba(95,160,214,.10),transparent 42%),
  radial-gradient(circle at 85% 60%,rgba(63,122,99,.08),transparent 45%),
  var(--paper)}

/* ===== 高级质感背景库（替代纯色块）===== */
/* 极光 mesh 渐变（多光晕柔和融合，不再是一坨死色）*/
.mesh-red{background:
  radial-gradient(circle at 12% 18%,#FF7E54,transparent 55%),
  radial-gradient(circle at 88% 12%,#FFB25A,transparent 50%),
  radial-gradient(circle at 78% 92%,#C4342A,transparent 55%),
  linear-gradient(135deg,#E8552E,#C4342A)}
.mesh-gold{background:
  radial-gradient(circle at 15% 20%,#FFE39A,transparent 55%),
  radial-gradient(circle at 85% 80%,#E8A23C,transparent 55%),
  linear-gradient(135deg,#F5C468,#D98A2B)}
.mesh-dark{background:
  radial-gradient(circle at 18% 15%,#4a4436,transparent 55%),
  radial-gradient(circle at 82% 85%,#2b2620,transparent 55%),
  radial-gradient(circle at 90% 10%,rgba(235,192,120,.35),transparent 45%),
  linear-gradient(150deg,#3a352b,#211d17)}
.mesh-green{background:
  radial-gradient(circle at 15% 18%,#6FBF9A,transparent 55%),
  radial-gradient(circle at 85% 82%,#2f5040,transparent 55%),
  linear-gradient(140deg,#3F7A63,#2a4636)}
/* 噪点颗粒层（叠加提升质感，加在 ::after）*/
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 光泽斜切高光（玻璃质感）*/
.gloss::before{content:"";position:absolute;top:0;left:0;right:0;height:55%;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.28),transparent);border-radius:inherit}

/* 价格滚降数字 */
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
@keyframes priceDrop{
  0%{transform:translateY(0);opacity:1}
  40%{transform:translateY(-100%);opacity:0}
  60%{transform:translateY(100%);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
.price-drop{animation:priceDrop .8s cubic-bezier(.4,0,.2,1)}

/* 到手价高亮跳动 */
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.14)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.pop{animation:pop .6s ease}

/* 光泽扫过（按钮/徽章高级感，来自 Apple/Stripe 手法）*/
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:shine 2.6s ease-in-out infinite}
@keyframes shine{0%{left:-60%}55%{left:130%}100%{left:130%}}

/* CTA 呼吸（引导点击，克制版）*/
@keyframes breath{0%,100%{box-shadow:0 8px 22px rgba(63,181,90,.35)}50%{box-shadow:0 8px 30px rgba(63,181,90,.6)}}
.breath{animation:breath 2s ease-in-out infinite}

/* 数字持续缩放浮动（稍微变大变小的呼吸感）*/
@keyframes floatScale{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.float-num{display:inline-block;animation:floatScale 1.6s ease-in-out infinite;transform-origin:center}

/* 价格数字微跳（吸引注意，比floatScale克制）*/
@keyframes throb{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.throb{display:inline-block;animation:throb 1.3s ease-in-out infinite;transform-origin:left center}
/* CTA按钮脉冲（外扩光圈+轻微放大）*/
@keyframes throbBtn{0%,100%{transform:scale(1);box-shadow:0 8px 20px rgba(212,71,46,.4)}50%{transform:scale(1.025);box-shadow:0 10px 28px rgba(212,71,46,.6)}}
.throb-btn{animation:throbBtn 1.5s ease-in-out infinite}
/* 进度条流光 */
@keyframes barFlow{0%{background-position:-120px 0}100%{background-position:120px 0}}

/* 整块模块浮动缩放（卡片整体缓缓呼吸）*/
@keyframes floaty{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.02) translateY(-3px)}}
.floaty{animation:floaty 3.2s ease-in-out infinite}
.floaty:nth-of-type(even){animation-delay:.5s}

/* 实时滚动播报（马蜂窝/飞猪式热度感）*/
.ticker{overflow:hidden;height:30px;position:relative}
.ticker-inner{position:absolute;width:100%;animation:tickup 9s linear infinite}
.ticker-item{height:30px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--stone)}
.ticker-item i{width:6px;height:6px;border-radius:50%;background:#3FB55A;flex-shrink:0;font-style:normal}
@keyframes tickup{0%,12%{transform:translateY(0)}
  25%,37%{transform:translateY(-30px)}
  50%,62%{transform:translateY(-60px)}
  75%,87%{transform:translateY(-90px)}
  100%{transform:translateY(-120px)}}

/* 首页利益跑马灯 */
.hot-bar{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#FFF1E0,#FFE6CC);border:1px solid #FFD9B0;border-radius:12px;padding:0 12px;margin:2px 0 12px;overflow:hidden}
.hb-fire{font-size:16px;flex-shrink:0}
.hot-bar .ticker{flex:1}
.hot-bar .ticker-item{color:#8a4b00;font-weight:600}
.hot-bar .ticker-item b{color:#D4472E;font-weight:900;padding:0 2px}

/* 首页 0 元领券大钩子 */
.grab-card{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#FF6B45,#D4472E);border-radius:18px;padding:14px 16px;margin-bottom:16px;box-shadow:0 10px 26px rgba(212,71,46,.35);cursor:pointer}
.gc-l{color:#fff}
.gc-tag{display:inline-block;background:rgba(255,255,255,.22);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px}
.gc-big{color:#fff;font-weight:900;margin:5px 0 3px;line-height:1}
.gc-big .pop{font-size:38px}
.gc-yen{font-size:20px;vertical-align:super;margin-right:1px}
.gc-unit{font-size:15px;font-weight:800;margin-left:2px}
.gc-sub{color:rgba(255,255,255,.92);font-size:12px;font-weight:600}
.gc-btn{background:#fff;color:#D4472E;font-size:16px;font-weight:900;padding:11px 16px;border-radius:24px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* 天降红包/领券到账（加社群爽感）*/
@keyframes dropIn{0%{transform:translateY(-40px) scale(.6);opacity:0}60%{transform:translateY(6px) scale(1.05);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.drop-in{animation:dropIn .7s cubic-bezier(.34,1.56,.64,1)}

/* 成团进度条 */
.progress{height:8px;border-radius:5px;background:#EDE6D8;overflow:hidden;position:relative}
.progress>i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#F2BE6D,#E8734A);animation:fill 1.2s ease forwards;font-style:normal}
@keyframes fill{from{width:0}to{width:var(--pct,70%)}}

/* 倒计时数字块 */
.cd{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.cd b{background:#20242A;color:#fff;font-size:13px;font-weight:800;padding:2px 6px;border-radius:5px;min-width:24px;text-align:center}
.cd span{color:#20242A;font-weight:700}

/* 拼多多式红包弹窗 */
.rb-mask{position:absolute;inset:0;background:rgba(20,15,10,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;visibility:hidden;transition:.28s}
.rb-mask.show{opacity:1;visibility:visible}
.rb-modal{width:300px;background:linear-gradient(180deg,#E8734A 0%,#D4472E 60%,#fff 60%,#fff 100%);border-radius:24px;padding:20px 22px 24px;position:relative;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.rb-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:220px;height:220px;background:radial-gradient(circle,rgba(255,220,150,.5),transparent 65%);pointer-events:none}
.rb-close{position:absolute;top:12px;right:14px;color:rgba(255,255,255,.85);font-size:18px;cursor:pointer;z-index:2}
.rb-ip{width:64px;height:64px;margin:4px auto 0;background:#fff;border-radius:50%;position:relative;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.rb-title{color:#fff;font-size:15px;font-weight:700;margin-top:10px;position:relative;z-index:2}
.rb-big{color:#fff;font-weight:900;position:relative;z-index:2;margin:6px 0 2px;line-height:1}
.rb-big span:last-child{font-size:64px}
.rb-yen{font-size:28px;vertical-align:super;margin-right:2px}
.rb-desc{color:rgba(255,255,255,.9);font-size:12px;position:relative;z-index:2;padding-bottom:22px}
.rb-cd{color:var(--red);font-size:13px;font-weight:700;margin-top:16px}
.rb-btn{width:100%;margin-top:12px;background:linear-gradient(135deg,#FFD98A,#F0A93C);color:#7a3a10;border:none;border-radius:26px;padding:15px;font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(240,169,60,.45)}
.rb-skip{margin-top:12px;color:var(--stone);font-size:13px;cursor:pointer}

/* 路线详情 · 专属优惠弹窗 */
.deal-modal{width:308px;background:#fff;border-radius:24px;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.deal-head{background:linear-gradient(180deg,#E8734A,#D4472E);padding:20px 20px 26px;text-align:center;position:relative}
.deal-ip{width:52px;height:52px;margin:0 auto;background:#fff;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.deal-hd{color:#fff;font-size:19px;font-weight:900;margin-top:8px;letter-spacing:1px}
.deal-sub{color:rgba(255,255,255,.9);font-size:12px;margin-top:3px}
/* 大金额区（拼多多式立减冲击） */
.deal-amt{background:linear-gradient(180deg,#FFF6E0,#FFE8B8);margin:0;padding:14px 20px 16px;text-align:center;position:relative}
.da-label{color:#B8500A;font-size:13px;font-weight:800;letter-spacing:1px}
.da-big{color:#D4472E;font-weight:900;line-height:1;margin:2px 0}
.da-yen{font-size:30px;vertical-align:super;margin-right:2px}
.da-num{font-size:68px;text-shadow:0 3px 0 rgba(212,71,46,.18)}
.da-strike{color:#9a6a2a;font-size:12px;font-weight:700;margin-top:4px}
.deal-body{padding:14px 20px 20px}
.deal-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;color:#3a3a3a;border-bottom:1px dashed #eee}
.deal-row b{font-weight:800}
.deal-x{color:#9a9a9a;text-decoration:line-through;font-weight:600}
.deal-row.hot{color:#D4472E}.deal-row.hot b{font-size:20px}
.deal-row.vip{color:#B87309}.deal-row.vip b{font-size:16px}
.deal-cd{color:#D4472E;font-size:13px;font-weight:700;text-align:center;margin-top:12px;font-variant-numeric:tabular-nums}
.deal-arrow{color:#D4472E;font-size:14px;font-weight:800;text-align:center;margin-top:12px;animation:arrowBob 1s ease-in-out infinite}
@keyframes arrowBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.deal-cta{width:100%;margin-top:8px;background:linear-gradient(135deg,#FF5A3C,#D4472E);color:#fff;border:none;border-radius:28px;padding:16px;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(212,71,46,.45);position:relative}
.dc-hand{position:absolute;right:26px;top:-6px;font-size:22px;animation:handTap 1s ease-in-out infinite}
@keyframes handTap{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-8deg)}}
.deal-note{margin-top:10px;color:#9a9a9a;font-size:11px;text-align:center;line-height:1.5}
/* 弹窗弹出动效（拼多多式回弹） */
.pop-in{animation:popIn .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

/* 解锁成功红包 */
.redbag{width:230px;margin:6px auto 4px;background:linear-gradient(160deg,#E8734A,#D4472E);border-radius:18px;padding:18px;color:#fff;box-shadow:0 12px 28px rgba(196,86,47,.4)}
.rb-top{font-size:13px;opacity:.9}
.rb-amt{font-size:46px;font-weight:900;line-height:1.1;margin:4px 0}
.rb-sub{font-size:12px;opacity:.9}