/* ============================================================
 * ATMOSPHERE — Navapraba Wedding
 * ============================================================
 * Background ambient effects untuk 3 tema undangan.
 * 
 * Implementasi 2 layer:
 * 1. CSS-only floating dots (Pure) — ringan, no JS
 * 2. Canvas-based particles (Atelier leaves, Heritage gold) — di JS
 * 
 * Plus: subtle background textures (gold flecks, paper noise)
 * pakai SVG data URI (no extra HTTP request).
 * ============================================================ */

/* ============ BASE: container untuk particles canvas ============ */
.nv-atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.nv-atmosphere canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
 * PURE — Floating Dots (CSS-only)
 * ============================================================ */
.nv-atmosphere.theme-pure::before,
.nv-atmosphere.theme-pure::after,
.nv-atmosphere.theme-pure .dot {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.4) 0%, transparent 70%);
    will-change: transform;
}

.nv-atmosphere.theme-pure::before {
    width: 200px;
    height: 200px;
    top: 10%;
    left: -5%;
    animation: nv-drift-1 18s ease-in-out infinite;
}

.nv-atmosphere.theme-pure::after {
    width: 280px;
    height: 280px;
    bottom: 15%;
    right: -8%;
    background: radial-gradient(circle, rgba(196, 149, 100, 0.3) 0%, transparent 70%);
    animation: nv-drift-2 22s ease-in-out infinite;
}

.nv-atmosphere.theme-pure .dot {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(139, 90, 43, 0.5) 0%, transparent 70%);
}

.nv-atmosphere.theme-pure .dot:nth-child(1) {
    top: 20%; left: 15%;
    animation: nv-float-up 12s ease-in-out infinite;
    animation-delay: 0s;
}
.nv-atmosphere.theme-pure .dot:nth-child(2) {
    top: 60%; left: 80%;
    animation: nv-float-up 15s ease-in-out infinite;
    animation-delay: 3s;
}
.nv-atmosphere.theme-pure .dot:nth-child(3) {
    top: 35%; left: 70%;
    animation: nv-float-up 18s ease-in-out infinite;
    animation-delay: 6s;
}
.nv-atmosphere.theme-pure .dot:nth-child(4) {
    top: 80%; left: 25%;
    animation: nv-float-up 14s ease-in-out infinite;
    animation-delay: 9s;
}
.nv-atmosphere.theme-pure .dot:nth-child(5) {
    top: 45%; left: 50%;
    animation: nv-float-up 20s ease-in-out infinite;
    animation-delay: 12s;
}

@keyframes nv-drift-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(40px, 30px, 0) scale(1.1); }
    66%      { transform: translate3d(-20px, 50px, 0) scale(0.9); }
}

@keyframes nv-drift-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-30px, -40px, 0) scale(1.15); }
}

@keyframes nv-float-up {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
    20%      { opacity: 0.8; }
    80%      { opacity: 0.8; }
    100%     { transform: translate3d(0, -100px, 0); opacity: 0; }
}

/* ============================================================
 * ATELIER — Watercolor Blobs (CSS) + Canvas Leaves
 * ============================================================ */
.nv-atmosphere.theme-atelier::before,
.nv-atmosphere.theme-atelier::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    filter: blur(40px);
}

.nv-atmosphere.theme-atelier::before {
    width: 350px;
    height: 350px;
    top: 5%;
    left: -10%;
    background: radial-gradient(circle, rgba(156, 175, 136, 0.35) 0%, transparent 65%);
    animation: nv-blob-1 25s ease-in-out infinite;
}

.nv-atmosphere.theme-atelier::after {
    width: 400px;
    height: 400px;
    bottom: 10%;
    right: -15%;
    background: radial-gradient(circle, rgba(212, 165, 165, 0.32) 0%, transparent 65%);
    animation: nv-blob-2 30s ease-in-out infinite;
}

@keyframes nv-blob-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25%      { transform: translate3d(60px, 80px, 0) scale(1.2); }
    50%      { transform: translate3d(100px, -40px, 0) scale(0.9); }
    75%      { transform: translate3d(-20px, 60px, 0) scale(1.1); }
}

@keyframes nv-blob-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(-80px, -60px, 0) scale(1.15); }
    66%      { transform: translate3d(40px, -100px, 0) scale(0.95); }
}

/* Extra blob ke-3 (terracotta accent) */
.nv-atmosphere.theme-atelier .extra-blob {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    top: 45%;
    left: 60%;
    background: radial-gradient(circle, rgba(201, 140, 107, 0.22) 0%, transparent 70%);
    filter: blur(50px);
    will-change: transform;
    animation: nv-blob-3 28s ease-in-out infinite;
}

@keyframes nv-blob-3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-80px, 40px, 0) scale(1.25); }
}

/* ============================================================
 * HERITAGE — Subtle Gold Texture (Canvas does the particles)
 * ============================================================ */
.nv-atmosphere.theme-heritage {
    /* Subtle gold flecks texture sebagai dasar */
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(197, 162, 83, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(212, 184, 109, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(240, 228, 194, 0.04) 0%, transparent 40%);
}

/* Subtle radial glow di pojok atas (golden hour feel) */
.nv-atmosphere.theme-heritage::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(197, 162, 83, 0.18) 0%, transparent 50%);
    pointer-events: none;
    filter: blur(20px);
}

/* ============================================================
 * RESPECT REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nv-atmosphere::before,
    .nv-atmosphere::after,
    .nv-atmosphere .dot,
    .nv-atmosphere .extra-blob {
        animation: none !important;
    }
    .nv-atmosphere canvas {
        display: none !important;
    }
}

/* ============================================================
 * REDUCE INTENSITY DI MOBILE (battery-friendly)
 * ============================================================ */
@media (max-width: 480px) {
    /* Pure: kurangi blob besar */
    .nv-atmosphere.theme-pure::before {
        width: 150px; height: 150px;
    }
    .nv-atmosphere.theme-pure::after {
        width: 200px; height: 200px;
    }
    
    /* Atelier: kurangi blur intensity (mahal di mobile GPU) */
    .nv-atmosphere.theme-atelier::before,
    .nv-atmosphere.theme-atelier::after,
    .nv-atmosphere.theme-atelier .extra-blob {
        filter: blur(30px);
    }
    .nv-atmosphere.theme-atelier::before {
        width: 250px; height: 250px;
    }
    .nv-atmosphere.theme-atelier::after {
        width: 300px; height: 300px;
    }
    .nv-atmosphere.theme-atelier .extra-blob {
        width: 180px; height: 180px;
    }
    
    /* Heritage: kurangi radial glow */
    .nv-atmosphere.theme-heritage::before {
        width: 350px; height: 350px;
    }
}

/* ============================================================
 * PRINT
 * ============================================================ */
@media print {
    .nv-atmosphere { display: none !important; }
}