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

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

/* --------------------------------------------------------------------------
   0. 缓动与配色变量
   -------------------------------------------------------------------------- */
:root {
  --gn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gn-ease-count: cubic-bezier(0.16, 0.84, 0.24, 1);
  --gn-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gn-accent: #ffbc20;
  --gn-accent-deep: #d98b00;
  --gn-gold: #f4b53f;
  --gn-green: #2e9e6b;
}

/* --------------------------------------------------------------------------
   1. 数字滚动 —— 纯 CSS 计数器（@property + counter()）
   --------------------------------------------------------------------------
   .gn-num 自身就是计数器载体：
     · --gn-n-end  目标数值（写在行内 style 上）
     · --gn-n      当前数值，由关键帧从 0 过渡到 --gn-n-end
     · ::after     用 counter() 把数值渲染出来
   未触发时 --gn-n 直接等于 --gn-n-end，因此没有 JS 时数字依然正确显示。

   正文中的数字（1.8 亿元 / 400 台 / 300 台 / 2 万吨）被拆成若干个
   .gn-num 小节，原始文本以 .gn-num__raw 保留在无障碍树中（视觉隐藏），
   屏幕阅读器读到的仍是正确的「1.8亿元」而不是计数器生成的内容。
   -------------------------------------------------------------------------- */
@property --gn-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.gn-num {
  --gn-n: var(--gn-n-end);
  display: inline-block;
  vertical-align: baseline;
  counter-reset: gn-num var(--gn-n);
}

.gn-num::after {
  content: counter(gn-num);
}

/* 把「1.8」这类小数包成不可断行的整体，避免整数位与小数点之间被折行 */
.gn-num-group {
  display: inline-block;
  white-space: nowrap;
}

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

.gn-num.is-live {
  font-variant-numeric: tabular-nums;
  animation: gnCount var(--gn-dur, 1.9s) var(--gn-ease-count) var(--gn-delay, 0s) both;
}

@keyframes gnCount {
  0% {
    --gn-n: 0;
    color: var(--gn-accent-deep);
    text-shadow: 0 0 14px rgb(255 188 32 / 45%);
    filter: blur(2.5px);
  }

  70% {
    color: var(--gn-accent-deep);
    text-shadow: 0 0 14px rgb(255 188 32 / 26%);
    filter: blur(0.6px);
  }

  100% {
    --gn-n: var(--gn-n-end);
    color: inherit;
    text-shadow: inherit;
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   2. 通用入场动效（data-anim）
   --------------------------------------------------------------------------
   data-anim 取值：
     up     自下而上浮入      rise    轻微上浮（位移更小）
     fade   淡入              left    自左侧滑入
     right  自右侧滑入        drop    自上方落下
     zoom   轻微放大          pop     弹入
     blur   带模糊浮入        kb      Ken Burns 缓推（背景大图）
     line   竖条自上而下生长  wipe    自上而下揭示
     wipeup 自下而上揭示      wiperight 自左向右揭示
     flip   翻牌              flipup 竖向翻起（图标）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html.gn-anim .green-page [data-anim="flip"] {
  opacity: 0;
  transform: perspective(700px) rotateX(-86deg);
  transform-origin: 50% 100%;
}

html.gn-anim .green-page [data-anim="flipup"] {
  opacity: 0;
  transform: perspective(500px) rotateX(-72deg);
  transform-origin: 50% 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.green-page [data-anim="flip"].is-in {
  animation-name: gnFlip;
}

.green-page [data-anim="flipup"].is-in {
  animation-name: gnFlipUp;
}

/* 背景大图的缓推时间更长，营造景深感 */
.green-page [data-anim="kb"].is-in {
  animation-name: gnKB;
  animation-duration: var(--kb-dur, 16s);
  animation-timing-function: var(--gn-ease-count);
}

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

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

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

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

@keyframes gnFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  to {
    scale: 1;
  }
}

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

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

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

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

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

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

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

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

@keyframes gnFlip {
  from {
    opacity: 0;
    transform: perspective(700px) rotateX(-86deg);
  }

  to {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg);
  }
}

@keyframes gnFlipUp {
  from {
    opacity: 0;
    transform: perspective(500px) rotateX(-72deg);
  }

  to {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg);
  }
}

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

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

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

.green-page .green-title h2.is-in::after {
  animation: gnShine 1.35s var(--gn-ease) 0.3s both;
}

