/* ════════════════════════════════════════════════════════════════
   945AI VIP 會員頁 M2 嵌入專用 CSS
   配合 https://star-945ai.vercel.app/vip 的 SSR HTML
   ════════════════════════════════════════════════════════════════ */

/* 1. animated-edits-text：標題漸層流動（金→粉→紫→藍 4s 循環）*/
@keyframes vip-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#vip-page-root .animated-edits-text,
#vip-page-root span.animated-edits-text,
.animated-edits-text {
  background-image: linear-gradient(90deg, #fbbf24, #f43f5e, #a855f7, #3b82f6, #fbbf24) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  animation: vip-gradient-shift 4s ease-in-out infinite !important;
  animation-play-state: running !important;
}

/* edits 跑動邊框（金→粉→紫→藍 8s 同會員卡速度，用於按鈕外框與 LINE 門卡）*/
.edits-frame {
  background-image: linear-gradient(90deg, #fbbf24, #f43f5e, #a855f7, #3b82f6, #fbbf24) !important;
  background-size: 400% 100% !important;
  animation: tier-frame-flow 8s linear infinite !important;
  animation-play-state: running !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.4) !important;
}

/* 2. 會員卡 5 種跑光邊框（同色系光點循環 8s）*/
@keyframes tier-frame-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

.tier-frame-vip,
.tier-frame-svip,
.tier-frame-alliance,
.tier-frame-elite,
.tier-frame-leadership {
  background-size: 400% 100% !important;
  animation: tier-frame-flow 8s linear infinite !important;
}

/* VIP 紅 #C91005 */
.tier-frame-vip {
  background-image: linear-gradient(90deg, #4a0700, #C91005, #fff, #C91005, #4a0700) !important;
  box-shadow: 0 0 14px rgba(201, 16, 5, 0.5) !important;
}

/* SVIP 紫 */
.tier-frame-svip {
  background-image: linear-gradient(90deg, #581c87, #a855f7, #fff, #a855f7, #581c87) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45) !important;
}

/* ALLIANCE 金 */
.tier-frame-alliance {
  background-image: linear-gradient(90deg, #78350f, #fbbf24, #fff, #fbbf24, #78350f) !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.5) !important;
}

/* ELITE 亮藍 */
.tier-frame-elite {
  background-image: linear-gradient(90deg, #075985, #38bdf8, #fff, #38bdf8, #075985) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
}

/* LEADERSHIP Tiffany */
.tier-frame-leadership {
  background-image: linear-gradient(90deg, #064e4a, #0ABAB5, #fff, #0ABAB5, #064e4a) !important;
  box-shadow: 0 0 14px rgba(10, 186, 181, 0.55) !important;
}

/* 3. M2 容器掃版：避免 M2 預設行高/邊距干擾 */
#vip-page-root {
  background: #000 !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.55;
}
#vip-page-root * {
  box-sizing: border-box;
}
#vip-page-root img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 4. M2 預設會在 element 之間插入 <p><br>&nbsp;</p>，把它高度壓掉 */
#vip-page-root > p,
#vip-page-root > br {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* 5. scroll anchor offset（讓 #enroll 不被 M2 上方 sticky 蓋住）*/
#enroll {
  scroll-margin-top: 80px;
}