/* ==========================
Hero Orbs Area
========================== */

.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* ==========================
Wrapper（JS制御）
========================== */

.orb-wrap {
  position: absolute;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ==========================
Float layer（CSS演出）
========================== */

.orb-float {
  position: relative;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

/* ==========================
Orb
========================== */

.orb {
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;

  transition:
    filter 0.35s ease,
    transform 0.25s ease;

  filter:
    drop-shadow(0 18px 26px rgba(35, 55, 110, 0.15))
    drop-shadow(0 0 28px rgba(220, 240, 255, 0.42));
}

/* ==========================
Image
========================== */

.orb img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  backface-visibility: hidden;
}

/* ==========================
Light
========================== */

.orb-light {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  pointer-events: none;

  background: radial-gradient(
    circle at 30% 25%,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.2) 28%,
    rgba(180, 220, 255, 0.12) 48%,
    transparent 72%
  );

  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0.85;
  z-index: 5;
  will-change: transform, opacity;
}

/* ==========================
Shadow
========================== */

.orb::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 72%;
  height: 18px;
  border-radius: 50%;
  background: rgba(40, 55, 105, 0.18);
  filter: blur(16px);
  opacity: 0.45;
  z-index: -1;
}

/* ==========================
Aura
========================== */

.orb::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.28),
    rgba(190, 225, 255, 0.12) 42%,
    transparent 72%
  );
  filter: blur(20px);
  opacity: 0.9;
  z-index: -2;
}

/* ==========================
Hover（JS state統一）
========================== */

.hero.is-active .orb {
  filter:
    drop-shadow(0 22px 30px rgba(35, 55, 110, 0.22))
    drop-shadow(0 0 42px rgba(235, 245, 255, 0.72));
}

/* ==========================
Near state
========================== */

.orb-wrap.is-near .orb::after {
  opacity: 0.75;
  transform:
    translateX(-50%)
    scale(1.15);
}

/* ==========================
Sizes
========================== */

.orb-1 {
  width: clamp(55px, 4vw, 90px);
  right: 16%;
  bottom: 27%;
}

.orb-2 {
  width: clamp(90px, 7vw, 120px);
  right: 8%;
  top: 17%;
}

.orb-3 {
  width: clamp(145px, 13vw, 170px);
  right: 43%;
  top: 20%;
}

/* ==========================
Float animations
========================== */

.orb-1 .orb-float {
  animation: floatSmall 8s ease-in-out infinite;
}

.orb-2 .orb-float {
  animation: floatMedium 11s ease-in-out infinite;
}

.orb-3 .orb-float {
  animation: floatLarge 14s ease-in-out infinite;
}

@keyframes floatSmall {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(5px,-10px,0); }
}

@keyframes floatMedium {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-8px,8px,0); }
}

@keyframes floatLarge {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(8px,6px,0); }
}

/* ==========================
Responsive
========================== */

@media (max-width: 768px) {
  .orb-1 { right: 8%; bottom: 24%; }
  .orb-2 { right: 3%; top: 14%; }
  .orb-3 { right: 30%; top: 18%; }
}