/* =====================================================================
   Animasi bertema Islami — dipakai di seluruh halaman
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- 1. Pola bintang geometris mengambang di background ---------- */
.islamic-bg-pattern{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:0.35;
}
.islamic-bg-pattern svg{ position:absolute; animation:driftPattern 60s linear infinite; }
.islamic-bg-pattern .p1{ top:-10%; left:-10%; width:140%; height:140%; }
@keyframes driftPattern{
  0%{ transform:translate(0,0) rotate(0deg); }
  100%{ transform:translate(-2%,-2%) rotate(360deg); }
}

/* ---------- 2. Bintang berkelip (hero widget) ---------- */
.star{
  position:absolute; width:3px; height:3px; background:var(--gold-light);
  border-radius:50%; opacity:0; animation:twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(0.6); }
  50%{ opacity:0.9; transform:scale(1.3); }
}

/* ---------- 3. Bulan sabit berdenyut lembut ---------- */
.moon-glow{
  display:inline-block; animation:moonPulse 4s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(232,205,115,0.6));
}
@keyframes moonPulse{
  0%,100%{ transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 4px rgba(232,205,115,0.4)); }
  50%{ transform:scale(1.08) rotate(-4deg); filter:drop-shadow(0 0 12px rgba(232,205,115,0.75)); }
}

/* ---------- 4. Siluet kubah masjid di dasar hero widget ---------- */
.mosque-silhouette{
  position:absolute; left:0; right:0; bottom:0; height:46px; opacity:0.22;
  background-repeat:repeat-x; background-size:220px 46px; background-position:0 bottom;
  animation:mosqueDrift 40s linear infinite;
  pointer-events:none;
}
@keyframes mosqueDrift{
  0%{ background-position:0 bottom; }
  100%{ background-position:-220px bottom; }
}

/* ---------- 5. Border emas berkilau (shimmer) ---------- */
.shimmer-border{ position:relative; overflow:hidden; }
.shimmer-border::after{
  content:''; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  animation:shimmerSweep 4.5s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{ left:-150%; }
  55%,100%{ left:150%; }
}

/* ---------- 6. Masuk halaman: fade + slide-up ---------- */
.page-enter{ animation:pageEnter 0.5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageEnter{
  0%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* Kartu menu / list masuk bertahap (stagger) */
.stagger-in > *{ animation:cardIn 0.45s cubic-bezier(.2,.8,.2,1) both; }
.stagger-in > *:nth-child(1){ animation-delay:.02s; }
.stagger-in > *:nth-child(2){ animation-delay:.06s; }
.stagger-in > *:nth-child(3){ animation-delay:.10s; }
.stagger-in > *:nth-child(4){ animation-delay:.14s; }
.stagger-in > *:nth-child(5){ animation-delay:.18s; }
.stagger-in > *:nth-child(6){ animation-delay:.22s; }
.stagger-in > *:nth-child(7){ animation-delay:.26s; }
.stagger-in > *:nth-child(8){ animation-delay:.30s; }
@keyframes cardIn{
  0%{ opacity:0; transform:translateY(10px) scale(0.98); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------- 7. Ripple efek saat kartu/menu diketuk ---------- */
.rippleable{ position:relative; overflow:hidden; }
.ripple-el{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(201,162,39,0.45); animation:rippleAnim 0.6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{
  to{ transform:scale(3.2); opacity:0; }
}

/* ---------- 8. Denyut lembut pada elemen "aktif" (mis. sholat berikutnya) ---------- */
.pulse-glow{ animation:pulseGlow 2.2s ease-in-out infinite; }
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,0.4); }
  50%{ box-shadow:0 0 0 8px rgba(201,162,39,0); }
}

/* ---------- 9. Rotasi lambang bintang 8 (ornamen sudut) ---------- */
.star8-spin{ animation:star8Spin 90s linear infinite; transform-origin:center; }
@keyframes star8Spin{ to{ transform:rotate(360deg); } }

/* ---------- 10. Loading dot berkedip ---------- */
.loading-dot{ animation:pulseFade 1.3s ease-in-out infinite; }
@keyframes pulseFade{ 0%,100%{ opacity:0.4; } 50%{ opacity:1; } }

/* ---------- 11. Jarum kompas halus saat update ---------- */
.compass .needle{ transition:transform 0.25s cubic-bezier(.3,.7,.3,1); }

/* ---------- 12. Splash / intro logo (index.php saat load pertama) ---------- */
.splash{
  position:fixed; inset:0; z-index:9999; background:radial-gradient(ellipse at center, #123c2c 0%, #071e17 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  animation:splashOut 0.6s ease-in 1.4s forwards;
}
.splash .splash-icon{ font-size:3rem; animation:splashPulse 1.4s ease-in-out infinite; }
.splash .splash-text{ color:var(--gold-light); font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem; letter-spacing:0.05em; }
@keyframes splashPulse{ 0%,100%{ transform:scale(1); opacity:0.85; } 50%{ transform:scale(1.12); opacity:1; } }
@keyframes splashOut{ 0%{ opacity:1; visibility:visible; } 99%{ opacity:0; visibility:visible; } 100%{ opacity:0; visibility:hidden; pointer-events:none; } }