/* ============================================================
   灯塔志愿 · 畅问卡开通交互视觉系统 v1
   品牌：学院墨绿 #071a12~#247350 · 香槟金 #f0e0b6/#d4af6a
   动效原则：仅 transform / opacity / 颜色；状态过渡 0.3–0.5s
   ============================================================ */

/* ---------------- 1. 卡片悬停（交互元素①：悬停引导） ---------------- */
#vipCard {
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease, border-color .35s ease;
}
#vipCard:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 24px 56px rgba(201,164,92,.32);
}

/* ---------------- 2. 开通按钮 ---------------- */
.vip-buy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vip-buy:disabled { cursor: default; opacity: 1; }

/* 光泽扫过（交互元素②：悬停光泽） */
.vip-shine {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%);
}
.vip-buy:not(:disabled):hover .vip-shine,
.vip-buy:focus-visible .vip-shine {
  transform: translateX(130%);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* 点击涟漪（交互元素③：点击反馈，JS 注入 .vip-ripple） */
.vip-ripple {
  position: absolute; z-index: 2;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  pointer-events: none;
  animation: vipRipple .5s ease-out forwards;
}
@keyframes vipRipple {
  to { transform: scale(2.2); opacity: 0; }
}

/* ---------------- 3. 按钮四态（交互元素④：状态滑动过渡） ---------------- */
.vip-state {
  position: absolute; inset: 0; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s cubic-bezier(.22,.61,.36,1),
              transform .35s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.vip-state.is-active { opacity: 1; transform: translateY(0); }

/* 开通中 · spinner */
.vip-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2.5px solid rgba(61,46,16,.25);
  border-top-color: #3d2e10;
  border-radius: 50%;
  animation: vipSpin .5s linear infinite;
}
@keyframes vipSpin { to { transform: rotate(360deg); } }

/* 按钮态配色（由 JS 写 data-state） */
.vip-buy[data-state="processing"] {
  background: linear-gradient(135deg,#e8d9ac,#d3b97d);
}
.vip-buy[data-state="success"] {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: var(--gold-300);
  box-shadow: 0 14px 34px rgba(11,36,25,.4), inset 0 0 0 1.5px rgba(240,224,182,.55);
}
.vip-buy[data-state="error"] {
  background: linear-gradient(135deg,#fde2e2,#f8c9c9);
  color: #991b1b;
}

/* ---------------- 4. 开通中进度条 ---------------- */
.vip-progress {
  height: 3px; margin-top: 0; border-radius: 999px;
  background: rgba(201,164,92,.2);
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease, margin-top .35s ease;
}
.vip-progress i {
  display: block; height: 100%; width: 45%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-300), transparent);
  opacity: 0;
}
#vipCard.is-processing .vip-progress { max-height: 3px; margin-top: 12px; }
#vipCard.is-processing .vip-progress i {
  opacity: 1;
  animation: vipShimmer .5s linear infinite;
}
@keyframes vipShimmer {
  from { transform: translateX(-110%); }
  to   { transform: translateX(260%); }
}

/* ---------------- 5. 开通成功 · 卡片金色辉光（伪元素透明度，不掉帧） ---------------- */
#vipCard .vip-glow {
  position: absolute; inset: -30%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(227,199,141,.5), transparent 72%);
  opacity: 0;
}
#vipCard.is-vip .vip-glow { animation: vipGlowPulse 1.6s ease-in-out infinite alternate; }
@keyframes vipGlowPulse { from { opacity: .35; } to { opacity: .72; } }

#vipCard.is-vip .price-flag {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: var(--gold-300);
}

