/* ============================================================
   PENGATURAN GRADIENT FLUID — atur semua warna & angka di sini
   Dibaca oleh GICGradiendCloudsSunset.js dan dikirim
   ke shader WebGL sebagai uniform, jadi cukup ubah di sini saja
   (tidak perlu buka file .js sama sekali untuk tweak biasa).
   ============================================================ */
:root {
  /* ---------- WARNA ---------- */
  --color-deep-blue: #385db4;
  /* band paling atas (--blue-dark dari effect.css) */
  --color-blue: #3e64ced2;
  /* disamakan dengan --sky-light dari effect.css (var(--color-sky-light) di bawah) */
  --color-purple: #856fb8;
  --color-pink: #e788bd;
  --color-coral: #ea8e99;
  --color-orange: #f19b64;
  --color-orange-deep: #f38038;
  /* sisi kiri/kanan band paling bawah (--orange dari effect.css) */
  --color-yellow: #f1cb1f;
  /* tengah band paling bawah */
  --color-sun-core: #fadf5a;
  /* inti & halo matahari */
  --color-ray-yellow: #ffd973;
  /* pangkal sinar matahari */
  --color-ray-pink: #eb668c;
  /* tengah sinar matahari */
  --color-ray-purple: #85479e;
  /* ujung sinar matahari */
  --color-sky-light: #6e8fe8;
  /* fallback background html/body, dari --sky-light effect.css */

  /* ---------- TINGGI TIAP BAND (0.0 = paling atas layar, 1.0 = paling bawah) ---------- */
  /* Tiap nilai = titik SELESAI band tsb; band berikutnya mulai dari titik itu. */
  --gradient-blue-end: 0.62;
  /* seberapa turun biru sebelum berbaur ke ungu */
  --gradient-purple-end: 0.76;
  /* seberapa turun ungu sebelum berbaur ke pink */
  --gradient-pink-end: 0.84;
  /* seberapa turun pink sebelum berbaur ke coral */
  --gradient-coral-end: 0.97;
  /* seberapa turun coral sebelum berbaur ke oranye */
  --gradient-orange-end: 0.95;
  /* seberapa turun oranye sebelum masuk band paling bawah (kuning/oranye pekat) */

  /* ---------- KEHALUSAN & BENTUK ---------- */
  --gradient-transition-softness: 0.10;
  /* lebar blur antar band. Kecil = tegas, besar = sangat halus/blur */
  --gradient-center-width: 0.42;
  /* lebar area kuning di tengah band bawah sebelum berubah oranye pekat di kiri/kanan */

  /* ---------- ANIMASI ---------- */
  --gradient-animation-speed: 0.45;
  /* kecepatan gerak fluid/gelombang. Besar = cepat, kecil = lambat */
  --gradient-breath-speed: 0.5;
  /* kecepatan siklus breathing matahari & volumetric rays */
  --gradient-breath-lift: 0.07;
  /* seberapa tinggi seluruh fluid naik saat breathing membesar */

  /* ---------- MATAHARI & SINAR (VOLUMETRIC RAYS) ---------- */
  --gradient-sun-opacity-min: 0.1;
  /* opacity kuning matahari saat breathing paling kecil (1.0 = tidak pernah redup) */
  --gradient-ray-floor: 0.4;
  /* nilai minimum di antara puncak sinar, biar tidak ada celah gelap */

  /* ---------- KECERAHAN KESELURUHAN ---------- */
  --gradient-exposure: 0.82;
  /* turunkan kalau terlalu terang, naikkan kalau terlalu gelap */
}

/* Reset and fill container */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg, linear-gradient(to top, var(--color-deep-blue) 0%, var(--color-deep-blue) 60%, var(--color-sky-light) 100%));
  color-scheme: only light !important;
}

/* Injection of CSS Customization variables */
:root {
  color-scheme: only light !important;
  --bg-blur: 0px;
  --bg-opacity: 1;
  --bg-scale: 1;
  --bg-rotation: 0deg;
  --animation-play-state: running;

  /* Inject colors if overridden */




  /* Specific colors for various nodes */

}

/* Filter adjustments */
body>div,
.mesh-gradient-container,
.aurora-container,
.sunset-gradient,
.ocean-gradient,
.rainbow-flow,
.candy-gradient,
.fire-container,
.ice-gradient,
.nebula-container,
.radial-pulse,
.blob-wrapper,
.organic-container,
.lava-container,
.morphing-wrap,
.neon-blob-container,
.grain-container,
.static-noise-container,
.dust-container,
.analog-container,
.paper-texture,
.waves-container,
.svg-wave-wrap,
.layered-wrap,
.ripple-container,
.soft-flow-gradient,
.cyber-container,
.perspective-wrap,
.classic-rec-wrap,
.matrix-container,
.neon-grid-wrap,
.diagonal-stripes,
.vertical-drift,
.laser-wrap,
.speed-container,
.wire-frame-wrap,
.dots-container,
.sparkles-container,
.firefly-container,
.starfield-container,
.snow-container,
.squares-container,
.tri-container,
.hex-container,
.rings-wrap,
.poly-container,
.glass-bg-wrap,
.liquid-glass-bg,
.crystal-container,
.vaporwave-bg,
.synth-wrap {
  filter: blur(var(--bg-blur)) opacity(var(--bg-opacity)) !important;
  transform: scale(var(--bg-scale)) rotate(var(--bg-rotation)) !important;
  transform-origin: center !important;
  transition: filter 0.2s ease, transform 0.2s ease;
}

/* Global Play State control */
* {
  animation-play-state: var(--animation-play-state) !important;
}

#canvas-webgl-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}