/* ============================================================
   About-Colloidal-Silica — Key Roles of Colloidal Silica
   Figma: Keyroles#section #609:42291 (1920×1200, 页面 y2160)
   渐变 118deg 白→#ECF6FB
   all-content @ (92, 36.81)：row alignItems:center gap:50
     left-content 1050 宽：标题 76 + gap 100 + 4 项列表（gap 50，item gap 70）
     right-hand-circle 1133.19 正方 @ x1192（右侧溢出 405px，overflow 裁剪）
       蓝环 1133.19 / 绿环 906.55 居中 / 绿实心 742.24 @(194.91,196.04) / 手部图 695×780 @(32.31,144.19)
   图标 140×115 #D9E7F0 r8，内图精确位置：1:(12,12)115×92 2:(21,8)100×103 3:(10,15)119×86 4:(18,10)109×102
   文字组：标题 32px Bold #34ADD9（第3项 #3EA8D9）+ desc 24px #666666 @y59（gap 15）
   全部坐标按 1920 基准换算 vw/百分比，min(vw,px) 封顶
   ============================================================ */

.acs-roles {
  position: relative;
  height: 1200px;
  overflow: hidden;
  background: linear-gradient(118deg, #FFFFFF 0%, #ECF6FB 100%);
}

/* ---- 左侧内容 @ (92, 182.8) 1050 宽 ---- */
.acs-roles__content {
  position: absolute;
  left: 4.79%;          /* 92/1920 */
  top: 15.23%;          /* 182.8/1200 */
  width: 54.69%;        /* 1050/1920 */
  max-width: 1050px;
  z-index: 1;
}

.acs-roles__title {
  font-size: min(76px, 3.958vw);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #3EA8D9;
  margin: 0 0 min(100px, 5.208vw);   /* 标题→列表 gap 100 */
}

.acs-roles__items {
  display: flex;
  flex-direction: column;
  gap: min(50px, 2.604vw);           /* 行 gap 50 */
}

.acs-roles__item {
  display: flex;
  align-items: center;
  gap: min(70px, 3.646vw);           /* 图标→文字 gap 70 */
}

/* 图标 140×115 #D9E7F0 r8 */
.acs-roles__icon {
  flex: 0 0 auto;
  width: min(140px, 7.292vw);
  aspect-ratio: 140 / 115;
  background: #D9E7F0;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: block;
}

/* 图标内图片：精确位置（相对图标百分比） */
.acs-roles__icon img {
  position: absolute;
  object-fit: cover;
  display: block;
}

.acs-roles__item:nth-child(1) .acs-roles__icon img {
  left: 8.57%;          /* 12/140 */
  top: 10.43%;          /* 12/115 */
  width: 82.14%;        /* 115/140 */
  aspect-ratio: 115 / 92;
}

.acs-roles__item:nth-child(2) .acs-roles__icon img {
  left: 15%;            /* 21/140 */
  top: 6.96%;           /* 8/115 */
  width: 71.43%;        /* 100/140 */
  aspect-ratio: 100 / 103;
}

.acs-roles__item:nth-child(3) .acs-roles__icon img {
  left: 7.14%;          /* 10/140 */
  top: 13.04%;          /* 15/115 */
  width: 85%;           /* 119/140 */
  aspect-ratio: 119 / 86;
}

.acs-roles__item:nth-child(4) .acs-roles__icon img {
  left: 12.86%;         /* 18/140 */
  top: 8.7%;            /* 10/115 */
  width: 77.86%;        /* 109/140 */
  aspect-ratio: 109 / 102;
}

/* 第 4 项图标双图循环切换（acs-role-4.png ↔ acs-role-4-1.png，2s 间隔） */
.acs-roles__icon--dual img {
  opacity: 0;
  transition: opacity var(--duration-slow, 0.5s) var(--ease-standard, ease);
}

.acs-roles__icon--dual img.is-visible {
  opacity: 1;
}

/* 文字组（设计稿宽度 720/768/768/840） */
.acs-roles__text {
  flex: 0 1 auto;
}

.acs-roles__item:nth-child(1) .acs-roles__text { max-width: min(720px, 37.5vw); }
.acs-roles__item:nth-child(2) .acs-roles__text,
.acs-roles__item:nth-child(3) .acs-roles__text { max-width: min(768px, 40vw); }
.acs-roles__item:nth-child(4) .acs-roles__text { max-width: min(840px, 43.75vw); }

.acs-roles__item-title {
  font-size: min(32px, 1.667vw);
  font-weight: 700;
  line-height: 1.375;
  letter-spacing: -0.02em;
  color: #34ADD9;
  margin: 0 0 min(15px, 0.781vw);    /* 标题→描述 gap 15（44+15） */
}

.acs-roles__item:nth-child(3) .acs-roles__item-title {
  color: #3EA8D9;
}

.acs-roles__item-desc {
  font-size: min(24px, 1.25vw);
  line-height: 1.375;
  letter-spacing: -0.02em;
  color: #666666;
  margin: 0;
}

/* 圆组小幅轴心偏移动效（与 acs-glance 同款：rotate+translate 组合，元素中心沿 20px
   半径画圆游走、自身朝向不变；手图片不动）。方向：外环顺 / 中环逆 / 内环顺 */
@keyframes glance-orbit {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

/* ---- 右侧圆组 @ (1192, 36.81) 1133.19 正方（右侧溢出 405px 裁剪） ---- */
.acs-roles__deco {
  position: absolute;
  left: 62.08%;         /* 1192/1920 */
  top: 3.07%;           /* 36.81/1200 */
  width: 59.02%;        /* 1133.19/1920 */
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.acs-roles__circle {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.acs-roles__circle--1 {
  left: 0;
  top: 0;
  width: 100%;          /* 蓝环 1133.19 */
  aspect-ratio: 1 / 1;
  animation: glance-orbit 6s linear infinite;   /* 外环顺时针小幅公转 */
}

.acs-roles__circle--2 {
  left: 10%;            /* 113.32/1133.19 居中 */
  top: 10%;
  width: 80%;           /* 906.55/1133.19 */
  aspect-ratio: 1 / 1;
  animation: glance-orbit 6s linear infinite reverse;   /* 中环逆时针小幅公转 */
}

.acs-roles__circle--3 {
  left: 17.2%;          /* 194.91/1133.19 */
  top: 17.3%;           /* 196.04/1133.19 */
  width: 65.5%;         /* 742.24/1133.19 */
  aspect-ratio: 1 / 1;
  animation: glance-orbit 4s linear infinite;   /* 内环顺时针小幅公转 */
}

.acs-roles__hand {
  position: absolute;
  left: 2.85%;          /* 32.31/1133.19 */
  top: 12.73%;          /* 144.19/1133.19 */
  width: 61.33%;        /* 695/1133.19 */
  aspect-ratio: 695 / 780;
  object-fit: cover;
}

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

@media (max-width: 1440px) {
  .acs-roles {
    height: auto;
  }
  .acs-roles__deco {
    display: none;
  }
  .acs-roles__content {
    position: static;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 60px;
    box-sizing: border-box;
  }
  .acs-roles__title {
    font-size: 52px;
    margin-bottom: 60px;
  }
  .acs-roles__items {
    gap: 40px;
  }
  .acs-roles__item {
    gap: 48px;
  }
  .acs-roles__icon {
    width: 110px;
    aspect-ratio: 140 / 115;
  }
  .acs-roles__item:nth-child(n) .acs-roles__text {
    max-width: 100%;
  }
  .acs-roles__item-title {
    font-size: 26px;
    margin-bottom: 10px;
  }
  .acs-roles__item-desc {
    font-size: 19px;
  }
}

@media (max-width: 768px) {
  .acs-roles__content {
    padding: 64px 24px;
  }
  .acs-roles__title {
    font-size: 32px;
    text-align: center;
    letter-spacing: -0.03em;
    margin-bottom: 40px;
  }
  /* 移动端：标题在 "Colloidal" 前强制换行 */
  .acs-roles__title-break {
    display: block;
  }
  .acs-roles__items {
    gap: 32px;
  }
  .acs-roles__item {
    gap: 16px;
  }
  .acs-roles__item:nth-child(n) .acs-roles__text {
    flex: 1;
    min-width: 0;
  }
  .acs-roles__icon {
    width: 90px;
    aspect-ratio: 140 / 115;
  }
  .acs-roles__item-title {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .acs-roles__item-desc {
    font-size: 15px;
    line-height: 1.6;
  }
}