/* ==========================================================================
   honours-interactions.css — 荣誉资质页 · CSS3 交互动效
   --------------------------------------------------------------------------
   作用范围：pages/honours.html（仅本页引入，其它页面零影响）
     · 桌面画布（≥790px）—— 入场 / 数字滚动 / 滚动视差 / 指针聚光 / 悬停微交互
     · 移动端视图（≤789px）—— 数字滚动 + 轻量微交互

   设计红线（与首页 / 企业文化页 / 绿色物流页保持一致）：
     1. 静态版式零改动 —— 位置 / 尺寸 / 字体 / 字体层级保持 Figma 原样，
        动效只作用在 translate / scale / opacity / filter / clip-path 上；
     2. 动画结束态 = 原始状态，滚动到位后画面与首帧渲染完全一致；
     3. 动画全部由 CSS 负责，JS 只负责「进入视口」触发与指针 / 滚动位置写入；
     4. 入场动画走 translate / scale / clip-path 等独立属性，
        与既有 transform（证书卡缩放、箭头旋转）互不覆盖；
     5. 没有 JS 时 html.hn-anim 不会出现，内容直接可见；
     6. 尊重 prefers-reduced-motion。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 缓动与配色变量
   -------------------------------------------------------------------------- */
:root {
  --hn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hn-ease-count: cubic-bezier(0.16, 0.84, 0.24, 1);
  --hn-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hn-gold: #f4b53f;
  --hn-gold-deep: #d9902a;
  --hn-ink: #171717;
}

/* --------------------------------------------------------------------------
   1. 数字滚动 —— 逐位数字（@property + counter()）
   --------------------------------------------------------------------------
   页面上的数字（客服热线、邮政编码、门牌号、版权年份、证书年份、备案号）
   被逐位拆成 .hn-digit，每一位独立从 9 滚到目标值 —— 像老式号码盘的锁止过程：
     · --hn-d-end  目标数字（写在行内 style 上，由 js/honours-interactions.js 写入）
     · --hn-delay  该位的启动延迟（逐位错峰，形成级联）
     · --hn-d      当前数值，由关键帧从 9 过渡到 --hn-d-end
     · ::after     用 counter() 把数值渲染出来
   未触发时 --hn-d 直接等于 --hn-d-end，因此没有 JS 时数字依然正确显示。

   原始文本以 .hn-num-seq__raw 保留在无障碍树中（视觉隐藏），
   屏幕阅读器读到的仍是完整的「4008-556688」而不是逐位计数器生成的内容。
   -------------------------------------------------------------------------- */
