/* ============================================================
   About-ESG — KV
   Figma: #470:12085 (1920×850) 渐变 -49deg 白→浅蓝
   左侧标题/副标题；右侧六边形（渐变描边 30px + 内部图片）
   ============================================================ */

.aes-kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 850;
  background: linear-gradient(-49deg, #FFFFFF 0%, #ECF6FB 100%);
  overflow: hidden;
}

.aes-kv__inner {
  position: absolute;
  inset: 0;
}

/* 标题（Figma #596:34301 @ 101,170，96px ExtraBold，2 行 200px） */
.aes-kv__title {
  position: absolute;
  left: 5.26%;                       /* 101/1920 */
  top: 37.2%;                        /* 316.21/850：整体下移 30px 对齐背景 */
  max-width: 1030px;
  font-size: min(5vw, 96px);
  font-weight: 800;
  line-height: min(5.208vw, 100px);
  letter-spacing: -0.02em;
  color: #3EA8D9;
  margin: 0;
}

/* 描述（Figma #596:34302 @ 101,400，32px #999） */
.aes-kv__desc {
  position: absolute;
  left: 5.26%;
  top: 64.26%;                       /* 546.21/850：整体下移 30px 对齐背景 */
  max-width: 1030px;
  font-size: min(1.667vw, 32px);
  line-height: min(2.5vw, 48px);
  letter-spacing: -0.02em;
  color: #999999;
  margin: 0;
}

/* 视觉组（Figma #596:42145 @ 1221,170，597.45×510.42）：
   纸飞机 plan-pic #596:42143 560×500 @ (1221,180.42)，cover 填满
   镂空六边形 #596:42142 542.91×472.85 @ (1275.55,170) 叠于飞机上
   飞机大于六边形 → 飞机在左/下缘溢出六边形 */
.aes-kv__visual {
  position: absolute;
  left: 63.59%;                      /* 1221/1920 */
  top: 30.61%;                       /* 260.21/850：视觉组再下移 50px */
  width: 29.17%;                     /* 560/1920 */
  height: 58.82%;                    /* 500/850 */
}

.aes-kv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* 设计稿 FILL/cover：飞机铺满、完整放大溢出 */
}

.aes-kv__hex {
  position: absolute;
  left: 9.74%;                       /* 54.55/560 相对飞机容器 */
  top: -2.08%;                       /* -10.42/500：六边形比飞机略高 */
  width: 96.95%;                     /* 542.91/560 */
  height: 94.57%;                    /* 472.85/500 */
  display: block;
}

/* ---- KV 入场动效（仅 PC，≤1024 在下方媒体查询关闭） ----
   时序：六边形旋转出现（xl 800ms）→ 停留 0.5s → 飞机从左下往右上缓缓划入（2s，初始不显示） */
.aes-kv__hex {
  animation: aes-kv-hex-in var(--duration-xl, 0.8s) var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) 0s forwards;
}

@keyframes aes-kv-hex-in {
  from { opacity: 0; transform: rotate(-180deg); }
  to   { opacity: 1; transform: rotate(0deg); }
}

.aes-kv__img {
  animation: aes-kv-plane-in 2s var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) 1.3s both;  /* 0.8s 六边形 + 0.5s 停留；both = 延迟期保持 from(opacity:0) */
}

@keyframes aes-kv-plane-in {
  from { opacity: 0; transform: translate(calc(-1 * var(--translate-xl, 32px) * 4), calc(var(--translate-xl, 32px) * 4)); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .aes-kv__hex,
  .aes-kv__img {
    animation: none;               /* 入场动效仅 PC 端 */
  }
  .aes-kv {
    aspect-ratio: auto;
    padding: 100px 60px 80px;
    box-sizing: border-box;
  }
  .aes-kv__inner {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;            /* 标题/描述移动端左右居中 */
    text-align: center;
  }
  .aes-kv__title,
  .aes-kv__desc {
    position: static;
    max-width: 100%;
  }
  .aes-kv__title {
    margin: 20px 0 20px;            /* 与上边距留 20px、与下方灰色描述留 20px */
  }
  .aes-kv__desc {
    margin: 0 0 48px;               /* 与飞机保留原 gap 48px */
  }
  .aes-kv__visual {
    position: relative;             /* 保持定位容器（内部绝对定位元素依赖） */
    align-self: center;
    left: 0;                        /* 清除 PC left:63.59% 残留——relative 下 left 仍生效导致整组右移 */
    width: 420px;
    height: 366px;
  }
  /* 六边形在 PC 设计稿中右缘本就超出飞机容器 6.7%（560 容器内 left 9.74% + 宽 96.95%），
     小容器下被 .aes-kv overflow:hidden 裁剪 → 移动端改为相对飞机容器水平居中，完整显示 */
  .aes-kv__hex {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 992px) {
  .aes-kv__title {
    font-size: 44px;
  }
  .aes-kv__desc {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .aes-kv {
    padding: 64px 24px 56px;
  }
  .aes-kv__title {
    font-size: 38px;
    line-height: 1.15;
  }
  .aes-kv__desc {
    font-size: 18px;
    line-height: 1.6;
  }
  .aes-kv__visual {
    position: relative;
    width: 280px;
    height: 244px;
  }
}

@media (max-width: 480px) {
  .aes-kv__title {
    font-size: 32px;
  }
  .aes-kv__desc {
    font-size: 16px;
  }
  .aes-kv__visual {
    width: 240px;
    height: 209px;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  .aes-kv__hex,
  .aes-kv__img {
    animation: none !important;
  }
}