/* ═══════════════════════════════════════════════
   GRADIENT BACKGROUND ANIMATION
   全ページ共通 — 薄いブルーのアンビエント背景
════════════════════════════════════════════════ */

#grad-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#grad-bg .grad-container {
  position: absolute;
  inset: 0;
  filter: blur(28px); /* 48px → 28px に抑える */
}

.grad-orb {
  position: absolute;
  width: 55%;
  height: 55%;
  /* 右下方向にオフセット */
  top: calc(55% - 27.5%);
  left: calc(58% - 27.5%);
  border-radius: 50%;
  opacity: 1;
}

/* Orb 1 — ソフトスカイブルー */
.grad-orb:nth-child(1) {
  background: radial-gradient(circle at center,
    rgba(186, 219, 255, 0.45) 0%,
    rgba(186, 219, 255, 0) 70%);
  transform-origin: center center;
  animation: gradFirst 20s ease-in-out infinite;
}

/* Orb 2 — ペリウィンクル */
.grad-orb:nth-child(2) {
  background: radial-gradient(circle at center,
    rgba(165, 195, 250, 0.35) 0%,
    rgba(165, 195, 250, 0) 70%);
  transform-origin: calc(50% - 380px);
  animation: gradSecond 26s ease-in-out infinite;
}

/* Orb 3 — アイスブルー */
.grad-orb:nth-child(3) {
  background: radial-gradient(circle at center,
    rgba(204, 228, 255, 0.30) 0%,
    rgba(204, 228, 255, 0) 70%);
  transform-origin: calc(50% + 380px);
  animation: gradThird 22s ease-in-out infinite;
}

/* Orb 4 — ライトシアン */
.grad-orb:nth-child(4) {
  background: radial-gradient(circle at center,
    rgba(147, 210, 252, 0.25) 0%,
    rgba(147, 210, 252, 0) 70%);
  transform-origin: calc(50% - 200px);
  animation: gradFourth 30s ease-in-out infinite;
  opacity: 0.7;
}

/* Orb 5 — パウダーブルー */
.grad-orb:nth-child(5) {
  background: radial-gradient(circle at center,
    rgba(173, 216, 255, 0.30) 0%,
    rgba(173, 216, 255, 0) 70%);
  transform-origin: calc(50% - 700px) calc(50% + 700px);
  animation: gradFifth 34s ease-in-out infinite;
}

/* インタラクティブ — マウス追従オーブ（より目立つように） */
#grad-interactive {
  position: absolute;
  width: 28%;
  height: 28%;
  top: -14%;
  left: -14%;
  background: radial-gradient(circle at center,
    rgba(120, 190, 255, 0.28) 0%,
    rgba(120, 190, 255, 0.05) 50%,
    rgba(120, 190, 255, 0) 70%);
  opacity: 0.45;
  pointer-events: none;
  will-change: transform;
}

/* ── Keyframes ── */
@keyframes gradFirst {
  0%   { transform: translateX(0)    translateY(-28%); }
  33%  { transform: translateX(-22%) translateY(-8%); }
  66%  { transform: translateX(15%)  translateY(-18%); }
  100% { transform: translateX(0)    translateY(-28%); }
}
@keyframes gradSecond {
  0%   { transform: translateX(0)   translateY(-18%); }
  40%  { transform: translateX(28%) translateY(-28%); }
  70%  { transform: translateX(12%) translateY(10%); }
  100% { transform: translateX(0)   translateY(-18%); }
}
@keyframes gradThird {
  0%   { transform: translateX(0)    translateY(28%); }
  35%  { transform: translateX(-28%) translateY(8%); }
  70%  { transform: translateX(-10%) translateY(-12%); }
  100% { transform: translateX(0)    translateY(28%); }
}
@keyframes gradFourth {
  0%   { transform: translateX(0)   translateY(-8%); }
  50%  { transform: translateX(-8%) translateY(28%); }
  100% { transform: translateX(0)   translateY(-8%); }
}
@keyframes gradFifth {
  0%   { transform: translateX(0)    translateY(-18%); }
  45%  { transform: translateX(-18%) translateY(-28%); }
  80%  { transform: translateX(10%)  translateY(-5%); }
  100% { transform: translateX(0)    translateY(-18%); }
}