/* =============================================================
   旺财简历 · 高级感增强层 v6 (Premium Layer)
   叠加在 theme-friendly.css 之后。
   橙色主题 · 浮动卡片动效 · 功能图标交互 · 价值区动画
   ============================================================= */

:root{
  --prem-shadow-sm: 0 1px 3px rgba(26,26,46,.05), 0 2px 6px rgba(26,26,46,.04);
  --prem-shadow-md: 0 4px 14px -4px rgba(26,26,46,.08), 0 8px 28px -8px rgba(255,107,26,.06);
  --prem-shadow-lg: 0 12px 32px -8px rgba(26,26,46,.10), 0 24px 48px -12px rgba(255,107,26,.10);
  --prem-ring: 0 0 0 3px rgba(255,107,26,.25);
  --prem-ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --prem-shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --prem-shadow-md: 0 4px 14px -4px rgba(0,0,0,.45), 0 8px 28px -8px rgba(0,0,0,.30);
  --prem-shadow-lg: 0 12px 32px -8px rgba(0,0,0,.55), 0 24px 48px -12px rgba(0,0,0,.40);
  --prem-ring: 0 0 0 3px rgba(255,107,26,.35);
}

/* ---------- 焦点环（无障碍） ---------- */
.btn:focus-visible, .gnb-btn:focus-visible, a:focus-visible, button:focus-visible,
.feat-card:focus-visible, .value-item:focus-visible{
  outline:none; box-shadow:var(--prem-ring), var(--prem-shadow-sm);
}

/* ---------- 滚动揭示动画（仅在 JS 可用时空格隐藏，无 JS 直接可见） ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .55s var(--prem-ease),
    transform .55s var(--prem-ease);
}
html.js .reveal:not(.is-visible){will-change:transform, opacity;}
html.js .reveal.is-visible{opacity:1; transform:none; will-change:auto;}

/* stagger — 功能图标行 */
.feat-grid .reveal:nth-child(1){transition-delay:.04s;}
.feat-grid .reveal:nth-child(2){transition-delay:.10s;}
.feat-grid .reveal:nth-child(3){transition-delay:.16s;}
.feat-grid .reveal:nth-child(4){transition-delay:.22s;}

/* stagger — Hero 文案 */
.hero-copy .reveal:nth-child(1){transition-delay:.04s;}
.hero-copy .reveal:nth-child(2){transition-delay:.12s;}
.hero-copy .reveal:nth-child(3){transition-delay:.20s;}

/* stagger — 价值区 */
.value-copy > .reveal{transition-delay:.06s;}
.value-items .reveal:nth-child(1){transition-delay:.14s;}
.value-items .reveal:nth-child(2){transition-delay:.20s;}
.value-items .reveal:nth-child(3){transition-delay:.26s;}

/* stagger — 新区块（三步 / 数据条 / 评价） */
.how-grid .reveal:nth-child(2){transition-delay:.10s;}
.how-grid .reveal:nth-child(3){transition-delay:.20s;}
.stats-inner .reveal:nth-child(2){transition-delay:.08s;}
.stats-inner .reveal:nth-child(3){transition-delay:.16s;}
.stats-inner .reveal:nth-child(4){transition-delay:.24s;}
.review-grid .reveal:nth-child(2){transition-delay:.10s;}
.review-grid .reveal:nth-child(3){transition-delay:.20s;}

/* ---------- 功能卡片微交互 ---------- */
.feat-card{perspective:800px;}
.feat-card:hover{transform:translateY(-6px) rotateX(.5deg) rotateY(-.5deg);}

/* 功能图标悬浮光晕 */
.feat-ico::after{
  content:""; position:absolute; inset:-6px;
  border-radius:18px;
  background:radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity:0; transition:opacity .4s var(--prem-ease); z-index:-1;
  filter:blur(10px);
}
.feat-card:hover .feat-ico::after{opacity:.2;}

/* ---------- 价值区卡片交互（v6.9：删除 hover 左侧 3px 橙竖线，改用 bg-soft 高亮反馈） ---------- */
.value-item{
  transition:background-color .3s var(--prem-ease), border-color .3s var(--prem-ease), transform .35s var(--prem-ease);
}
.value-item:hover{
  background-color:rgba(255,107,26,.04);
  border-color:rgba(255,107,26,.18);
}

/* 产品截图悬浮效果 */
.vm-resume{position:relative; overflow:hidden;}
.vm-resume::after{
  content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle at center, rgba(255,107,26,.04) 0%, transparent 60%);
  opacity:0; transition:opacity .5s var(--prem-ease);
}
.vm-resume:hover::after{opacity:1;}

