/* =========================
   Sui Norublea — background.css (JADE Elegant)
   目的：境目を消して上品に（線は霧に溶ける）
   ========================= */

:root{
  --ns-bg-base:#050505;

  --ns-bg-opacity:0.2;
  --ns-bg-blur:36px;

  --ns-breath-min: 0.84;
  --ns-breath-max: 1.00;
  --ns-breath-sec: 10.5s;

  /* ✅ 冷たい翡翠（青寄り） */
  --jade-1: 85, 210, 205;   /* 主光：ブルーグリーン */
  --jade-2: 60, 185, 190;   /* 面光：さらに冷たい */
  --jade-3: 120, 235, 225;  /* 線：シアン寄りで氷感 */
}

/* ベース */
html, body{
  background: var(--ns-bg-base);
}

/* 合成事故止め */
body{
  position: relative;
  isolation: isolate;
}

/* 背景レイヤー（本体） */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  /* ✅ 境目を消すコツ：
     1) 主光を「中心強→外側を長く」(70〜82%まで引っ張る)
     2) さらに “霧のフェザー” を重ねて段差を消す
     3) 線は低コントラスト + 透明区間長め + ぼかしで溶かす
  */
  background:
    /* 霧フェザー（境目消しの主役） */
    radial-gradient(
      1100px 760px at 50% 24%,
      rgba(255,255,255,0.01),
      rgba(0,0,0,0) 0.01%
    ),

    /* 翡翠の主光（境目が出にくい落ち方に変更） */
    radial-gradient(
      1000px 720px at 52% 40%,
      rgba(var(--jade-1), 0.46),
      rgba(var(--jade-1), 0.12) 15%,
      rgba(0,0,0,0) 80%
    ),

    /* 翡翠の面光（薄く・広く） */
    linear-gradient(
      135deg,
      rgba(var(--jade-2), 0.10) 0%,
      rgba(var(--jade-2), 0.05) 22%,
      rgba(0,0,0,0) 58%
    ),

    /* 翡翠の線（かなり淡く、溶ける設定） */
    repeating-linear-gradient(
      135deg,
      rgba(var(--jade-3), 0.030) 0px,
      rgba(var(--jade-3), 0.030) 80px,
      rgba(0,0,0,0) 190px,
      rgba(0,0,0,0) 320px
    );

  opacity: var(--ns-bg-opacity);
  filter: blur(var(--ns-bg-blur));
  mix-blend-mode: normal;

  /* “呼吸 + 漂い” を上品に（急変なし） */
  animation:
    nsLightDrift 18s ease-in-out infinite,
    nsBreath var(--ns-breath-sec) ease-in-out infinite;

  will-change: transform, opacity, filter;
}

/* うっすらビネット（境目の“見え”をさらに抑える） */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(
      1200px 900px at 50% 45%,
      rgba(255,255,255,0.03),
      rgba(0,0,0,0) 70%
    ),
    radial-gradient(
      1400px 1000px at 50% 14%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0.55) 78%,
      rgba(0,0,0,0.86) 100%
    );

  opacity: 1;
  will-change: transform;
  animation: nsDepthDrift 30s ease-in-out infinite;
}

/* “中身”を前へ */
#nsScaleViewport,
#nsPaws,
#nsAudioDock{
  position: relative;
  z-index: 1;
}

/* 漂い */
@keyframes nsLightDrift{
  0%   { transform: translate3d(-6%, -5%, 0) scale(1.02) rotate(0deg); }
  50%  { transform: translate3d(5%, 4%, 0)  scale(1.06) rotate(0.25deg); }
  100% { transform: translate3d(-6%, -5%, 0) scale(1.02) rotate(0deg); }
}

/* 呼吸（猫の光みたいに、ふわっと） */
@keyframes nsBreath{
  0%   { opacity: calc(var(--ns-bg-opacity) * var(--ns-breath-min)); filter: blur(calc(var(--ns-bg-blur) * 1.02)); }
  50%  { opacity: calc(var(--ns-bg-opacity) * var(--ns-breath-max)); filter: blur(calc(var(--ns-bg-blur) * 0.98)); }
  100% { opacity: calc(var(--ns-bg-opacity) * var(--ns-breath-min)); filter: blur(calc(var(--ns-bg-blur) * 1.02)); }
}

/* 奥行き */
@keyframes nsDepthDrift{
  0%   { transform: translate3d(0%, 0%, 0) scale(1.00); }
  50%  { transform: translate3d(-1.2%, 0.8%, 0) scale(1.02); }
  100% { transform: translate3d(0%, 0%, 0) scale(1.00); }
}

@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none !important; }
}