/* ============================================================================
   ambient-bg.css — 고급스러운 앰비언트 배경 (HISTORY Part 225 · Part 226 강도 상향: 첫 적용이 너무 옅어 사용자가 변화를 알아보지 못했다)

   [비즈니스 로직] 사용자가 「SENTINEL AI」 예시(Spline 3D 배경)처럼 배경을 고급스럽게 바꾸길 원했다.
   Spline 은 ESM 전용(§3.4·file:// 위반)이고 예시 장면은 타인 저작물이며, 오늘 만든 3D 히어로와 함께면
   WebGL 이 2개가 된다 → 같은 분위기를 **CSS 만으로** 만든다(라이브러리·WebGL 0, 측정값 영향 0).

   구성(아래에서 위로): 바탕색 → 흐르는 빛 번짐 3개 → 미세 격자 → 노이즈 질감 → 비네트
   - 사용: <div class="pc-ambient" aria-hidden="true"><i class="pc-ambient__glow g1"></i><i class="pc-ambient__glow g2"></i><i class="pc-ambient__glow g3"></i></div>
   - 고정 위치 · z-index -1 · 클릭 통과. 테마 색은 각 페이지의 --body-bg 를 따른다
   - 애니메이션은 transform 만(GPU 합성). prefers-reduced-motion 이면 정지
   ============================================================================ */

.pc-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--body-bg, #0f172a);
}

/* ── 흐르는 빛 번짐 ─────────────────────────────────────────────────── */
.pc-ambient__glow {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    will-change: transform;
}
.pc-ambient__glow.g1 {   /* 하늘 — 브랜드 액센트(#38bdf8), 왼쪽 위 */
    left: -22vmax; top: -30vmax;
    background: radial-gradient(closest-side, rgba(56, 189, 248, 0.34), rgba(56, 189, 248, 0) 100%);
    animation: pc-drift-a 34s ease-in-out infinite alternate;
}
.pc-ambient__glow.g2 {   /* 보라 — 오른쪽 */
    right: -26vmax; top: -6vmax;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.28), rgba(139, 92, 246, 0) 100%);
    animation: pc-drift-b 42s ease-in-out infinite alternate;
}
.pc-ambient__glow.g3 {   /* 청록 — 아래 */
    left: 18vw; bottom: -40vmax;
    background: radial-gradient(closest-side, rgba(20, 184, 166, 0.22), rgba(20, 184, 166, 0) 100%);
    animation: pc-drift-c 50s ease-in-out infinite alternate;
}
@keyframes pc-drift-a { from { transform: translate3d(0, 0, 0) scale(1); }    to { transform: translate3d(9vw, 7vh, 0) scale(1.12); } }
@keyframes pc-drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-8vw, 10vh, 0) scale(0.95); } }
@keyframes pc-drift-c { from { transform: translate3d(0, 0, 0) scale(1); }    to { transform: translate3d(-6vw, -8vh, 0) scale(1.1); } }

/* ── 미세 격자 — 화면 위쪽 가운데에서 가장 진하고 가장자리로 사라진다 ───────── */
.pc-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.11) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 22%, #000 25%, transparent 78%);
            mask-image: radial-gradient(ellipse 80% 65% at 50% 22%, #000 25%, transparent 78%);
}

/* ── 노이즈 질감 + 비네트 ───────────────────────────────────────────── */
.pc-ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(2, 6, 23, 0.55) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 100% 100%, 160px 160px;
}

/* ── 라이트 모드: 같은 구성의 옅은 판 ───────────────────────────────── */
html:not(.dark) .pc-ambient__glow.g1 { background: radial-gradient(closest-side, rgba(56, 189, 248, 0.24), rgba(56, 189, 248, 0) 100%); }
html:not(.dark) .pc-ambient__glow.g2 { background: radial-gradient(closest-side, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0) 100%); }
html:not(.dark) .pc-ambient__glow.g3 { background: radial-gradient(closest-side, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0) 100%); }
html:not(.dark) .pc-ambient::before {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.07) 1px, transparent 1px);
}
html:not(.dark) .pc-ambient::after {
    background-image:
        radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(148, 163, 184, 0.18) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 동작 줄이기: 빛 번짐을 멈춘다(정지 화면도 같은 분위기) ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .pc-ambient__glow { animation: none !important; }
}