@keyframes gnShine {
  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，浏览器仍会为它保留一块渲染面，
   容器内文字的抗锯齿方式会随之改变（与静态基线出现逐像素差异）。
   注意：宿主元素（.green-capabilities）本身就是 position:absolute，
   这里不要再改它的 position，否则会破坏画布内的定位。
   -------------------------------------------------------------------------- */
.green-page [data-spotlight]::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    360px circle at var(--cx, 50%) var(--cy, 50%),
    rgb(46 158 107 / 16%),
    transparent 70%
  );
  content: "";
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

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

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

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

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

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

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

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

  /* ---------------------------------------------------- ESG 能力卡片 */
  .green-page .green-capability {
    transition:
      transform 0.5s var(--gn-ease),
      box-shadow 0.5s ease;
  }

  .green-page .green-capability:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 42px rgb(70 50 0 / 20%);
  }

  /* 卡片上掠过的一道柔光 */
  .green-page .green-capability::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      112deg,
      transparent 32%,
      rgb(255 255 255 / 42%) 48%,
      transparent 64%
    );
    content: "";
    translate: -130% 0;
    pointer-events: none;
    transition: translate 0.9s var(--gn-ease);
  }

  .green-page .green-capability:hover::before {
    translate: 130% 0;
  }

  .green-page .green-capability h3 {
    transition: color 0.3s ease;
  }

  .green-page .green-capability:hover h3 {
    color: #2a2a2a;
  }

  /* 图片裁切框：悬停时照片缓慢推近（scale 属性与 hover 的 transform 互不覆盖） */
  .green-page .green-image-frame img {
    transition:
      transform 0.6s var(--gn-ease),
      scale 1.2s var(--gn-ease);
  }

  .green-page .green-capability:hover .green-image-frame img {
    scale: 1.06;
  }

  /* ---------------------------------------------------- 实施路径 */
  .green-page .path-item {
    position: relative;
    transition: transform 0.45s var(--gn-ease);
  }

  .green-page .path-item:hover {
    transform: translateX(8px);
  }

  /* 悬停时左侧长出一段强调条 */
  .green-page .path-item::before {
    position: absolute;
    top: 6px;
    left: -16px;
    width: 4px;
    height: 78px;
    border-radius: 4px;
    background: var(--gn-accent);
    content: "";
    scale: 1 0;
    transform-origin: center;
    transition: scale 0.45s var(--gn-ease);
  }

  .green-page .path-item:hover::before {
    scale: 1 1;
  }

  .green-page .path-icon {
    transition:
      transform 0.45s var(--gn-ease-back),
      box-shadow 0.45s ease;
  }

  .green-page .path-item:hover .path-icon {
    transform: scale(1.08) rotate(-7deg);
    box-shadow: 0 12px 24px rgb(255 188 32 / 42%);
  }

  .green-page .path-item h4 {
    transition: color 0.3s ease;
  }

  .green-page .path-item:hover h4 {
    color: var(--gn-accent-deep);
  }

  .green-page .path-item p {
    transition: color 0.3s ease;
  }

  .green-page .path-item:hover p {
    color: #2f2f2f;
  }

  /* ---------------------------------------------------- 绿色项目 */
  .green-page .project-grid {
    position: relative;
  }

  .green-page .project-card {
    transition:
      transform 0.5s var(--gn-ease),
      box-shadow 0.5s ease;
  }

  .green-page .project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 48px rgb(60 45 0 / 18%);
  }

  .green-page .project-photo {
    position: relative;
  }

  /* 照片上掠过的一道柔光 */
  .green-page .project-photo::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      112deg,
      transparent 34%,
      rgb(255 255 255 / 38%) 50%,
      transparent 66%
    );
    content: "";
    translate: -130% 0;
    pointer-events: none;
    transition: translate 0.9s var(--gn-ease);
  }

  .green-page .project-card:hover .project-photo::after {
    translate: 130% 0;
  }

  .green-page .project-copy {
    transition: background 0.4s ease;
  }

  .green-page .project-card-secondary:hover .project-copy {
    background: #e4e4e4;
  }

  /* 文件下载：箭头下坠 */
  .green-page .download-link {
    transition: color 0.3s ease;
  }

  .green-page .download-link:hover {
    color: var(--gn-accent-deep);
  }

  .green-page .download-link span {
    transition: transform 0.4s var(--gn-ease);
  }

  .green-page .download-link:hover span {
    transform: translateY(7px);
  }

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

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

  .green-page .footer-contact p {
    transition:
      color 0.3s ease,
      transform 0.4s var(--gn-ease);
  }

  .green-page .footer-contact p:hover {
    color: var(--gn-gold);
    transform: translateX(6px);
  }

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

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

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

  @keyframes gnMobileHero {
    from {
      scale: 1.08;
    }

    to {
      scale: 1;
    }
  }

  /* 数字滚动在移动端同样生效 */
  .green-page .m-card__desc .gn-num {
    display: inline-block;
  }

  /* 卡片按下时的轻微回弹 */
  .green-page .m-card {
    transition: transform 0.32s var(--gn-ease);
  }

  .green-page .m-card:active {
    transform: scale(0.985);
  }

  .green-page .m-step__icon {
    transition: transform 0.35s var(--gn-ease-back);
  }

  .green-page .m-step:active .m-step__icon {
    transform: scale(1.1) rotate(-7deg);
  }

  .green-page .m-green-download {
    transition:
      background 0.3s ease,
      transform 0.3s var(--gn-ease);
  }

  .green-page .m-green-download:active {
    background: #fff5e0;
    transform: scale(0.98);
  }
}

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

  .gn-num {
    --gn-n: var(--gn-n-end);
  }

  .green-page [data-anim],
  .green-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;
  }

  .green-page [data-parallax] {
    translate: none !important;
  }

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

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