/* ================================================
   旧猫二手优品 - 交互与视觉增强层
   (assets/css/enhance.css)
   说明：本文件为纯增量样式，不覆盖页面结构与文案，
   仅统一全站的悬停反馈、图片动效、标题引导、
   滚动进场与返回顶部等体验。
   加载顺序：style.css → pages/*.css → responsive.css → enhance.css
   ================================================ */

/* ===== 1. 统一卡片悬浮反馈 ===== */
/* 为各页面缺少悬停态的卡片补充一致的上浮 + 柔和阴影 */
.geo-item,
.data-card,
.honor-card,
.step-card,
.guide-card,
.article-card,
.product-card,
.product-card-mini,
.store-card,
.profile-item,
.question-box,
.info-box,
.check-card,
.timeline-item {
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.3s ease,
    background 0.3s ease;
}

.geo-item:hover,
.data-card:hover,
.honor-card:hover,
.step-card:hover,
.guide-card:hover,
.article-card:hover,
.product-card:hover,
.product-card-mini:hover,
.store-card:hover,
.profile-item:hover,
.question-box:hover,
.info-box:hover,
.check-card:hover,
.timeline-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* GEO 信息小块：悬浮时提亮底色，增强可感知层级 */
.geo-item:hover {
  background: #fff;
  box-shadow: var(--shadow-md);
}

/* ===== 2. 图片容器缩放动效 ===== */
/* 仅作用于已带 overflow:hidden 的容器，避免破版 */
.product-card-mini__media img,
.home-store-photo img,
.product-image img,
.service-warranty__image img {
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.product-card-mini:hover .product-card-mini__media img,
.home-store-photo:hover img,
.product-card:hover .product-image img,
.service-warranty__image:hover img {
  transform: scale(1.05);
}

/* ===== 3. 区块标题视觉引导 ===== */
/* 标题下方增加品牌色渐变短条，强化内容区块的引导性 */
.title {
  position: relative;
}



/* 深色区块标题使用亮色渐变条 */
.dark-section h2 {
  position: relative;
}


/* ===== 4. 页面级按钮动效补齐 ===== */
.cms-btn-red,
.geo-more__button {
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background 0.25s ease,
    color 0.25s ease;
}

.cms-btn-red:hover,
.geo-more__button:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-red);
}

.cms-btn-red:active,
.geo-more__button:active {
  transform: translateY(0);
}

/* ===== 5. 滚动进场动效 ===== */
/* 由 enhance.js 自动为内容块添加 .jm-reveal，
   进入视口时追加 .jm-in 播放上浮淡入动画。
   动画结束后 JS 会移除这两个类，完全不影响
   元素自身的 hover transform 过渡。 */
.jm-reveal {
  opacity: 0;
}

.jm-reveal.jm-in {
  animation: jm-fade-up 0.7s var(--ease-out) forwards;
}

@keyframes jm-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== 6. 返回顶部浮动按钮 ===== */
/* 按钮元素由 enhance.js 动态创建，不改动模板 */
.jm-back-top {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.3s ease,
    transform 0.3s var(--ease-out),
    visibility 0.3s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.jm-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.jm-back-top:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: translateY(-3px);
  box-shadow: var(--shadow-red);
}

.jm-back-top svg {
  width: 20px;
  height: 20px;
}

/* ===== 7. 移动端适配微调 ===== */
@media (max-width: 900px) {
  /* 移动端导航固定于屏幕底部，返回顶部按钮需抬高避免遮挡 */
  .jm-back-top {
    right: 16px;
    bottom: calc(var(--header-height) + env(safe-area-inset-bottom) + 16px);
    width: 42px;
    height: 42px;
  }


}

/* ===== 9. FAQ 展开动效（FAQ 页桌面端） ===== */
/* FAQ 页由模板内联脚本切换 .open 类（display:none → block），
   display 切换会重新触发 CSS 动画，因此展开时自动播放淡入 */
.faq-item.open .answer {
  animation: jm-faq-in 0.35s ease;
}