@property --hn-d {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.hn-num-seq {
  position: relative;
  white-space: nowrap;
}

/* 原始文本：视觉上隐藏，但保留给屏幕阅读器与复制 */
.hn-num-seq__raw {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hn-digit {
  --hn-d: var(--hn-d-end, 0);
  display: inline-block;
  counter-reset: hn-d var(--hn-d);
  /* 这里刻意不启用 tabular-nums：等宽数字会比原始文本宽 8px，
     导致「2016年度中国物流百强企业」这类居中标题整体偏移，
     与 Figma 版式对不上。保持比例数字，静止态与原文本逐像素一致。 */
}

.hn-digit::after {
  content: counter(hn-d);
}

.hn-digit.is-live {
  animation: hnDigitRoll var(--hn-digit-dur, 0.85s) var(--hn-ease-count) var(--hn-delay, 0s) both;
}

@keyframes hnDigitRoll {
  from {
    --hn-d: 9;
  }

  to {
    --hn-d: var(--hn-d-end, 0);
  }
}

/* 整组数字滚动时的金色柔光（结束后回到继承色） */
.hn-num-seq.is-live {
  animation: hnSeqGlow var(--hn-dur, 1.2s) var(--hn-ease-count) var(--hn-seq-delay, 0s) both;
}

@keyframes hnSeqGlow {
  0% {
    color: var(--hn-gold);
    text-shadow: 0 0 14px rgb(244 181 63 / 55%);
  }

  70% {
    color: var(--hn-gold);
    text-shadow: 0 0 10px rgb(244 181 63 / 28%);
  }

  100% {
    color: inherit;
    text-shadow: inherit;
  }
}

/* --------------------------------------------------------------------------
   2. 通用入场动效（data-anim）
   --------------------------------------------------------------------------
   data-anim 取值：
     up       自下而上浮入        rise    轻微上浮（位移更小）
     fade     淡入                 left    自左侧滑入
     right    自右侧滑入           drop    自上方落下
     zoom     轻微放大             pop     弹入
     blur     带模糊浮入           kb      Ken Burns 缓推（背景大图）
     line     竖条自上而下生长     wipe    自上而下揭示
     wipeup   自下而上揭示         wiperight 自左向右揭示
     card     证书卡入场（只走位移与缩放，保留卡片自身的 0.58 / 1 透明度）

   延迟通过行内 style 的 --d 控制（秒），时长通过 --dur 控制（秒）。
   只有 js/honours-interactions.js 正常运行才会加上 html.hn-anim，
   因此没有 JS 时页面内容不会被隐藏。
   -------------------------------------------------------------------------- */
html.hn-anim .honours-page [data-anim="up"] {
  translate: 0 30px;
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="rise"] {
  translate: 0 14px;
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="fade"] {
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="left"] {
  translate: -42px 0;
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="right"] {
  translate: 42px 0;
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="drop"] {
  translate: 0 -20px;
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="zoom"] {
  scale: 0.93;
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="pop"] {
  scale: 0.86;
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="blur"] {
  translate: 0 26px;
  opacity: 0;
  filter: blur(12px);
}

html.hn-anim .honours-page [data-anim="kb"] {
  scale: var(--kb-from, 1.05);
}

/* clip-path 只在动画关键帧里出现。
   初始态如果就带 clip-path，被裁空的元素在 IntersectionObserver 里
   相交面积恒为 0，可能等不到触发，因此这里只留 opacity。 */
html.hn-anim .honours-page [data-anim="line"] {
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="wipe"] {
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="wipeup"] {
  opacity: 0;
}

html.hn-anim .honours-page [data-anim="wiperight"] {
  opacity: 0;
}

/* 证书卡：不动 opacity（静止态本身是 0.58 / 1），只做位移与缩放 */
html.hn-anim .honours-page [data-anim="card"] {
  translate: 0 26px;
  scale: 0.965;
}

.honours-page [data-anim].is-in {
  animation-duration: var(--dur, 0.95s);
  animation-timing-function: var(--hn-ease);
  animation-fill-mode: both;
  animation-delay: var(--d, 0s);
}

.honours-page [data-anim="up"].is-in {
  animation-name: hnUp;
}

.honours-page [data-anim="rise"].is-in {
  animation-name: hnRise;
}

.honours-page [data-anim="fade"].is-in {
  animation-name: hnFade;
}

.honours-page [data-anim="left"].is-in {
  animation-name: hnLeft;
}

.honours-page [data-anim="right"].is-in {
  animation-name: hnRight;
}

.honours-page [data-anim="drop"].is-in {
  animation-name: hnDrop;
}

.honours-page [data-anim="zoom"].is-in {
  animation-name: hnZoom;
}

.honours-page [data-anim="pop"].is-in {
  animation-name: hnPop;
}

.honours-page [data-anim="blur"].is-in {
  animation-name: hnBlur;
}

.honours-page [data-anim="kb"].is-in {
  animation-name: hnKB;
  animation-duration: var(--kb-dur, 16s);
  animation-timing-function: var(--hn-ease-count);
}

.honours-page [data-anim="line"].is-in {
  animation-name: hnLine;
}

.honours-page [data-anim="wipe"].is-in {
  animation-name: hnWipe;
}

.honours-page [data-anim="wipeup"].is-in {
  animation-name: hnWipeUp;
}

.honours-page [data-anim="wiperight"].is-in {
  animation-name: hnWipeRight;
}

.honours-page [data-anim="card"].is-in {
  animation-name: hnCardIn;
  animation-duration: var(--dur, 1s);
}

@keyframes hnUp {
  from {
    translate: 0 30px;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes hnRise {
  from {
    translate: 0 14px;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes hnFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hnLeft {
  from {
    translate: -42px 0;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes hnRight {
  from {
    translate: 42px 0;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes hnDrop {
  from {
    translate: 0 -20px;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes hnZoom {
  from {
    scale: 0.93;
    opacity: 0;
  }

  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes hnPop {
  from {
    scale: 0.86;
    opacity: 0;
  }

  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes hnBlur {
  from {
    translate: 0 26px;
    opacity: 0;
    filter: blur(12px);
  }

  to {
    translate: 0 0;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes hnKB {
  from {
    scale: var(--kb-from, 1.05);
  }

  to {
    scale: 1;
  }
}

@keyframes hnLine {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes hnWipe {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes hnWipeUp {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes hnWipeRight {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes hnCardIn {
  from {
    translate: 0 26px;
    scale: 0.965;
  }

  to {
    translate: 0 0;
    scale: 1;
  }
}

/* --------------------------------------------------------------------------
   3. 滚动视差（data-parallax / data-parallax-x，由 JS 写入 --py / --px）
   --------------------------------------------------------------------------
   使用独立的 translate 属性；只有不参与 translate 入场的图层才能叠加视差，
   因此视差统一挂在容器上，入场动画挂在容器内部的子元素上。
   -------------------------------------------------------------------------- */
.honours-page [data-parallax],
.honours-page [data-parallax-x] {
  translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px);
}

/* --------------------------------------------------------------------------
   4. 标题流光 —— 「荣誉资质」上掠过一道暖色高光
   --------------------------------------------------------------------------
   ::after 静止时完全透明且停在元素左侧之外，不改变原始画面；
   .honours-content 自身 overflow:hidden，溢出的高光不会撑出横向滚动条。
   -------------------------------------------------------------------------- */
.honours-page .honours-title h2 {
  position: relative;
}

.honours-page .honours-title h2::after {
  position: absolute;
  inset: -14% -8%;
  background: linear-gradient(
    102deg,
    transparent 36%,
    rgb(244 181 63 / 34%) 50%,
    transparent 64%
  );
  content: "";
  opacity: 0;
  translate: -130% 0;
  pointer-events: none;
}

.honours-page .honours-title h2.is-in::after {
  animation: hnShine 1.35s var(--hn-ease) 0.3s both;
}

@keyframes hnShine {
  0% {
    opacity: 0;
    translate: -130% 0;
  }

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 130% 0;
  }
}

/* --------------------------------------------------------------------------
   5. 指针聚光（data-spotlight，由 JS 写入 --cx / --cy）
   --------------------------------------------------------------------------
   静止时用 visibility:hidden 让这一层完全不参与绘制。
   若只用 opacity:0，浏览器仍会为它保留一块渲染面，
   容器内文字的抗锯齿方式会随之改变（与静态基线出现逐像素差异）。
   注意：宿主元素（.honours-content）本身就是 position:absolute，
   这里不要再改它的 position，否则会破坏画布内的定位。
   -------------------------------------------------------------------------- */
.honours-page [data-spotlight]::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    360px circle at var(--cx, 50%) var(--cy, 50%),
    rgb(244 181 63 / 15%),
    transparent 70%
  );
  content: "";
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.honours-page [data-spotlight]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   6. 桌面画布专属（≥790px）
   -------------------------------------------------------------------------- */
@media (min-width: 790px) {
  /* ---------------------------------------------------- 首屏导航微交互 */
  .honours-page .honours-header .header-links a,
  .honours-page .honours-header .header-actions a {
    transition: color 0.28s ease;
  }

  .honours-page .honours-header .header-links a:hover,
  .honours-page .honours-header .header-actions a:hover {
    color: var(--hn-gold);
  }

  .honours-page .honours-header .search-control {
    transition:
      transform 0.4s var(--hn-ease),
      color 0.28s ease;
  }

  .honours-page .honours-header .search-control:hover {
    color: var(--hn-gold);
    transform: scale(1.14);
  }

  .honours-page .honours-header .menu-control {
    transition: transform 0.4s var(--hn-ease);
  }

  .honours-page .honours-header .menu-control:hover {
    transform: scale(1.08);
  }

  .honours-page .honours-logo {
    transition: transform 0.45s var(--hn-ease);
  }

  .honours-page .honours-logo:hover {
    transform: translateX(4px);
  }

  .honours-page .honours-logo img {
    transition: scale 0.45s var(--hn-ease);
  }

  .honours-page .honours-logo:hover img {
    scale: 1.04;
  }

  /* ---------------------------------------------------- 二级分类导航 */
  .honours-page .about-dropdown a {
    transition:
      background 0.3s ease,
      color 0.3s ease;
  }

  .honours-page .about-dropdown a:not(.active):hover {
    background: rgb(244 181 63 / 20%);
  }

  /* ---------------------------------------------------- 荣誉资质标题 */
  .honours-page .honours-title h2 {
    transition: color 0.3s ease;
  }

  .honours-page .honours-title h2:hover {
    color: var(--hn-ink);
  }

  /* ---------------------------------------------------- 证书卡片
     注意：卡片本身带 opacity:0.58（静止态），一旦给它加 position:relative，
     浏览器会把它提升为独立合成层，再被画布的 0.7375 缩放二次重采样，
     证书图会明显发虚 —— 所以这里不碰定位，也不加伪元素，
     悬停效果只用 translate / box-shadow / filter 这些不影响静止态的写法。 */
  .honours-page .honour-card {
    transition:
      translate 0.5s var(--hn-ease),
      box-shadow 0.5s ease;
  }

  .honours-page .honour-card:hover {
    translate: 0 -8px;
    box-shadow: 0 26px 46px rgb(80 60 10 / 18%);
  }

  .honours-page .honour-card img {
    transition:
      scale 0.6s var(--hn-ease),
      filter 0.6s ease;
  }

  .honours-page .honour-card:hover img {
    scale: 1.05;
    filter: brightness(1.08) saturate(1.06);
  }

  .honours-page .honour-card h3 {
    transition: color 0.3s ease;
  }

  .honours-page .honour-card:hover h3 {
    color: var(--hn-gold-deep);
  }

  /* ---------------------------------------------------- 翻页箭头 */
  .honours-page .honours-arrow span {
    transition: translate 0.35s var(--hn-ease);
  }

  .honours-page .honours-prev:hover span {
    translate: -5px 0;
  }

  .honours-page .honours-next:hover span {
    translate: 5px 0;
  }

  /* ---------------------------------------------------- 分类切换 */
  .honours-page .honours-categories button {
    position: relative;
    transition:
      color 0.25s ease,
      font-weight 0.25s ease;
  }

  .honours-page .honours-categories button::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--hn-gold);
    content: "";
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.38s var(--hn-ease);
  }

  .honours-page .honours-categories button:hover {
    color: var(--hn-gold-deep);
  }

  .honours-page .honours-categories button:hover::after {
    scale: 1 1;
  }

  /* ---------------------------------------------------- 页脚 */
  .honours-page .footer-links a {
    transition: color 0.28s ease;
  }

  .honours-page .footer-links a:hover {
    color: var(--hn-gold);
  }

  .honours-page .footer-contact p {
    transition:
      color 0.3s ease,
      translate 0.4s var(--hn-ease);
  }

  .honours-page .footer-contact p:hover {
    color: var(--hn-gold);
    translate: 6px 0;
  }

  .honours-page .footer-social img {
    transition:
      transform 0.4s var(--hn-ease),
      filter 0.4s ease;
  }

  .honours-page .footer-social img:hover {
    filter: brightness(1.15);
    transform: translateY(-5px) scale(1.12);
  }
}

/* --------------------------------------------------------------------------
   7. 移动端（≤789px）：数字滚动 + 轻量微交互
   -------------------------------------------------------------------------- */
@media (max-width: 789px) {
  /* 首屏大图缓慢推近 */
  .honours-page .m-hero__bg {
    animation: hnMobileHero 18s var(--hn-ease-count) both;
  }

  @keyframes hnMobileHero {
    from {
      scale: 1.08;
    }

    to {
      scale: 1;
    }
  }

  /* 证书卡片按下时的轻微回弹 */
  .honours-page .m-scroll__item {
    transition: transform 0.32s var(--hn-ease);
  }

  .honours-page .m-scroll__item:active {
    transform: scale(0.985);
  }

  /* ---------------------------------------------------- 错峰入场
     列表 / 标签 / 证书的逐项延迟统一在 CSS 里给出，
     HTML 只需要写 data-anim，不必逐个写 --d。 */
  .honours-page .m-scroll__item:nth-child(1) {
    --d: 0.04s;
  }

  .honours-page .m-scroll__item:nth-child(2) {
    --d: 0.12s;
  }

  .honours-page .m-scroll__item:nth-child(3) {
    --d: 0.2s;
  }

  .honours-page .m-scroll__item:nth-child(4) {
    --d: 0.28s;
  }

  .honours-page .m-tag:nth-child(1) {
    --d: 0.04s;
  }

  .honours-page .m-tag:nth-child(2) {
    --d: 0.12s;
  }

  .honours-page .m-tag:nth-child(3) {
    --d: 0.2s;
  }

  .honours-page .m-list__item:nth-child(1) {
    --d: 0.04s;
  }

  .honours-page .m-list__item:nth-child(2) {
    --d: 0.1s;
  }

  .honours-page .m-list__item:nth-child(3) {
    --d: 0.16s;
  }

  .honours-page .m-list__item:nth-child(4) {
    --d: 0.22s;
  }

  .honours-page .m-list__item:nth-child(5) {
    --d: 0.28s;
  }

  .honours-page .m-list__item:nth-child(6) {
    --d: 0.34s;
  }

  .honours-page .m-list__item:nth-child(7) {
    --d: 0.4s;
  }

  .honours-page .m-list__item:nth-child(8) {
    --d: 0.46s;
  }

  .honours-page .m-support__list li:nth-child(1) {
    --d: 0.04s;
  }

  .honours-page .m-support__list li:nth-child(2) {
    --d: 0.1s;
  }

  .honours-page .m-support__list li:nth-child(3) {
    --d: 0.16s;
  }

  .honours-page .m-support__list li:nth-child(4) {
    --d: 0.22s;
  }

  .honours-page .m-support__list li:nth-child(5) {
    --d: 0.28s;
  }

  .honours-page .m-tag {
    transition:
      background 0.3s ease,
      transform 0.3s var(--hn-ease);
  }

  .honours-page .m-tag:active {
    transform: scale(0.96);
  }

  .honours-page .m-footer__social img {
    transition: transform 0.35s var(--hn-ease);
  }

  .honours-page .m-footer__social img:active {
    transform: translateY(-4px) scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   8. 无障碍：系统关闭动效时，全部动效收敛为直接呈现
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hn-digit,
  .hn-digit.is-live,
  .hn-num-seq.is-live {
    animation: none;
    filter: none;
    text-shadow: none;
  }

  .hn-digit {
    --hn-d: var(--hn-d-end, 0);
  }

  .honours-page [data-anim],
  .honours-page [data-anim].is-in {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  .honours-page [data-parallax],
  .honours-page [data-parallax-x] {
    translate: none !important;
  }

  .honours-page .honours-title h2::after {
    display: none;
  }

  .honours-page .m-hero__bg {
    animation: none !important;
  }
}