/* ============================================================
   珍友圈 · 珍珠虹彩动效层（Pearl Iridescence Motion Layer）
   v2 — 叠加在 pearl.css 之上，不改动原文件结构
   设计语言：母贝微光 · 香槟金暖调 · 光斑浮动 · 光痕掠过 · 丝滑揭示
   ============================================================ */

/* ---------- 暖调虹彩（香槟金 → 玫瑰金 → 腮红，始终暖调不跑冷色） ---------- */
:root {
  --ir-a: #ecd3aa;   /* 香槟金 */
  --ir-b: #e0b48c;   /* 玫瑰金 */
  --ir-c: #dba08a;   /* 珍珠腮红 */
  --ir-d: #d4a878;   /* 复古金 */
  --ir-grad: linear-gradient(120deg, #ecd3aa 0%, #e0b48c 26%, #dba08a 52%, #d4a878 76%, #ecd3aa 100%);
  --ir-size: 300% 100%;
}

/* ---------- 全局氛围：母贝微光（叠加在 body 背景，静态无堆叠风险） ---------- */
body {
  background-image:
    radial-gradient(46% 38% at 12% 3%, rgba(224,180,140,.10), transparent 62%),
    radial-gradient(40% 34% at 91% 12%, rgba(219,160,138,.10), transparent 62%),
    radial-gradient(50% 44% at 50% 108%, rgba(180,200,196,.08), transparent 62%),
    radial-gradient(30% 28% at 78% 82%, rgba(236,211,170,.10), transparent 62%),
    radial-gradient(1200px 500px at 50% -10%, #fbf7f0 0%, var(--bg) 60%);
}

/* ---------- 通用暖调流光 ---------- */
@keyframes irShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ---------- 主按钮：暖金虹彩流光（保持金调，不跑紫/青） ---------- */
.btn-primary {
  background: var(--ir-grad);
  background-size: var(--ir-size);
  animation: irShift 7s ease infinite;
  box-shadow: 0 8px 22px -6px rgba(192,147,102,.5), 0 3px 12px -3px rgba(219,160,138,.28), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- 分段 / 筛选选中：暖金流光 ---------- */
.seg.on, .pf.on {
  background: var(--ir-grad);
  background-size: var(--ir-size);
  animation: irShift 7s ease infinite;
}

/* ---------- 标题强调竖条：暖金流光 ---------- */
.section-title::before {
  background: var(--ir-grad);
  background-size: 100% 240%;
  animation: irShift 5s ease infinite;
}

/* ---------- 标题英文小字：暖金渐变字 ---------- */
.section-title small {
  background: linear-gradient(120deg, #c9a077 0%, #e2c29a 45%, #a87c4f 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: irShift 7s ease infinite;
}

/* ---------- 底部导航选中：暖金光晕 ---------- */
.bottomnav a.on svg { filter: drop-shadow(0 0 6px rgba(201,160,119,.5)); }
.bottomnav a.on::after {
  content: ''; position: absolute; top: 6px; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(236,211,170,.34) 52%, rgba(219,160,138,.16) 78%, transparent);
  z-index: -1; animation: navGlow 2.8s ease-in-out infinite;
}
@keyframes navGlow { 0%,100% { opacity:.5; transform: scale(.94); } 50% { opacity:1; transform: scale(1.1); } }

/* ---------- 品牌 logo 呼吸微光 ---------- */
.brand-mark { animation: markGlow 4s ease-in-out infinite; }
@keyframes markGlow { 0%,100% { box-shadow: inset -2px -3px 6px rgba(160,110,60,.35), 0 3px 8px rgba(150,110,70,.25); } 50% { box-shadow: inset -2px -3px 6px rgba(160,110,60,.35), 0 4px 16px rgba(201,160,119,.5); } }

/* ---------- Hero：光痕掠过（高级慢扫光） ---------- */
.hero-slide.has-img::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.13) 48%, transparent 62%);
  background-size: 250% 100%;
  animation: heroSheen 7.5s ease-in-out infinite;
}
@keyframes heroSheen { 0% { background-position: 135% 0; } 55% { background-position: -135% 0; } 100% { background-position: -135% 0; } }

/* ---------- Hero：光斑粒子（JS 注入，暖调为主 + 冷调微光） ---------- */
.bokeh-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.bokeh {
  position: absolute; bottom: -44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(250,230,212,.5) 36%, rgba(219,160,138,.16) 64%, transparent 78%);
  opacity: 0; will-change: transform, opacity;
  animation: bokehRise linear infinite;
}
.bokeh.b-cold { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(216,228,240,.48) 36%, rgba(203,166,210,.16) 64%, transparent 78%); }
.bokeh.b-aqua { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(214,238,234,.48) 36%, rgba(169,207,200,.16) 64%, transparent 78%); }
@keyframes bokehRise {
  0% { transform: translateY(0) translateX(0) scale(.5); opacity: 0; }
  10% { opacity: var(--bo,.5); }
  82% { opacity: var(--bo,.5); }
  100% { transform: translateY(-470px) translateX(var(--bx,0px)) scale(1.2); opacity: 0; }
}

