/* ===== 全站视觉与动效增强 ===== */
:root {
  --motion-green: #0b8f45;
  --motion-green-dark: #056333;
  --motion-green-soft: #eefaf3;
  --motion-blue: #2f74e6;
  --motion-yellow: #f8b923;
  --motion-ink: #152033;
  --motion-line: #e8edf2;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

body {
  overflow-x: clip;
}

/* 导航滚动状态 */
.home-header {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: rgba(232, 237, 242, .88);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.home-header.is-scrolled {
  background: rgba(255, 255, 255, .9);
  border-bottom-color: rgba(213, 222, 231, .94);
  box-shadow: 0 12px 34px rgba(21, 32, 51, .09);
}

.home-logo,
.home-logo img,
.home-logo .logo-icon {
  transition: color .24s ease, box-shadow .24s ease;
}

.home-primary-nav a {
  position: relative;
  transition: color .22s ease;
}

.home-primary-nav a.active {
  box-shadow: none;
}

.home-nav a,
.home-nav .btn-login {
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.home-nav .btn-login {
  box-shadow: 0 7px 18px rgba(47, 116, 230, .18);
}

/* 页面进入和滚动显现 */
.motion-capable .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity .48s ease var(--motion-delay, 0ms),
    transform .48s var(--motion-ease) var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-capable .motion-reveal.motion-from-left {
  transform: translate3d(0, 8px, 0);
}

.motion-capable .motion-reveal.motion-from-right {
  transform: translate3d(0, 8px, 0);
}

.motion-capable .motion-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.motion-capable .vip-plan.featured.motion-reveal.is-revealed {
  transform: translateY(-8px);
}

.motion-capable .motion-media-ready {
  animation: motionMediaIn .65s ease both;
}

body.page-ready .home-header-inner {
  animation: motionHeaderIn .4s ease both;
}

@keyframes motionHeaderIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motionMediaIn {
  from { opacity: .72; }
  to { opacity: 1; }
}

/* 搜索与主操作反馈 */
.scenario-search,
.library-search {
  transition: border-color .24s ease, box-shadow .28s ease;
}

.scenario-search:focus-within,
.library-search:focus-within {
  border-color: rgba(11, 143, 69, .34);
  box-shadow: 0 10px 28px rgba(21, 32, 51, .1), 0 0 0 4px rgba(11, 143, 69, .08);
}

.scenario-search button,
.library-search button,
.scenario-btn,
.scenario-vip-btn,
.vip-btn,
.vip-plan-btn,
.vip-redeem-form button,
.detail-page .btn-buy,
.detail-page .btn-download,
.detail-page .btn-cart,
.detail-buybar button {
  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .28s ease,
    transform .24s var(--motion-ease),
    opacity .22s ease;
}

.scenario-search button:active,
.library-search button:active,
.scenario-btn:active,
.scenario-vip-btn:active,
.vip-btn:active,
.vip-plan-btn:active,
.vip-redeem-form button:active,
.detail-page .btn-buy:active,
.detail-page .btn-download:active,
.detail-page .btn-cart:active,
.detail-buybar button:active {
  transform: scale(.985);
}

/* 卡片和图像的细腻反馈 */
.material-card {
  position: relative;
  isolation: isolate;
  transition: box-shadow .28s ease, border-color .28s ease;
}

.material-card-cover {
  transition: filter .28s ease;
}

.material-card-title,
.material-card-badge {
  transition: color .24s ease, background .24s ease, box-shadow .24s ease;
}

.scenario-card,
.library-cat,
.vip-plan,
.related-item {
  transition: box-shadow .28s ease, border-color .26s ease, background .26s ease, color .26s ease;
}

.scenario-card-icon,
.library-cat i,
.vip-plan-icon,
.vip-benefit-item > i,
.scenario-trust-strip i,
.vip-assurance-grid i {
  transition: color .24s ease, background .24s ease;
}

.scenario-card em i,
.scenario-product-head > a i,
.scenario-btn i,
.vip-btn i {
  transition: color .24s ease;
}

.detail-page .detail-cover-box {
  overflow: hidden;
}

.detail-page .detail-cover-box img,
.detail-page .related-cover {
  transition: filter .28s ease;
}

.vip-faq summary {
  transition: color .22s ease;
}

.back-to-top {
  color: var(--motion-green);
  border: 1px solid rgba(11, 143, 69, .13);
  box-shadow: 0 10px 28px rgba(21, 32, 51, .14);
  transition: opacity .25s ease, visibility .25s ease, color .2s ease, background .2s ease, box-shadow .3s ease;
}

/* 更完整、安静的页脚 */
.home-footer {
  padding: 0;
  background: #111a2b;
  color: #aeb9ca;
  text-align: left;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 72px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 38px;
}

.footer-brand {
  max-width: 430px;
}

.footer-brand-name {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.footer-brand-name img,
.footer-brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.footer-brand-name img { object-fit: contain; background: #fff; }
.footer-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--motion-green);
  color: #fff;
}

.footer-brand p {
  margin-top: 14px;
  color: #8f9caf;
  font-size: 13px;
  line-height: 1.8;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 58px;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links b {
  margin-bottom: 4px;
  color: #fff;
  font-size: 13px;
}

.footer-links a {
  width: fit-content;
  color: #8f9caf;
  font-size: 12px;
  transition: color .22s ease;
}

.footer-bottom {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: #748196;
  font-size: 12px;
}

.home-footer .icp { margin-top: 0; }
.home-footer .icp a { color: #748196; }

@media (hover: hover) and (pointer: fine) {
  .home-logo:hover { color: var(--motion-green); }
  .home-nav .btn-login:hover { box-shadow: 0 10px 24px rgba(47, 116, 230, .25); }

  .material-card:hover {
    border-color: rgba(11, 143, 69, .2);
    box-shadow: 0 12px 28px rgba(21, 32, 51, .1);
  }
  .material-card:hover .material-card-cover { filter: saturate(1.02); }
  .material-card:hover .material-card-title { color: var(--motion-green-dark); }
  .material-card-wrap:hover .material-card-badge {
    box-shadow: 0 6px 14px rgba(11, 143, 69, .22);
  }

  .scenario-card:hover,
  .library-cat:hover,
  .vip-plan:hover,
  .related-item:hover { border-color: rgba(11, 143, 69, .18); }
  .vip-faq summary:hover { color: var(--motion-green-dark); }

  .back-to-top.show:hover {
    color: #fff;
    background: var(--motion-green);
    box-shadow: 0 14px 32px rgba(11, 143, 69, .24);
  }

  .footer-brand-name:hover { color: #fff; }
  .footer-links a:hover { color: #fff; }
}

@media (max-width: 980px) {
  .motion-capable .vip-plan.featured.motion-reveal.is-revealed,
  .motion-capable .vip-plan.featured.motion-reveal.is-revealed:hover { transform: none; }
}

@media (max-width: 760px) {
  .motion-capable .motion-reveal {
    transform: translate3d(0, 6px, 0);
    transition-duration: .42s;
  }
  .motion-capable .motion-reveal.motion-from-left,
  .motion-capable .motion-reveal.motion-from-right {
    transform: translate3d(0, 6px, 0);
  }
  .motion-capable .motion-reveal.is-revealed { transform: translate3d(0, 0, 0); }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 38px; padding-bottom: 28px; }
  .footer-links { gap: 34px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (max-width: 420px) {
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force) { scroll-behavior: auto; }
  html:not(.motion-force).motion-capable .motion-reveal,
  html:not(.motion-force).motion-capable .motion-reveal.motion-from-left,
  html:not(.motion-force).motion-capable .motion-reveal.motion-from-right,
  html:not(.motion-force).motion-capable .motion-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html:not(.motion-force).motion-capable .motion-media-ready,
  html:not(.motion-force) body.page-ready .home-header-inner {
    animation: none;
  }
  html:not(.motion-force) *,
  html:not(.motion-force) *::before,
  html:not(.motion-force) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}