/* Ramadan Atmosphere Pack — Arqam (no external images) */
:root{
  --ramadan-bg: linear-gradient(180deg, #0a1128 0%, #1c2e6b 100%);
}

/* Theme presets (body gets data-theme from settings) */
body[data-theme="night"]{
  --ramadan-bg: linear-gradient(180deg, #0a1128 0%, #1c2e6b 100%);
}
body[data-theme="lanterns"]{
  --ramadan-bg:
    radial-gradient(circle at 70% 0%, rgba(255,215,0,.22), transparent 52%),
    radial-gradient(circle at 10% 20%, rgba(0,230,118,.10), transparent 55%),
    linear-gradient(180deg, #06102a 0%, #0b3d91 100%);
}
body[data-theme="mosque"]{
  --ramadan-bg:
    radial-gradient(circle at 60% 0%, rgba(255,215,0,.16), transparent 55%),
    radial-gradient(circle at 18% 35%, rgba(0,230,118,.08), transparent 55%),
    linear-gradient(180deg, #071126 0%, #142b6a 100%);
}
body[data-theme="geometry"]{
  --ramadan-bg:
    radial-gradient(circle at 70% 10%, rgba(255,215,0,.15), transparent 55%),
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #060d1f 0%, #0e2a57 100%);
}

body{
  background: var(--ramadan-bg);
}

/* Layers (use these divs in pages) */
.ramadan-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

/* Starfield (CSS gradients, light and fast) */
.ramadan-stars{
  opacity: .52;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,.85), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,.78), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 90px, rgba(255,255,255,.88), rgba(0,0,0,0));
  background-size: 220px 220px;
  animation: ramadanTwinkle 7s linear infinite;
}

@keyframes ramadanTwinkle{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-220px); }
}

/* Ornamental pattern */
.ramadan-ornament{
  opacity: .20;
  background-image: url('../img/pattern.svg');
  background-size: 300px 300px;
  mix-blend-mode: overlay;
  animation: ramadanDrift 18s linear infinite;
}

body[data-theme="geometry"] .ramadan-ornament{
  background-image: url('../img/arabesque.svg');
  opacity: .26;
  background-size: 280px 280px;
}

@keyframes ramadanDrift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-120px,0) scale(1.03); }
}

/* Soft mist layer */
.ramadan-mist{
  opacity: .8;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,215,0,.10), transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(0,230,118,.07), transparent 55%),
    radial-gradient(circle at 55% 85%, rgba(255,215,0,.08), transparent 55%);
  filter: blur(10px);
  animation: ramadanMist 12s ease-in-out infinite alternate;
}

@keyframes ramadanMist{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-22px,0) scale(1.04); }
}

/* Mosque silhouette footer */
.ramadan-mosque{
  position: fixed;
  left: 0; right: 0; bottom: -4px;
  height: 260px;
  background-image: url('../img/mosque.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  z-index: -1;
  opacity: .55;
  pointer-events: none;
}

/* Hanging lanterns (only for lanterns theme) */
.ramadan-lantern{
  position: fixed;
  width: 140px;
  height: 260px;
  background-image: url('../img/lantern2.svg');
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.55));
  opacity: .0;
  z-index: -1;
  pointer-events: none;
  transform-origin: top center;
}

.ramadan-lantern.l1{ top: -10px; right: 70px; animation: ramadanFloat 7s ease-in-out infinite; }
.ramadan-lantern.l2{ top: 140px; right: 18px; width: 100px; height: 190px; opacity: 0; animation: ramadanFloat 9s ease-in-out infinite; }
.ramadan-lantern.l3{ top: -8px; left: 70px; width: 120px; height: 220px; opacity: 0; animation: ramadanFloat 8s ease-in-out infinite; }

body[data-theme="lanterns"] .ramadan-lantern{ opacity: .62; }
body[data-theme="night"] .ramadan-lantern{ opacity: .18; }
body[data-theme="mosque"] .ramadan-lantern{ opacity: .22; }
body[data-theme="geometry"] .ramadan-lantern{ opacity: .14; }

@keyframes ramadanFloat{
  0%,100%{ transform: translateY(0) rotate(-1deg); }
  50%{ transform: translateY(14px) rotate(1deg); }
}

/* Reduce for mobile */
@media (max-width: 640px){
  .ramadan-lantern{ display:none; }
  .ramadan-ornament{ opacity: .16; }
  .ramadan-mosque{ opacity: .42; height: 220px; }
}