/*!
 * Warlok Loader — animasi loading berbasis logo "Satu Atap".
 * Pakai bersama partial di app/Views/partials/loader_*.php (lihat brand/loading/README.md).
 *
 *  .wl-loader--atap        Konsep 1 · splash & loading halaman penuh
 *  .wl-loader--giliran     Konsep 2 · tombol, kartu, konten
 *  .wl-loader--lingkar     Konsep 4 · tempat kecil (tabel, pull-to-refresh, ikon)
 *  .wl-loader--lampu       Konsep 3 · cadangan splash dengan progress bar
 *
 * Kecepatan diatur lewat variabel --wl-d (detik) di elemen .wl-loader.
 */
:root {
  --wl-teal: #0E7C66;
  --wl-amber: #F2A93B;
  --wl-line: #D5E0DC;
}

.wl-loader { display: inline-flex; flex-direction: column; align-items: center; gap: .75rem; }
.wl-loader svg { display: block; overflow: visible; }
.wl-loader__label { font-size: .9375rem; font-weight: 600; color: #4A6560; }
.wl-loader--putih .wl-loader__label { color: #E3F2EE; }

/* warna: default (teal) & putih (di atas teal/gelap) */
.wl-loader .wl-c-side { fill: var(--wl-teal); }
.wl-loader .wl-c-roof { stroke: var(--wl-teal); }
.wl-loader .wl-c-mid  { fill: var(--wl-amber); }
.wl-loader--putih .wl-c-side { fill: #FFFFFF; }
.wl-loader--putih .wl-c-roof { stroke: #FFFFFF; }
.wl-loader--putih .wl-c-arc  { stroke: #FFFFFF; }
.wl-loader--putih .wl-c-track { stroke: rgba(255,255,255,.25); }

/* ---------- 1 · Atap Terbentuk ---------- */
.wl-loader--atap { --wl-d: 2.4s; }
.wl-loader--atap .wl-roof { stroke-dasharray: 122; stroke-dashoffset: 122; animation: wl-draw var(--wl-d) ease-in-out infinite; }
.wl-loader--atap .wl-p { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0);
  animation: var(--wl-d) cubic-bezier(.34,1.56,.64,1) infinite; }
.wl-loader--atap .wl-pa { animation-name: wl-pop-a; }
.wl-loader--atap .wl-pb { animation-name: wl-pop-b; }
.wl-loader--atap .wl-pc { animation-name: wl-pop-c; }
@keyframes wl-draw  { 0% { stroke-dashoffset: 122; opacity: 1 } 32% { stroke-dashoffset: 0 } 84% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes wl-pop-a { 0%, 28% { transform: scale(0); opacity: 1 } 42% { transform: scale(1) } 84% { transform: scale(1); opacity: 1 } 100% { transform: scale(1); opacity: 0 } }
@keyframes wl-pop-b { 0%, 36% { transform: scale(0); opacity: 1 } 50% { transform: scale(1) } 84% { transform: scale(1); opacity: 1 } 100% { transform: scale(1); opacity: 0 } }
@keyframes wl-pop-c { 0%, 46% { transform: scale(0); opacity: 1 } 62% { transform: scale(1) } 84% { transform: scale(1); opacity: 1 } 100% { transform: scale(1); opacity: 0 } }
.wl-loader__label.wl-dots::after { content: ""; animation: wl-dots 1.2s steps(4) infinite; }
@keyframes wl-dots { 0% { content: "" } 25% { content: "." } 50% { content: ".." } 75% { content: "..." } }

/* ---------- 2 · Warga Bergiliran ---------- */
.wl-loader--giliran { --wl-d: 1.3s; }
.wl-loader--giliran .wl-b { transform-box: fill-box; transform-origin: 50% 100%; animation: wl-hop var(--wl-d) ease-in-out infinite; }
.wl-loader--giliran .wl-b2 { animation-delay: calc(var(--wl-d) * .14); }
.wl-loader--giliran .wl-b3 { animation-delay: calc(var(--wl-d) * .28); }
@keyframes wl-hop { 0%, 56%, 100% { transform: translateY(0) scaleY(1) } 14% { transform: translateY(0) scaleY(.9) }
  30% { transform: translateY(-14px) scaleY(1.04) } 44% { transform: translateY(0) scaleY(.94) } }
.wl-loader--inline { flex-direction: row; gap: .5rem; vertical-align: middle; }

/* ---------- 4 · Lingkar Atap ---------- */
.wl-loader--lingkar { --wl-d: 1s; }
.wl-loader--lingkar .wl-c-track { stroke: var(--wl-line); }
.wl-loader--lingkar .wl-c-arc { stroke: var(--wl-teal); }
.wl-loader--lingkar .wl-spin { transform-box: view-box; transform-origin: 60px 60px; animation: wl-rot var(--wl-d) linear infinite; }
.wl-loader--lingkar .wl-arc { stroke-dasharray: 80 260; animation: wl-len calc(var(--wl-d) * 1.6) ease-in-out infinite; }
.wl-loader--lingkar .wl-orbit { transform-box: view-box; transform-origin: 60px 60px; animation: wl-rot calc(var(--wl-d) * 1.6) linear infinite reverse; }
@keyframes wl-rot { to { transform: rotate(360deg) } }
@keyframes wl-len { 0%, 100% { stroke-dasharray: 40 300 } 50% { stroke-dasharray: 150 190 } }

/* ---------- 3 · Lampu Rumah (cadangan) ---------- */
.wl-loader--lampu { --wl-d: 1.8s; }
.wl-loader--lampu .wl-glow { transform-box: fill-box; transform-origin: center; animation: wl-glow var(--wl-d) ease-out infinite; }
.wl-loader--lampu .wl-mid { transform-box: fill-box; transform-origin: 50% 100%; animation: wl-breath var(--wl-d) ease-in-out infinite; }
@keyframes wl-glow { 0% { transform: scale(.7); opacity: .55 } 70%, 100% { transform: scale(1.45); opacity: 0 } }
@keyframes wl-breath { 0%, 100% { transform: scale(1) } 20% { transform: scale(1.06) } }
.wl-progress { position: relative; overflow: hidden; border-radius: 999px; width: 10rem; height: 5px; background: var(--wl-line); }
.wl-loader--putih .wl-progress { background: rgba(255,255,255,.22); }
.wl-progress__bar { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 999px; background: var(--wl-teal);
  animation: wl-slide calc(var(--wl-d) * .9) cubic-bezier(.65,0,.35,1) infinite; }
.wl-loader--putih .wl-progress__bar { background: #FFFFFF; }
@keyframes wl-slide { 0% { left: -40% } 100% { left: 102% } }

/* ---------- overlay halaman penuh ---------- */
.wl-page-loader { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(238,243,240,.92); transition: opacity .25s ease; }
.wl-page-loader--teal { background: var(--wl-teal); }
.wl-page-loader.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- gerakan dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  .wl-loader--atap .wl-roof { animation: none; stroke-dashoffset: 0; }
  .wl-loader--atap .wl-p { animation: none; transform: none; }
  .wl-loader__label.wl-dots::after { animation: none; content: "…"; }
  .wl-loader--giliran .wl-b { animation: wl-fade calc(var(--wl-d) * 1.5) ease-in-out infinite; }
  .wl-loader--lingkar .wl-spin, .wl-loader--lingkar .wl-orbit { animation-duration: calc(var(--wl-d) * 4); }
  .wl-loader--lingkar .wl-arc { animation: none; }
  .wl-loader--lampu .wl-glow, .wl-loader--lampu .wl-mid { animation: none; }
  .wl-progress__bar { animation-duration: calc(var(--wl-d) * 3); }
}
@keyframes wl-fade { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }