/* === SCENE BACKGROUNDS — CSS Gradient + Image Blend === */
/* Gradient sebagai base layer, gambar sebagai overlay dengan opacity 0.6 */

/* Chapter 1 — Pantai Sanur (with real image) */
.scene-ch01 {
  background: linear-gradient(180deg,
    #0a1018 0%,
    #0d1a2a 30%,
    #1a2a3a 50%,
    #152030 70%,
    #0a0d15 100%
  );
  position: relative;
}
.scene-ch01::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(200,150,80,0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* Chapter 2 — Pasar Bisu (kota senja misterius) */
.scene-ch02 {
  background: linear-gradient(180deg,
    #1a0a1a 0%,
    #2a1020 20%,
    #3a1a30 40%,
    #4a2030 50%,
    #3a1828 65%,
    #1a0a10 100%
  );
}

/* Chapter 3 — Panggung Bayangan (teater cahaya lilin) */
.scene-ch03 {
  background: radial-gradient(ellipse at 50% 60%, #3a2040 0%, #1a0a20 40%, #0a0510 100%);
}
.scene-ch03::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 80%, rgba(200,150,50,0.1) 0%, transparent 30%);
  animation: flicker 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flicker {
  0%,100% { opacity: 0.3; }
  25% { opacity: 0.6; }
  50% { opacity: 0.2; }
  75% { opacity: 0.5; }
}

/* Chapter 4 — Kota Sunyi (abstrak urban) */
.scene-ch04 {
  background: linear-gradient(180deg,
    #0a0a1a 0%,
    #1a1020 30%,
    #2a1a30 50%,
    #1a1028 70%,
    #0a0a14 100%
  );
}

/* Chapter 5 — Sawah Terbang (mistik terasering bulan) */
.scene-ch05 {
  background: linear-gradient(180deg,
    #0a1a0a 0%,
    #0d2a15 25%,
    #1a3a20 45%,
    #2a4a30 60%,
    #1a3a28 75%,
    #0d1a10 100%
  );
}
.scene-ch05::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(150,200,100,0.08) 0%, transparent 40%);
  pointer-events: none;
}

/* Chapter 6 — Kulkul Berbunyi (api & perunggu) */
.scene-ch06 {
  background: linear-gradient(180deg,
    #2a1000 0%,
    #3a1a00 20%,
    #4a2000 40%,
    #5a2a00 55%,
    #3a1800 75%,
    #1a0800 100%
  );
}
.scene-ch06::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,100,0,0.05) 0%, transparent 50%);
  animation: pulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* Chapter 7 — Rahasia di Pura (pura malam) */
.scene-ch07 {
  background: linear-gradient(180deg,
    #0a0520 0%,
    #1a0a30 20%,
    #2a1040 40%,
    #1a0a30 60%,
    #0d0520 80%,
    #0a0418 100%
  );
}
.scene-ch07::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(200,150,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Chapter 8 — Kilasan (es biru memori) */
.scene-ch08 {
  background: linear-gradient(180deg,
    #001020 0%,
    #0a1a30 20%,
    #102040 40%,
    #0a1a38 60%,
    #001028 80%,
    #000a18 100%
  );
}

/* Chapter 9 — Dua Jalan (split — dharma/adharma) */
.scene-ch09 {
  background: linear-gradient(135deg,
    #0a2010 0%,
    #1a3020 25%,
    #2a1a30 50%,
    #302020 75%,
    #200a10 100%
  );
}

/* Chapter 10 — Fragmen Terakhir (denouement) */
.scene-ch10 {
  background: linear-gradient(180deg,
    #0a0a0f 0%,
    #1a1520 30%,
    #2a1a30 50%,
    #1a1020 70%,
    #0a0a0f 100%
  );
}
.scene-ch10::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(212,168,83,0.08) 0%, transparent 40%);
  animation: pulse 4s ease-in-out infinite;
  pointer-events: none;
}

/* === NPC PORTRAIT PLACEHOLDERS === */
/* Nanti diganti gambar asli */

.portrait-mama-ratu {
  background: linear-gradient(135deg, #4a2040, #3a1830);
  border-color: #c4985a !important;
}
.portrait-mama-ratu::after {
  content: '👩';
  font-size: 2.5rem;
}

.portrait-sekar {
  background: linear-gradient(135deg, #2a5a3a, #1a4a2a);
  border-color: #6aaa70 !important;
}
.portrait-sekar::after {
  content: '👧';
  font-size: 2.5rem;
}

.portrait-pak-made {
  background: linear-gradient(135deg, #3a3a5a, #2a2a4a);
  border-color: #8a8ac0 !important;
}
.portrait-pak-made::after {
  content: '👴';
  font-size: 2.5rem;
}

/* === AMBIENT — CSS Particle Effects === */

/* Rain/ember effect untuk scene mistik */
.particles-rain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: 
    radial-gradient(2px 2px at 10% 10%, rgba(200,200,255,0.15) 0%, transparent 100%),
    radial-gradient(2px 2px at 30% 20%, rgba(200,200,255,0.1) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 5%, rgba(200,200,255,0.12) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 15%, rgba(200,200,255,0.08) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 8%, rgba(200,200,255,0.1) 0%, transparent 100%);
  animation: rain 3s linear infinite;
  pointer-events: none;
}
@keyframes rain {
  0% { transform: translateY(-10px); opacity: 0.3; }
  100% { transform: translateY(10px); opacity: 0.8; }
}

/* Fragment glow effect */
.fragment-glow-scene {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  background: radial-gradient(circle at 50% 50%, rgba(100,160,255,0.06) 0%, transparent 50%);
  animation: breath 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breath {
  0%,100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}