/* ---------- 按钮光泽扫过 ---------- */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{
  content:""; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition:left .5s var(--prem-ease);
}
.btn-primary:hover::after{left:120%;}

/* ---------- CTA 呼吸光环 ---------- */
.btn-primary::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(255,107,26,.5);
  animation:ctaPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(255,107,26,.5);}
  70%{box-shadow:0 0 0 14px rgba(255,107,26,0);}
  100%{box-shadow:0 0 0 0 rgba(255,107,26,0);}
}

/* ---------- 吉祥物入场弹跳 + 持续呼吸 ---------- */
.mascot-wrap{
  display:flex; justify-content:center; align-items:center;
  animation:mascotEnter 1s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes mascotEnter{
  0%{opacity:0; transform:translateY(48px) scale(.86);}
  60%{opacity:1; transform:translateY(-8px) scale(1.04);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

/* ---------- 导航 logo hover 微弹跳 ---------- */
.gnb-logo:hover .logo-mascot{animation:logoBounce .5s var(--prem-ease);}
@keyframes logoBounce{0%,100%{transform:scale(1) rotate(0);}40%{transform:scale(1.15) rotate(-8deg);}70%{transform:scale(1.05) rotate(4deg);}}

/* ---------- 吉祥物光晕脉冲 ---------- */
.hero-art::before{
  content:""; position:absolute; z-index:1;
  left:50%; top:45%; width:300px; height:300px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,140,66,.15) 0%, transparent 65%);
  filter:blur(30px); pointer-events:none;
  animation:mascotGlow 4s ease-in-out infinite alternate;
}
@keyframes mascotGlow{ from{opacity:.5;} to{opacity:.9;} }

/* ---------- 页脚微光 ---------- */
footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,107,26,.35), transparent);
}

/* =============================================================
   区块动画增强：简单三步 / 用户口碑 / 常见问题
   ============================================================= */

/* ---- 简单三步（how-section）---- */
.how-ico{ animation:howIconFloat 4s ease-in-out infinite; }
@keyframes howIconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.how-step-no{ transition:transform .4s var(--prem-ease); }
.how-card:hover .how-step-no{ transform:scale(1.08) rotate(-3deg); }
.how-card{ transition:transform .35s var(--prem-ease), box-shadow .35s var(--prem-ease), border-color .35s var(--prem-ease); }

/* ---- 用户口碑（reviews-section）---- */
.review-stars{ display:inline-block; animation:starTwinkle 3s ease-in-out infinite; }
@keyframes starTwinkle{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.72;transform:scale(.94);}}
.review-avatar{ position:relative; }
.review-avatar::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(255,107,26,.45);
  opacity:0; animation:avatarPulse 2.8s ease-out infinite;
}
@keyframes avatarPulse{
  0%{transform:scale(.9);opacity:.5;}
  70%{transform:scale(1.3);opacity:0;}
  100%{opacity:0;}
}
.review-card{ transition:transform .35s var(--prem-ease), box-shadow .35s var(--prem-ease); }

/* ---- 常见问题（faq-section）---- */
.faq-item{ transition:border-color .3s var(--prem-ease), box-shadow .3s var(--prem-ease), transform .3s var(--prem-ease); }
.faq-item:hover{ transform:translateY(-2px); }
.faq-item.open .faq-ico{ animation:faqPop .4s var(--prem-ease); }
@keyframes faqPop{0%{transform:rotate(0);}50%{transform:rotate(200deg) scale(1.15);}100%{transform:rotate(180deg) scale(1);}}
/* 逐项揭示（scroll reveal 时错峰上浮，仅在 JS 可用时隐藏） */
html.js .faq-list .faq-item{opacity:0; transform:translateY(18px); transition:opacity .5s var(--prem-ease), transform .5s var(--prem-ease), border-color .3s var(--prem-ease), box-shadow .3s var(--prem-ease);}
html.js .faq-list.is-visible .faq-item{opacity:1; transform:none;}
html.js .faq-list.is-visible .faq-item:nth-child(1){transition-delay:.04s;}
html.js .faq-list.is-visible .faq-item:nth-child(2){transition-delay:.12s;}
html.js .faq-list.is-visible .faq-item:nth-child(3){transition-delay:.20s;}
html.js .faq-list.is-visible .faq-item:nth-child(4){transition-delay:.28s;}

/* ---------- 性能：区域离开视口时暂停无限动画 ---------- */
.anim-paused .hero-mascot,
.anim-paused .float-badge{ animation-play-state:paused; }