/* Latar animasi yang dibangkitkan browser, bukan berkas video.
   Alasannya: nol ukuran unduhan, loop tanpa jahitan, dan bisa dipakai
   ulang sebagai thumbnail kecil di konsol.

   Semua ukuran dalam persen terhadap wadahnya, jadi komponen yang sama
   tampil benar di layar 4K maupun di kotak thumbnail 120px.
   Gerakan sengaja lambat (40-90 detik) supaya tidak menarik perhatian
   dari teks yang sedang dibaca jemaat. */

.motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--m-bg, #0b1220);
}

.motion .blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

/* ------------------------------------------------------------- palet */

.pal--cool  { --m-bg: #0a1626; --c1: #4f93c4; --c2: #2f6ea8; --c3: #1b3f6e; }
.pal--warm  { --m-bg: #1a0f10; --c1: #e0a45c; --c2: #c76b52; --c3: #8f3f56; }
.pal--deep  { --m-bg: #100b1e; --c1: #7c5cc4; --c2: #4b3a90; --c3: #2a1f56; }
.pal--sage  { --m-bg: #0c1512; --c1: #86b48e; --c2: #4e8069; --c3: #2b4a42; }
.pal--night { --m-bg: #05070c; --c1: #33507a; --c2: #223a5c; --c3: #16233a; }

/* Empat palet yang lebih muda. Kuncinya bukan warna yang lebih terang,
   melainkan warna yang lebih JENUH di atas latar yang tetap gelap: teks putih
   tetap menang, tapi rona di belakangnya terbaca sebagai pilihan, bukan
   kebetulan. Warna murni (#ff00ff dan sejenisnya) sengaja dihindari — di
   proyektor gereja warna seperti itu langsung terbaca norak. */
.pal--neon  { --m-bg: #080a1a; --c1: #7c5cff; --c2: #22c9e0; --c3: #3a1d80; }
.pal--senja { --m-bg: #140810; --c1: #f2765a; --c2: #d94f8a; --c3: #5b2b7a; }
.pal--mint  { --m-bg: #05120f; --c1: #43d0a0; --c2: #38a8e0; --c3: #14564f; }
.pal--plum  { --m-bg: #0c0817; --c1: #a78bfa; --c2: #e07ac0; --c3: #46209c; }

/* ------------------------------------------------------------ aurora */
/* Empat gumpalan cahaya besar yang saling menyeberang perlahan. */

.motion--aurora .blob { filter: none; opacity: 0.55; }
.motion--aurora .blob:nth-child(n + 5) { display: none; }

.motion--aurora .blob:nth-child(1) {
  width: 90%; height: 120%; left: -20%; top: -25%;
  background: radial-gradient(circle at 50% 50%, var(--c1) 0%, transparent 62%);
  animation: drift-a 29s ease-in-out infinite alternate;
}
.motion--aurora .blob:nth-child(2) {
  width: 100%; height: 110%; left: 35%; top: -10%;
  background: radial-gradient(circle at 50% 50%, var(--c2) 0%, transparent 60%);
  animation: drift-b 35s ease-in-out infinite alternate;
}
.motion--aurora .blob:nth-child(3) {
  width: 85%; height: 100%; left: 5%; top: 25%;
  background: radial-gradient(circle at 50% 50%, var(--c3) 0%, transparent 64%);
  animation: drift-c 40s ease-in-out infinite alternate;
}
.motion--aurora .blob:nth-child(4) {
  width: 70%; height: 90%; left: 55%; top: 35%;
  background: radial-gradient(circle at 50% 50%, var(--c1) 0%, transparent 66%);
  animation: drift-b 43s ease-in-out infinite alternate-reverse;
}

@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(18%, 12%) scale(1.18); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-22%, 16%) scale(0.92); } }
@keyframes drift-c { from { transform: translate(0, 0) scale(0.95); } to { transform: translate(14%, -18%) scale(1.15); } }

/* ------------------------------------------------------------- bokeh */
/* Bulatan cahaya lembut yang naik pelan, seperti debu di berkas lampu. */

.motion--bokeh { background: radial-gradient(ellipse at 50% 120%, var(--c3) 0%, var(--m-bg) 70%); }
.motion--bokeh .blob {
  background: radial-gradient(circle at 40% 40%, var(--c1) 0%, transparent 70%);
  opacity: 0.28;
  animation: rise 23s linear infinite;
}
.motion--bokeh .blob:nth-child(1)  { width: 14%; height: 14%; left: 6%;  animation-duration: 28s; animation-delay: -2s; }
.motion--bokeh .blob:nth-child(2)  { width: 8%;  height: 8%;  left: 18%; animation-duration: 22s; animation-delay: -9s; opacity: 0.2; }
.motion--bokeh .blob:nth-child(3)  { width: 20%; height: 20%; left: 28%; animation-duration: 35s; animation-delay: -16s; opacity: 0.16; }
.motion--bokeh .blob:nth-child(4)  { width: 6%;  height: 6%;  left: 41%; animation-duration: 20s; animation-delay: -4s; }
.motion--bokeh .blob:nth-child(5)  { width: 16%; height: 16%; left: 52%; animation-duration: 32s; animation-delay: -22s; opacity: 0.22; }
.motion--bokeh .blob:nth-child(6)  { width: 10%; height: 10%; left: 63%; animation-duration: 25s; animation-delay: -13s; }
.motion--bokeh .blob:nth-child(7)  { width: 24%; height: 24%; left: 72%; animation-duration: 39s; animation-delay: -5s; opacity: 0.14; }
.motion--bokeh .blob:nth-child(8)  { width: 7%;  height: 7%;  left: 86%; animation-duration: 22s; animation-delay: -18s; }
.motion--bokeh .blob:nth-child(9)  { width: 12%; height: 12%; left: 92%; animation-duration: 30s; animation-delay: -27s; opacity: 0.2; }
.motion--bokeh .blob:nth-child(10) { width: 9%;  height: 9%;  left: 34%; animation-duration: 26s; animation-delay: -7s; }
.motion--bokeh .blob:nth-child(11) { width: 18%; height: 18%; left: 14%; animation-duration: 37s; animation-delay: -32s; opacity: 0.15; }
.motion--bokeh .blob:nth-child(12) { width: 5%;  height: 5%;  left: 78%; animation-duration: 21s; animation-delay: -11s; }
.motion--bokeh .blob:nth-child(n + 13) { display: none; }

@keyframes rise {
  from { transform: translateY(115%) translateX(0); }
  to   { transform: translateY(-40%) translateX(6%); }
}

/* -------------------------------------------------------------- kabut */
/* Dua pita lebar yang bergeser berlawanan arah. Paling tenang. */

.motion--mist { background: linear-gradient(180deg, var(--m-bg) 0%, var(--c3) 140%); }
.motion--mist .blob { border-radius: 0; opacity: 0.4; }
.motion--mist .blob:nth-child(n + 4) { display: none; }

.motion--mist .blob:nth-child(1) {
  width: 180%; height: 55%; left: -40%; top: 8%;
  background: radial-gradient(ellipse at 50% 50%, var(--c1) 0%, transparent 58%);
  animation: slide-r 40s ease-in-out infinite alternate;
}
.motion--mist .blob:nth-child(2) {
  width: 200%; height: 70%; left: -60%; top: 40%;
  background: radial-gradient(ellipse at 50% 50%, var(--c2) 0%, transparent 60%);
  animation: slide-l 50s ease-in-out infinite alternate;
}
.motion--mist .blob:nth-child(3) {
  width: 160%; height: 45%; left: -30%; top: 68%;
  background: radial-gradient(ellipse at 50% 50%, var(--c3) 0%, transparent 62%);
  animation: slide-r 34s ease-in-out infinite alternate-reverse;
}

@keyframes slide-r { from { transform: translateX(-8%); } to { transform: translateX(12%); } }
@keyframes slide-l { from { transform: translateX(10%); } to { transform: translateX(-10%); } }

/* -------------------------------------------------------------- sutra */
/* Sapuan melingkar yang berputar sangat lambat. */

.motion--silk { background: var(--m-bg); }
.motion--silk .blob:nth-child(n + 4) { display: none; }

.motion--silk .blob:nth-child(1) {
  width: 160%; height: 160%; left: -30%; top: -30%;
  border-radius: 45%;
  background: conic-gradient(from 0deg, transparent 0%, var(--c1) 18%, transparent 38%, var(--c2) 62%, transparent 84%);
  opacity: 0.32;
  animation: spin 54s linear infinite;
}
.motion--silk .blob:nth-child(2) {
  width: 130%; height: 130%; left: -15%; top: -15%;
  border-radius: 42%;
  background: conic-gradient(from 140deg, transparent 0%, var(--c3) 22%, transparent 46%, var(--c1) 70%, transparent 92%);
  opacity: 0.26;
  animation: spin 76s linear infinite reverse;
}
.motion--silk .blob:nth-child(3) {
  width: 90%; height: 90%; left: 8%; top: 8%;
  background: radial-gradient(circle at 50% 50%, var(--c2) 0%, transparent 68%);
  opacity: 0.3;
  animation: drift-a 42s ease-in-out infinite alternate;
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- prisma */
/* Tiga bidang warna besar yang saling menembus. `mix-blend-mode: screen`
   membuat perpotongannya menyala jadi warna ketiga — itulah yang memberi kesan
   "mesh gradient" modern tanpa satu pun berkas gambar, dan tanpa blur(). */

/* `isolation` wajib: tanpanya `screen` ikut membaur dengan apa pun yang ada di
   bawah wadah — di halaman proyektor itu badan hitam, di thumbnail konsol itu
   panel abu. Latar yang sama akan tampak berbeda di dua tempat. */
.motion--prism { background: var(--m-bg); isolation: isolate; }
.motion--prism .blob { mix-blend-mode: screen; opacity: 0.55; }
.motion--prism .blob:nth-child(n + 4) { display: none; }

.motion--prism .blob:nth-child(1) {
  width: 115%; height: 115%; left: -28%; top: -32%;
  background: radial-gradient(circle at 50% 50%, var(--c1) 0%, transparent 60%);
  animation: drift-a 43s ease-in-out infinite alternate;
}
.motion--prism .blob:nth-child(2) {
  width: 105%; height: 125%; left: 30%; top: -18%;
  background: radial-gradient(circle at 50% 50%, var(--c2) 0%, transparent 58%);
  animation: drift-b 56s ease-in-out infinite alternate;
}
.motion--prism .blob:nth-child(3) {
  width: 125%; height: 105%; left: -12%; top: 28%;
  background: radial-gradient(circle at 50% 50%, var(--c3) 0%, transparent 62%);
  animation: drift-c 67s ease-in-out infinite alternate-reverse;
}

/* -------------------------------------------------------------- sorot */
/* Berkas cahaya miring yang menyapu pelan, seperti lampu panggung yang
   bergerak. Batangnya jauh lebih tinggi daripada wadahnya (260%) supaya
   ujungnya tidak pernah terlihat masuk atau keluar bingkai. */

.motion--beam { background: linear-gradient(165deg, var(--m-bg) 0%, var(--c3) 165%); }
.motion--beam .blob {
  border-radius: 0;
  height: 260%;
  top: -80%;
  opacity: 0.22;
}
.motion--beam .blob:nth-child(n + 5) { display: none; }

.motion--beam .blob:nth-child(1) {
  width: 26%; left: 8%;
  background: linear-gradient(90deg, transparent 0%, var(--c1) 50%, transparent 100%);
  animation: sapu 47s ease-in-out infinite alternate;
}
.motion--beam .blob:nth-child(2) {
  width: 14%; left: 34%;
  background: linear-gradient(90deg, transparent 0%, var(--c2) 50%, transparent 100%);
  animation: sapu 62s ease-in-out infinite alternate-reverse;
  opacity: 0.3;
}
.motion--beam .blob:nth-child(3) {
  width: 34%; left: 56%;
  background: linear-gradient(90deg, transparent 0%, var(--c1) 50%, transparent 100%);
  animation: sapu 73s ease-in-out infinite alternate;
  opacity: 0.16;
}
.motion--beam .blob:nth-child(4) {
  width: 10%; left: 82%;
  background: linear-gradient(90deg, transparent 0%, var(--c2) 50%, transparent 100%);
  animation: sapu 40s ease-in-out infinite alternate-reverse;
  opacity: 0.26;
}

/* Rotasinya ikut di dalam keyframe, bukan di transform terpisah: transform
   hanya satu properti, jadi yang ditulis belakangan akan menghapus yang
   sebelumnya. */
@keyframes sapu {
  from { transform: rotate(-16deg) translateX(-45%); }
  to   { transform: rotate(-16deg) translateX(45%); }
}

/* --------------------------------------------------------------- kisi */
/* Kisi halus yang bergeser naik di depan cahaya. Perulangan kisinya 6% dari
   tinggi elemen, dan pergeserannya tepat 6% — itu yang membuat loop-nya tak
   berjahit; angka lain akan terlihat "melompat" saat animasi mengulang. */

.motion--grid { background: radial-gradient(ellipse at 50% 125%, var(--c3) 0%, var(--m-bg) 68%); }
.motion--grid .blob:nth-child(n + 4) { display: none; }

.motion--grid .blob:nth-child(1) {
  width: 95%; height: 95%; left: 3%; top: 20%;
  background: radial-gradient(circle at 50% 50%, var(--c1) 0%, transparent 62%);
  opacity: 0.3;
  animation: drift-c 53s ease-in-out infinite alternate;
}
.motion--grid .blob:nth-child(2) {
  width: 70%; height: 80%; left: 45%; top: -10%;
  background: radial-gradient(circle at 50% 50%, var(--c2) 0%, transparent 64%);
  opacity: 0.22;
  animation: drift-b 64s ease-in-out infinite alternate;
}
.motion--grid .blob:nth-child(3) {
  width: 100%; height: 200%; left: 0; top: -50%;
  border-radius: 0;
  opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, transparent 0 5.85%, rgba(255, 255, 255, 0.055) 5.85% 6%),
    repeating-linear-gradient(90deg, transparent 0 5.85%, rgba(255, 255, 255, 0.045) 5.85% 6%);
  animation: kisi-naik 43s linear infinite;
}

@keyframes kisi-naik { from { transform: translateY(0); } to { transform: translateY(-6%); } }

/* -------------------------------------------------------------- orbit */
/* Dua cincin tipis yang berputar sangat lambat. Bentuknya sengaja tidak
   bundar sempurna (border-radius tak sama sisi) — cincin bundar yang berputar
   tidak terlihat berputar sama sekali. Tebal garisnya dalam persen supaya
   tetap sehalus ini di 4K dan tidak hilang di thumbnail konsol. */

.motion--orbit { background: radial-gradient(circle at 50% 45%, var(--c3) 0%, var(--m-bg) 72%); }
.motion--orbit .blob:nth-child(n + 4) { display: none; }

.motion--orbit .blob:nth-child(1) {
  width: 88%; height: 88%; left: 6%; top: 6%;
  border: 0.25% solid var(--c1);
  border-radius: 46% 54% 52% 48%;
  opacity: 0.32;
  animation: spin 68s linear infinite;
}
.motion--orbit .blob:nth-child(2) {
  width: 58%; height: 58%; left: 21%; top: 21%;
  border: 0.35% solid var(--c2);
  border-radius: 53% 47% 44% 56%;
  opacity: 0.26;
  animation: spin 52s linear infinite reverse;
}
.motion--orbit .blob:nth-child(3) {
  width: 80%; height: 80%; left: 10%; top: 10%;
  background: radial-gradient(circle at 50% 50%, var(--c1) 0%, transparent 66%);
  opacity: 0.2;
  animation: drift-a 60s ease-in-out infinite alternate;
}

/* Dulu ada @media (prefers-reduced-motion: reduce) yang membekukan blob.
   Dibuang: latar proyektor cuma hiasan ambient, dan setelan aksesibilitas
   operator tak sepatutnya membekukan latar yang dilihat jemaat. */