/* ===== 漂浮装饰物 decorations =====
 * 每个 section 内放 7 个几何漂浮物
 * 通过 nth-child 差异化位置、颜色、动画速度
 */
.deco-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.deco {
  position: absolute;
  border-radius: 50%;
  opacity: .6;
  will-change: transform;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.06));
}

/* --- 圆点 --- */
.deco.d1 {
  width: 14px; height: 14px;
  top: 12%; left: 8%;
  background: var(--c-primary);
  animation: floatY 6s ease-in-out infinite;
}
.deco.d2 {
  width: 10px; height: 10px;
  top: 68%; left: 5%;
  background: var(--c-accent);
  animation: floatY 8s ease-in-out infinite reverse;
}
.deco.d3 {
  width: 20px; height: 20px;
  top: 24%; right: 10%;
  background: color-mix(in srgb, var(--c-secondary) 70%, transparent);
  animation: floatX 9s ease-in-out infinite;
}

/* --- 半月环 --- */
.deco.d4 {
  width: 60px; height: 60px;
  top: 15%; right: 18%;
  border: 3px solid color-mix(in srgb, var(--c-primary) 55%, transparent);
  background: transparent;
  animation: floatY 7s ease-in-out infinite;
}
.deco.d5 {
  width: 40px; height: 40px;
  bottom: 12%; right: 8%;
  border: 3px solid color-mix(in srgb, var(--c-secondary) 55%, transparent);
  background: transparent;
  animation: floatX 10s ease-in-out infinite reverse;
}

/* --- 三角形 --- */
.deco.d6 {
  width: 0; height: 0;
  top: 40%; left: 3%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid color-mix(in srgb, var(--c-accent) 70%, transparent);
  background: transparent;
  border-radius: 0;
  animation: floatY 9s ease-in-out infinite;
}

/* --- 十字/星星 --- */
.deco.d7 {
  width: 22px; height: 22px;
  bottom: 20%; left: 40%;
  background: transparent;
  border-radius: 0;
  opacity: .5;
  animation: spinSlow 14s linear infinite;
}
.deco.d7::before,
.deco.d7::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--c-primary) 60%, transparent);
  border-radius: 2px;
}
.deco.d7::before { left: 45%; top: 0; width: 3px; height: 100%; }
.deco.d7::after  { top: 45%; left: 0; height: 3px; width: 100%; }

/* --- 差异化：不同 section 位置错开 --- */
.section[data-type="cards"]   .deco.d1 { top: 20%; left: 15%; }
.section[data-type="cards"]   .deco.d3 { top: 60%; right: 5%; }
.section[data-type="service"] .deco.d2 { top: 30%; left: 8%; }
.section[data-type="service"] .deco.d5 { top: 10%; right: 12%; }
.section[data-type="timeline"] .deco.d4 { top: 70%; right: 15%; }
.section[data-type="banner"]  { padding: 60px 0; }
.section[data-type="banner"]  .deco { opacity: .3; }

/* --- 动画 --- */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-24px) rotate(10deg); }
}
@keyframes floatX {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50%      { transform: translateX(20px) rotate(-10deg); }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* 移动端减少漂浮物避免拥挤 */
@media (max-width: 720px) {
  .deco.d4, .deco.d5, .deco.d7 { display: none; }
  .deco { opacity: .4; }
}