@charset "UTF-8";

/* ============================================================
   BACKGROUND BASE
============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -6;
  pointer-events: none;
  background:
    radial-gradient(
      108vw 108vw at var(--orb-x) var(--orb-y),
      rgba(74,140,255,.12) 0%,
      rgba(74,140,255,.06) 30%,
      rgba(74,140,255,0) 70%
    ),
    linear-gradient(180deg, #f5faff 0%, #ffffff 100%);
  filter: blur(10px) saturate(115%);
  transform: translateZ(0);
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .14;
  background-image: radial-gradient(rgba(0,0,0,.06) .5px, transparent .6px);
  background-size: 10px 10px;
  mix-blend-mode: soft-light;
}

/* ============================================================
   GRADIENT ORBS（固定・静的）
============================================================ */
.bg-orbs {
  position: fixed;
  inset: -12%;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
  filter: blur(16px) saturate(120%);
  transform: translateZ(0);
}

.bg-orb {
  position: absolute;
  top: 0; left: 0;
  mix-blend-mode: screen;
}

/* orb-a: 右 下目 */
.bg-orb.-a {
  width: 72vw; height: 72vw;
  min-width: 500px; min-height: 500px;
  background: radial-gradient(ellipse at 38% 55%,
    rgba(74,140,255,.10) 0%,
    rgba(74,140,255,.04) 50%,
    rgba(74,140,255,0) 100%);
  transform: translate3d(62vw, 18vh, 0) rotate(42deg);
  border-radius: 76% 24% 55% 45% / 18% 82% 22% 78%;
}

/* orb-b: 左下 横細長 */
.bg-orb.-b {
  width: 76vw; height: 50vw;
  min-width: 500px; min-height: 250px;
  background: radial-gradient(ellipse at 62% 42%,
    rgba(160,120,255,.09) 0%,
    rgba(160,120,255,.04) 52%,
    rgba(160,120,255,0) 100%);
  transform: translate3d(-22vw, 60vh, 0) rotate(-38deg);
  border-radius: 12% 88% 74% 26% / 72% 28% 84% 16%;
}

/* orb-c: 中央 縦長 */
.bg-orb.-c {
  width: 54vw; height: 66vw;
  min-width: 300px; min-height: 380px;
  background: radial-gradient(ellipse at 50% 48%,
    rgba(100,190,150,.10) 0%,
    rgba(100,190,150,.04) 50%,
    rgba(100,190,150,0) 100%);
  transform: translate3d(18vw, 38vh, 0) rotate(68deg);
  border-radius: 88% 12% 32% 68% / 44% 56% 16% 84%;
}

/* orb-d: 右下 */
.bg-orb.-d {
  width: 64vw; height: 44vw;
  min-width: 360px; min-height: 250px;
  background: radial-gradient(ellipse at 45% 55%,
    rgba(74,140,255,.08) 0%,
    rgba(74,140,255,.02) 55%,
    rgba(74,140,255,0) 100%);
  transform: translate3d(60vw, 78vh, 0) rotate(-58deg);
  border-radius: 28% 72% 16% 84% / 78% 22% 62% 38%;
}

/* orb-e: 左上 */
.bg-orb.-e {
  width: 62vw; height: 62vw;
  min-width: 340px; min-height: 340px;
  background: radial-gradient(ellipse at 52% 46%,
    rgba(160,120,255,.08) 0%,
    rgba(160,120,255,.02) 52%,
    rgba(160,120,255,0) 100%);
  transform: translate3d(-14vw, -14vh, 0) rotate(112deg);
  border-radius: 64% 36% 88% 12% / 26% 74% 38% 62%;
}

/* orb-f: 右中 下目 */
.bg-orb.-f {
  width: 58vw; height: 54vw;
  min-width: 320px; min-height: 300px;
  background: radial-gradient(ellipse at 48% 52%,
    rgba(100,190,150,.09) 0%,
    rgba(100,190,150,.02) 54%,
    rgba(100,190,150,0) 100%);
  transform: translate3d(78vw, 48vh, 0) rotate(-82deg);
  border-radius: 18% 82% 60% 40% / 86% 14% 52% 48%;
}

/* ============================================================
   MOBILE: 軽量化
============================================================ */
@media (max-width: 767px) {
  .bg-orbs { filter: blur(8px); }
  body::after { display: none; }
  .bg-orb.-a { width: 52vw; height: 64vw; min-width: 200px; min-height: 240px; }
  .bg-orb.-b { width: 58vw; height: 42vw; min-width: 210px; min-height: 150px; }
  .bg-orb.-c { width: 46vw; height: 60vw; min-width: 180px; min-height: 220px; }
  .bg-orb.-d, .bg-orb.-e, .bg-orb.-f { opacity: .6; }
}

/* TOUCH: 重いアニメを無効化 */
@media (hover: none) {
  .hero-chara-img { animation: none !important; filter: none !important; }
  .status-dot { animation: none !important; box-shadow: 0 0 0 4px rgba(61,184,122,.22); }
  .color-grad { animation: none !important; background: #5b8cff; -webkit-background-clip: text; background-clip: text; }
  .reason-num { animation: none !important; }
}