/* =========================================================
   美建金业 · 动效层（只动 transform / opacity，不改布局）
   - 跨页过渡：View Transitions 自动淡入淡出（不支持的浏览器退化为正文淡入）
   - 首屏 Hero：文案逐个上浮、卡片/装饰物淡入
   - 滚动进入视口：区块上浮淡入（motion.js 用 IntersectionObserver 触发，同级错峰）
   - 微交互：卡片悬浮上抬、按钮按压回弹、箭头轻推、FAQ 展开、弹窗弹出
   - 全局遵守 prefers-reduced-motion：关闭后直接呈现最终状态
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
  --dur-reveal: 640ms;
}

/* ---------- 1. 跨页过渡 ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 150ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 240ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
/* 不支持 View Transitions 的浏览器：正文淡入 */
@supports not (view-transition-name: none) {
  html.js body { animation: page-in 320ms var(--ease-out) both; }
}
@keyframes page-in { from { opacity: 0; } }

/* ---------- 2. 首屏 Hero 进场 ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes art-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes float-soft { 50% { transform: translateY(-8px); } }
@keyframes float-slow { 50% { transform: translateY(-6px); } }

html.js .hero__copy > *,
html.js .hero-about__inner > *,
html.js .reg-hero__copy > *,
html.js .dl-hero__inner > *,
html.js .promo__inner > *,
html.js .cal-hero__copy > * {
  animation: rise 640ms var(--ease-out) both;
}
html.js .hero__copy > :nth-child(2), html.js .hero-about__inner > :nth-child(2), html.js .reg-hero__copy > :nth-child(2), html.js .dl-hero__inner > :nth-child(2), html.js .promo__inner > :nth-child(2), html.js .cal-hero__copy > :nth-child(2) { animation-delay: 70ms; }
html.js .hero__copy > :nth-child(3), html.js .hero-about__inner > :nth-child(3), html.js .reg-hero__copy > :nth-child(3), html.js .dl-hero__inner > :nth-child(3), html.js .promo__inner > :nth-child(3), html.js .cal-hero__copy > :nth-child(3) { animation-delay: 140ms; }
html.js .hero__copy > :nth-child(4), html.js .hero-about__inner > :nth-child(4), html.js .reg-hero__copy > :nth-child(4), html.js .dl-hero__inner > :nth-child(4), html.js .promo__inner > :nth-child(4), html.js .cal-hero__copy > :nth-child(4) { animation-delay: 210ms; }
html.js .hero__copy > :nth-child(5), html.js .hero-about__inner > :nth-child(5), html.js .reg-hero__copy > :nth-child(5), html.js .dl-hero__inner > :nth-child(5), html.js .promo__inner > :nth-child(5), html.js .cal-hero__copy > :nth-child(5) { animation-delay: 280ms; }
html.js .hero__copy > :nth-child(6), html.js .hero-about__inner > :nth-child(6), html.js .reg-hero__copy > :nth-child(6), html.js .promo__inner > :nth-child(6) { animation-delay: 350ms; }

/* 首屏卡片：开户表单 / 日历小卡 / 首页报价条 */
html.js .reg-form,
html.js .widget,
html.js .quotes-bar {
  animation: card-in 720ms var(--ease-out) 260ms both;
}
/* 3D 装饰物：淡入后缓慢漂浮（只在装饰图上动，不影响布局） */
html.js .hero__art img,
html.js .promo__art img {
  animation: art-in 900ms var(--ease-out) 180ms both, float-soft 7s ease-in-out 1.2s infinite;
}
html.js .hero__phone img { animation: art-in 900ms var(--ease-out) 120ms both, float-slow 9s ease-in-out 1.2s infinite; }
html.js .hero__coin img { animation-duration: 900ms, 6s; }
html.js .hero__shield img { animation-duration: 900ms, 8s; }

/* ---------- 3. 滚动进入视口 ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

/* 日历表格行：数据加载后逐行淡入 */
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
html.js .cal-table tbody tr:not(.cal-state) { animation: row-in 360ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }

/* ---------- 4. 微交互 ---------- */
.inst, .pillar, .news, .review, .metric, .feat, .step, .about__card, .gfeat, .qcard {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .inst:hover, .pillar:hover, .news:hover, .review:hover, .metric:hover, .feat:hover, .step:hover, .about__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -10px rgba(83, 65, 205, .16), 0 6px 18px -4px rgba(0, 0, 0, .06);
  }
  .gfeat:hover { transform: translateY(-3px); }
  .qcard:hover { transform: translateY(-2px); }
  .insights__more img, .news__more img, .cred__foot a img, .btn--soft img, .btn--submit img, .promo__actions .btn--white img {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .insights__more:hover img, .news__more:hover img, .cred__foot a:hover img, .btn--soft:hover img, .btn--submit:hover img, .promo__actions .btn--white:hover img {
    transform: translateX(3px);
  }
  .nav a { transition: color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
  .nav a:not(.is-active):hover { transform: translateY(-1px); }
}
.btn:active, .dl-btn:active, .chip:active, .seg button:active, .btn--code:active { transform: scale(.97); transition-duration: 80ms; }
.dl-btn { transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.chip, .seg button, .check-pill, .btn--refresh { transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform 80ms var(--ease-out); }
.ibox { transition: transform var(--dur-base) var(--ease-spring); }
.inst:hover .ibox, .pillar:hover .ibox, .feat:hover .ibox, .step:hover .ibox, .metric:hover .ibox, .about__card:hover .ibox { transform: scale(1.08); }
.brand__logo { transition: transform var(--dur-base) var(--ease-spring); }
.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.06); }

/* 头部滚动后加轻阴影 */
.site-header { transition: box-shadow var(--dur-base) var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 8px 24px -14px rgba(23, 25, 49, .22); }

/* FAQ 展开：用 grid 行高动画（不动 height，不触发布局抖动） */
.faq__a { display: grid; grid-template-rows: 0fr; padding: 0; transition: grid-template-rows 300ms var(--ease-out); }
.faq__a > div { overflow: hidden; padding: 0 24px 0 60px; transition: padding-bottom 300ms var(--ease-out); }
.faq.is-open .faq__a { grid-template-rows: 1fr; }
.faq.is-open .faq__a > div { padding-bottom: 24px; }
.faq__q img { transition: transform var(--dur-base) var(--ease-spring); }
.faq { transition: box-shadow var(--dur-base) var(--ease-out); }
.faq.is-open { box-shadow: 0 20px 44px -10px rgba(83, 65, 205, .14), 0 4px 16px -2px rgba(0, 0, 0, .04); }

/* 弹窗：遮罩淡入 + 面板弹出 */
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.modal { animation: fade-in 200ms var(--ease-out) both; }
.modal__box { animation: pop-in 280ms var(--ease-spring) both; }
.modal__close { transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.modal__close:hover { transform: rotate(90deg); }

/* 移动端菜单展开：逐项上浮 */
@media (max-width: 1199px) {
  .nav a { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast); }
  .nav-open .nav a { opacity: 1; transform: none; }
  .nav-open .nav a:nth-child(2) { transition-delay: 40ms; }
  .nav-open .nav a:nth-child(3) { transition-delay: 80ms; }
  .nav-open .nav a:nth-child(4) { transition-delay: 120ms; }
  .nav-open .nav a:nth-child(5) { transition-delay: 160ms; }
  .nav-open .nav a:nth-child(6) { transition-delay: 200ms; }
}
@media (max-width: 767px) {
  .faq__a > div { padding: 0 16px 0 52px; }
  .faq.is-open .faq__a > div { padding-bottom: 18px; }
}

/* ---------- 5. 减弱动效：直接呈现最终状态 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .hero__art img, html.js .promo__art img, html.js .hero__phone img { animation: none; }
  .modal, .modal__box, .faq__a, .faq__a > div { animation: none; transition: none; }
}