@keyframes jm-faq-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== 10. 移动端抽屉菜单链接依次进场 ===== */
@media (max-width: 900px) {
  .navwrap.open .menu a,
  .navwrap.open .nav-menu a {
    animation: jm-nav-link-in 0.32s var(--ease-out) backwards;
  }

  .navwrap.open .menu a:nth-child(1),
  .navwrap.open .nav-menu a:nth-child(1) {
    animation-delay: 0.06s;
  }

  .navwrap.open .menu a:nth-child(2),
  .navwrap.open .nav-menu a:nth-child(2) {
    animation-delay: 0.11s;
  }

  .navwrap.open .menu a:nth-child(3),
  .navwrap.open .nav-menu a:nth-child(3) {
    animation-delay: 0.16s;
  }

  .navwrap.open .menu a:nth-child(4),
  .navwrap.open .nav-menu a:nth-child(4) {
    animation-delay: 0.21s;
  }

  .navwrap.open .menu a:nth-child(5),
  .navwrap.open .nav-menu a:nth-child(5) {
    animation-delay: 0.26s;
  }

  .navwrap.open .menu a:nth-child(6),
  .navwrap.open .nav-menu a:nth-child(6) {
    animation-delay: 0.31s;
  }

  .navwrap.open .menu a:nth-child(7),
  .navwrap.open .nav-menu a:nth-child(7) {
    animation-delay: 0.36s;
  }

  .navwrap.open .menu a:nth-child(8),
  .navwrap.open .nav-menu a:nth-child(8) {
    animation-delay: 0.41s;
  }
}

@keyframes jm-nav-link-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== 11. 内页 Banner 文字入场 ===== */
/* 与首页 hero 的 hero-up 入场节奏保持一致 */
.inner-banner__text > * {
  animation: jm-fade-up 0.7s var(--ease-out) backwards;
}

.inner-banner__text > *:nth-child(2) {
  animation-delay: 0.12s;
}

.inner-banner__text > *:nth-child(3) {
  animation-delay: 0.24s;
}

/* ===== 12. 分类筛选胶囊品牌化 ===== */
.cat-bar a,
.cat-bar button {
  background: #fff;
  border-color: var(--border);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.cat-bar a:not(.active):hover,
.cat-bar button:not(.active):hover {
  border-color: var(--red-300);
  color: var(--red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.cat-bar .active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: none;
  box-shadow: 0 4px 12px rgba(252, 16, 16, 0.2);
}

/* ===== 13. 自定义滚动条 ===== */
html {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border: 2px solid #fafafa;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--red-300);
}

/* ===== 14. 懒加载图片淡入 ===== */
/* 由 enhance.js 为懒加载图片添加 .jm-img-fade，
   加载完成后追加 .jm-img-loaded 淡入显示 */
img.jm-img-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

img.jm-img-fade.jm-img-loaded {
  opacity: 1;
}

/* ===== 8. 无障碍：尊重减少动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  .jm-reveal,
  img.jm-img-fade {
    opacity: 1;
  }

  .jm-reveal.jm-in {
    animation: none;
  }
}

/* ===== 15. 咨询浮窗（对齐参考站浮动组件） ===== */
/* 链接元素由 enhance.js 动态创建，复用导航中的客服电话 */
.jm-float-consult {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 900;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  box-shadow: 0 10px 24px rgba(252, 16, 16, 0.36);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background 0.25s ease;
}

.jm-float-consult:hover {
  background: var(--red-600);
  transform: translateY(-3px);
  box-shadow: var(--shadow-red-hover);
}

.jm-float-consult svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 900px) {
  /* 移动端抬高至底部导航与返回顶部按钮之上 */
  .jm-float-consult {
    right: 16px;
    bottom: calc(var(--header-height) + env(safe-area-inset-bottom) + 16px + 52px);
    padding: 10px 9px;
    font-size: 10px;
  }

  .jm-float-consult svg {
    width: 20px;
    height: 20px;
  }
}

/* 统一 PC 端按钮尺寸，向首页按钮样式对齐。 */
@media (min-width: 901px) {
  body:not(.new-jiumao-page-index) main a.btn-primary,
  body:not(.new-jiumao-page-index) main a.btn-outline,
  body:not(.new-jiumao-page-index) main a.btn-red,
  body:not(.new-jiumao-page-index) main a.cms-btn-red,
  body:not(.new-jiumao-page-index) main button.btn-primary,
  body:not(.new-jiumao-page-index) main button.btn-outline,
  body:not(.new-jiumao-page-index) main button.btn-red,
  body:not(.new-jiumao-page-index) main button.cms-btn-red,
  .new-jiumao-page-content .cat-bar a,
  .new-jiumao-page-faq .cat-bar button,
  .new-jiumao-page-products .filter button,
  .new-jiumao-page-stores .store-toggle,
  .new-jiumao-page-products .jiumao-products-faq__action .btn-outline {
    display: inline-flex;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 16px;
    line-height: 1;
  }

  .new-jiumao-page-content .cat-bar a {
    min-width: 100px;
  }
}