/* ---------------- 6. 全局 VIP 视觉（导航徽章 + 强化） ---------------- */
.nav-vip-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  color: var(--gold-300);
  font-size: 12.5px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(11,36,25,.35), inset 0 0 0 1px rgba(240,224,182,.4);
  white-space: nowrap;
  animation: vipPop .4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vipPop {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
html[data-vip="1"] .hero .badge-gold {
  box-shadow: 0 0 0 3px rgba(240,224,182,.28), var(--shadow-gold);
}

/* ---------------- 7. 庆祝层（成功全局反馈） ---------------- */
.vip-celebrate {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,26,18,.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: vipFadeIn .35s ease both;
}
@keyframes vipFadeIn { from { opacity: 0; } to { opacity: 1; } }

.vip-check-wrap {
  position: relative; z-index: 2;
  text-align: center;
  animation: vipPop .4s cubic-bezier(.22,.61,.36,1) .08s both;
}
.vip-check { width: 84px; height: 84px; }
.vc-circle {
  fill: var(--navy-800);
  stroke: var(--gold-400); stroke-width: 2.5;
  stroke-dasharray: 207; stroke-dashoffset: 207;
  animation: vipDraw .45s ease-out forwards;
}
.vc-tick {
  fill: none;
  stroke: var(--gold-300); stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  animation: vipDraw .35s ease-out .38s forwards;
}
@keyframes vipDraw { to { stroke-dashoffset: 0; } }

.vip-cele-title {
  margin-top: 18px;
  font-size: 22px; font-weight: 800; color: var(--gold-300);
}
.vip-cele-sub { margin-top: 6px; font-size: 14px; color: rgba(240,224,182,.78); }

/* 纸屑：仅 transform / opacity */
.vip-confetti { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.vip-confetti i {
  position: absolute; top: -8vh;
  display: block; width: 8px; height: 14px;
  border-radius: 2px;
  animation-name: vipFall;
  animation-timing-function: cubic-bezier(.3,.5,.6,1);
  animation-fill-mode: forwards;
}
@keyframes vipFall {
  0%   { transform: translate3d(0,-10vh,0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--sway,40px), 112vh, 0) rotate(var(--spin,540deg)); opacity: 0; }
}

.vip-skip {
  position: absolute; right: 28px; bottom: 26px; z-index: 3;
  padding: 9px 20px; border-radius: 999px;
  background: transparent;
  border: 1.5px solid rgba(240,224,182,.5);
  color: var(--gold-300); font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.vip-skip:hover { background: rgba(240,224,182,.12); border-color: var(--gold-300); }

/* ---------------- 8. Toast ---------------- */
.vip-toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 9999;
  transform: translate(-50%, 16px);
  padding: 12px 24px; border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  color: var(--gold-300); font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 32px rgba(7,26,18,.4), inset 0 0 0 1px rgba(240,224,182,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.vip-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.vip-toast.is-error {
  background: linear-gradient(135deg,#991b1b,#7f1d1d); color: #fee2e2;
  box-shadow: 0 12px 32px rgba(127,29,29,.4);
}

/* ---------------- 9. 演示重置入口 ---------------- */
.vip-reset { margin-top: 10px; text-align: center; }
.vip-reset-btn {
  background: none; border: none; padding: 4px 8px;
  font-size: 12px; color: var(--muted-2); cursor: pointer;
  text-decoration: underline dotted;
  transition: color .3s ease;
}
.vip-reset-btn:hover { color: var(--gold-600,#8f6f2c); }

/* ---------------- 10. 深色主题适配 ---------------- */
html[data-theme="dark"] .vip-ripple { background: rgba(240,224,182,.35); }
html[data-theme="dark"] .vip-progress { background: rgba(240,224,182,.16); }
html[data-theme="dark"] .vip-spinner {
  border-color: rgba(240,224,182,.25); border-top-color: var(--gold-300);
}

/* ---------------- 11. 无障碍：减少动态效果（暂停/跳过） ---------------- */
@media (prefers-reduced-motion: reduce) {
  #vipCard, .vip-shine, .vip-ripple, .vip-state, .vip-progress,
  .vip-progress i, .vip-glow, .nav-vip-badge, .vip-celebrate,
  .vip-check-wrap, .vc-circle, .vc-tick, .vip-toast {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .vip-confetti { display: none !important; }
  .vip-spinner { animation: none; border-color: transparent; border-top-color: currentColor; }
}