/* ---------- Hero：逐层入场 ---------- */
.hero-content > * { opacity: 0; transform: translateY(26px); animation: heroIn .85s cubic-bezier(.22,.9,.3,1) forwards; }
.hero-content > :nth-child(1) { animation-delay: .06s; }
.hero-content > :nth-child(2) { animation-delay: .2s; }
.hero-content > :nth-child(3) { animation-delay: .34s; }
.hero-content > :nth-child(4) { animation-delay: .48s; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Hero：视差背景 ---------- */
.hero-bg { will-change: transform; }

/* ---------- 滚动揭示 ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .72s cubic-bezier(.2,.8,.3,1), transform .72s cubic-bezier(.2,.8,.3,1); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 卡片 hover / 点按：微浮 + 暖金描边 ---------- */
.pcard, .eco-card, .level-card, .notice-card, .circle-card, .apply-card, .im-card, .cu-card, .promo-card, .form-card, .verify-box, .ws-entry, .ws-poster {
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s cubic-bezier(.2,.8,.3,1), border-color .28s;
}
.pcard:active, .eco-card:active, .level-card:active, .notice-card:active, .circle-card:active, .apply-card:active, .im-card:active, .cu-card:active, .promo-card:active {
  transform: translateY(-4px) scale(.99);
  box-shadow: 0 18px 42px -14px rgba(150,110,70,.3), 0 0 0 1px rgba(201,160,119,.32);
}
.pcard .pimg img { transition: transform .7s cubic-bezier(.2,.8,.3,1); }
.pcard:active .pimg img { transform: scale(1.06); }

/* ---------- 分类圆珠：点按回弹 ---------- */
.cat-orb { transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.cat-item:active .cat-orb { transform: scale(.9) rotate(-4deg); }

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .bokeh, .hero-content > *, .btn-primary, .seg.on, .pf.on, .section-title::before, .section-title small, .brand-mark { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
  .bokeh-wrap, .hero-slide.has-img::after { display: none !important; }
}

/* ============================================================
   开场品牌过场（Splash Intro）— 黑底 · 珍珠聚光浮现
   ============================================================ */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 38%, #211408 0%, #0c0704 48%, #040202 100%);
  display: flex; align-items: center; justify-content: center;
  animation: splashFade .75s ease 2.1s forwards;
}
@keyframes splashFade { to { opacity: 0; visibility: hidden; } }
.splash-inner { display: flex; flex-direction: column; align-items: center; }
.splash-pearl-wrap { position: relative; width: 148px; height: 148px; }
.splash-pearl {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, #ffffff 0%, #f9efe0 24%, #eed6ae 46%, #d8b488 68%, #b99266 88%, #9a744c 100%);
  box-shadow: 0 0 60px rgba(236,211,170,.6), 0 0 160px rgba(236,211,170,.3), 0 0 260px rgba(236,211,170,.16), inset -8px -12px 26px rgba(120,80,40,.38), inset 6px 8px 18px rgba(255,255,255,.5);
  animation: pearlIn 1.55s cubic-bezier(.22,.9,.3,1) forwards;
}
@keyframes pearlIn {
  0% { transform: scale(.3); opacity: 0; }
  52% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.splash-ring {
  position: absolute; inset: -52px; margin: auto; border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, rgba(236,211,170,.22) 66%, rgba(236,211,170,.42) 70%, transparent 76%);
  animation: ringOut 2s ease-out forwards;
}
@keyframes ringOut {
  0% { transform: scale(.4); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.splash-brand {
  margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: brandIn 1s ease .6s forwards;
}
.splash-brand .zh { font-family: var(--serif); font-size: 2rem; color: #f2e2c4; letter-spacing: .4em; text-indent: .4em; font-weight: 700; }
.splash-brand .en { font-size: .72rem; color: #cfa87e; letter-spacing: .54em; text-indent: .54em; }
.splash-sub { margin-top: 18px; font-size: .82rem; color: rgba(242,226,196,.62); letter-spacing: .3em; text-indent: .3em; opacity: 0; animation: brandIn 1s ease .9s forwards; }
@keyframes brandIn { to { opacity: 1; } }

/* ============================================================
   Hero 电影感调色（更暗 · 更高对比 · 暖金定调 · 暗角）
   ============================================================ */
.hero-slide.has-img .hero-bg {
  filter: contrast(1.09) saturate(1.04) brightness(.9) sepia(.07);
}
.hero-slide.has-img .hero-bg::after {
  background: linear-gradient(180deg, rgba(16,10,6,.70) 0%, rgba(16,10,6,.34) 44%, rgba(16,10,6,.66) 100%);
}
.hero-slide.has-img::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 56%, rgba(8,5,3,.48) 100%);
}
.hero-slide.has-img .hero-title {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)) drop-shadow(0 3px 16px rgba(0,0,0,.35));
}
.hero-slide.has-img .hero-desc {
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* ============================================================
   减少动效偏好（含开场过场）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #splash { animation-duration: .1s; animation-delay: .25s; }
  .splash-pearl, .splash-ring, .splash-brand, .splash-sub { animation: none !important; opacity: 1 !important; transform: none !important; }
}