/* Quran background: a theme-aware version of the home-page pattern, 20% softer. */
.quran-ambient-pattern { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.quran-ambient-pattern::before,.quran-ambient-pattern::after {
  content:""; position:absolute; inset:-10%; transform:rotate(-4deg) scale(1.08);
  -webkit-mask:url("../islamic-geometric-pattern.png") repeat 0 0 / clamp(13rem,17vw,23rem);
  mask:url("../islamic-geometric-pattern.png") repeat 0 0 / clamp(13rem,17vw,23rem);
}
.quran-ambient-pattern::before { background:var(--gold); opacity:.022; }
.quran-ambient-pattern::after {
  background:linear-gradient(110deg,transparent 27.5%,color-mix(in srgb,var(--gold) 10%,transparent) 38%,color-mix(in srgb,var(--gold) 28%,transparent) 50%,color-mix(in srgb,var(--gold) 10%,transparent) 62%,transparent 72.5%) no-repeat;
  background-size:350% 100%; opacity:0; animation:quran-pattern-wash 13s linear infinite;
}
@keyframes quran-pattern-wash {
  0% { opacity:0; background-position:85% 0; }
  3%,85% { opacity:.36; }
  94%,100% { opacity:0; background-position:15% 0; }
}
.quran-player-body .quran-ambient-pattern::after {
  background:linear-gradient(110deg,transparent 38%,color-mix(in srgb,var(--gold) 10%,transparent) 44%,color-mix(in srgb,var(--gold) 28%,transparent) 50%,color-mix(in srgb,var(--gold) 10%,transparent) 56%,transparent 62%) no-repeat;
}
.page { position:relative; z-index:1; }
body.focus-mode .quran-ambient-pattern { display:none; }
@media(prefers-reduced-motion:reduce) { .quran-ambient-pattern::after { animation:none; opacity:0; } }
@media print { .quran-ambient-pattern { display:none; } }