/* ===========================================================================
   AETHER Pack 04 — Orbit Stats
   同心円を人が公転し、中央の数字が数え上がる。「人が集まっている」を伝える。
   =========================================================================== */

.aeo-has-pack {
  --accent:  #8b5cf6;
  --accent2: #6366f1;
  --ink:     #f4f2ff;
  --bg:      #15102b;
  --bg2:     #1d1740;
}

/* ===================== ヒーロー ===================== */
.ob {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: center;
  background: #15102b; color: #f4f2ff;
}
.ob-glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(42% 40% at 26% 22%, color-mix(in srgb, #8b5cf6 42%, transparent), transparent 70%),
    radial-gradient(46% 44% at 78% 76%, color-mix(in srgb, #6366f1 40%, transparent), transparent 72%);
  filter: blur(24px);
  animation: ob-drift 24s ease-in-out infinite alternate;
}
@keyframes ob-drift { from { transform: translate3d(-2%,-1%,0) scale(1);} to { transform: translate3d(3%,2%,0) scale(1.08);} }

.ob-inner {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 0 clamp(20px, 6vw, 60px);
}
.ob-eyebrow { font-size:.76rem; letter-spacing:.3em; font-weight:700; color:#8b5cf6; margin:0 0 20px; animation: ob-rise .8s both; }
.ob-title {
  font-size: clamp(2.2rem, 5.6vw, 4.4rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.16; margin: 0 0 22px; max-width: 16em;
  animation: ob-rise .9s .1s both;
}
.ob-lead { font-size: clamp(.94rem,1.4vw,1.05rem); line-height:2; max-width:32em; margin:0;
  color: color-mix(in srgb, #f4f2ff 72%, transparent); animation: ob-rise .9s .22s both; }
.ob-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; animation: ob-rise .9s .34s both; }
@keyframes ob-rise { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }

.ob-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px; border-radius:999px;
  background:#8b5cf6; color:#15102b; font-size:.95rem; font-weight:700; text-decoration:none;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.ob-btn:hover { transform: translateY(-2px); }
.ob-btn--ghost { background:transparent; color:#f4f2ff; border:1.5px solid color-mix(in srgb,#f4f2ff 30%,transparent); }

/* 公転 */
.ob-orbit {
  position: absolute; right: -6vw; top: 50%; transform: translateY(-50%);
  width: min(76vw, 660px); aspect-ratio: 1; z-index: 1;
}
.ob-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.ob-num { display:block; font-size: clamp(2.4rem,6vw,4.2rem); font-weight:900; letter-spacing:-.04em; line-height:1; }
.ob-label { font-size:.7rem; letter-spacing:.24em; color: color-mix(in srgb,#f4f2ff 55%,transparent); margin-top:8px; }

/* リングの直径を明示する（％だと子の配置計算ができないため） */
.ob-ring {
  position: absolute; top: 50%; left: 50%;
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #f4f2ff 14%, transparent);
}
.ob-ring--1 { --d: min(33vw, 290px); animation: ob-spin 30s linear infinite; }
.ob-ring--2 { --d: min(52vw, 450px); animation: ob-spin 46s linear infinite reverse; }
.ob-ring--3 { --d: min(70vw, 608px); animation: ob-spin 64s linear infinite; }

/* リング上の1つ。--a の角度だけ回して縁に置く */
.ob-ring i {
  --s: clamp(38px, 6.4vw, 58px);
  position: absolute; left: 50%; top: 0;
  width: var(--s); height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top:  calc(var(--s) / -2);
  /* 自分の箱の上端からリング中心までの距離を回転軸にする */
  transform-origin: 50% calc(var(--s) / 2 + var(--d) / 2);
  transform: rotate(var(--a));
}

.ob-ring img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid color-mix(in srgb, #8b5cf6 60%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
/* リングの回転を打ち消して顔を正立させる（写真だけ逆回転） */
.ob-ring--1 img { animation: ob-spin-rev 30s linear infinite; }
.ob-ring--2 img { animation: ob-spin 46s linear infinite; }
.ob-ring--3 img { animation: ob-spin-rev 64s linear infinite; }

@keyframes ob-spin     { to { transform: rotate(360deg); } }
@keyframes ob-spin-rev { to { transform: rotate(-360deg); } }

.ob-scroll { position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font-size:.62rem; letter-spacing:.3em; color: color-mix(in srgb,#f4f2ff 45%,transparent); z-index:2; }

@media (max-width: 900px) { .ob-orbit { opacity:.32; right:-24vw; } }

/* ===================== ページ全体へ ===================== */
.aeo-has-pack .aeo-section { position: relative; }
/* 数字を主役に */
.aeo-has-pack .aeo-strength__no { font-size: 2.8rem; font-weight: 900; }
/* カードを円くやわらかく */
.aeo-has-pack .aeo-works__card,
.aeo-has-pack .aeo-voice__card,
.aeo-has-pack .aeo-staff__photo { border-radius: 20px; }
.aeo-has-pack .aeo-staff__photo { aspect-ratio: 1; border-radius: 50%; max-width: 200px; margin-inline: auto; }
/* CTAを発光させる */
.aeo-has-pack .aeo-btn { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .ob-glow, .ob-ring, .ob-ring img { animation: none; }
  .ob-eyebrow,.ob-title,.ob-lead,.ob-cta { animation: none; opacity:1; transform:none; }
}