/* ===== Hero Orbit (11 logos) ===== */

.y70-orbit-wrap{
  position: relative;
  width: 100%;
  max-width: 520px; /* ปรับได้ */
  margin: 0 auto;
  padding: 18px 0 6px;
}

/* center content stays normal (not rotating) */
.y70-orbit-center{
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* orbit layer rotates via CSS variable --rot (set by JS) */
.y70-orbit{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5; /* “จาง” ตามที่ต้องการ */
  filter: saturate(.95);
}

.y70-orbit::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      from var(--rot),
      var(--orbit-link-color) 0deg 1deg,
      transparent 1deg calc(360deg / var(--count))
    );
  -webkit-mask: radial-gradient(circle at center, transparent 0 22%, black 22% 76%, transparent 76%);
  mask: radial-gradient(circle at center, transparent 0 22%, black 22% 76%, transparent 76%);
  opacity: 0.55;
}

/* Responsive radius & size */
.y70-orbit-wrap{
  --count: 11;
  --radius: clamp(220px, 34vw, 360px);
  --logoSize: clamp(54px, 8vw, 100px);
  --rot: 0deg; /* JS จะอัปเดต */
}

/* Each item placed by angle = i*(360/count) + rot
   Then counter-rotated so the logo stays upright */
.y70-orbit-item{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--logoSize);
  height: var(--logoSize);
  transform:
    translate(-50%, -50%)
    rotate(calc((360deg / var(--count)) * var(--i) + var(--rot)))
    translateX(var(--radius))
    rotate(calc(-1 * ((360deg / var(--count)) * var(--i) + var(--rot))));
  transform-origin: center center;
}

.y70-orbit-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;

  /* วงกลมพื้นหลังขาว (ถ้าต้องการเหมือนตัวอย่าง) */

  /* เงาเบา ๆ */
}

/* ให้ภาพหลักใหญ่กว่าวงโคจร */
.y70-campaign-logo{
  width: clamp(150px, 34vw, 220px);
  height: auto;
}

.y70-orbit-wrap{
  --radius: clamp(280px, 48vw, 480px);
  --logoSize: clamp(72px, 11vw, 156px);
}


