/* ============================================
   Premium Animated Backgrounds
   for Quran Listening Experience

   Each theme uses a UNIQUE animation technique:
   1. Dawn   — Pulsing radial glow (no movement)
   2. Ocean  — Horizontal wave layers (bob vertically)
   3. Aurora — Vertical curtain sway (skewX ribbons)
   4. Desert — Continuous slow pan (one-directional)
   5. Night  — Minimal breathing (nearly static)
   6. Spring — Slow gradient rotation (large element spins)
   7. Sky    — Diagonal light ray sweep (rectangular beam)
   8. Musk   — Orbital paths (circular translation + rotation)
   ============================================ */

/* ─── Shared Foundation ─── */

.bg-fajr,
.bg-ocean,
.bg-aurora,
.bg-desert,
.bg-night,
.bg-spring,
.bg-sky,
.bg-musk {
    overflow: hidden;
}

.bg-fajr::before, .bg-fajr::after,
.bg-ocean::before, .bg-ocean::after,
.bg-aurora::before, .bg-aurora::after,
.bg-desert::before, .bg-desert::after,
.bg-night::before, .bg-night::after,
.bg-spring::before, .bg-spring::after,
.bg-sky::before, .bg-sky::after,
.bg-musk::before, .bg-musk::after {
    content: '';
    position: absolute;
    pointer-events: none;
}


/* ═══════════════════════════════════════════
   1. فجر (Dawn)
   TECHNIQUE: Pulsing radial glow
   No movement — just warm light that breathes
   in and out like the first light of fajr.
   Fixed radial gradient with a living glow.
   ═══════════════════════════════════════════ */

.bg-fajr {
    background:
        radial-gradient(ellipse at 62% 75%, rgba(185, 148, 108, 0.35) 0%, transparent 55%),
        linear-gradient(155deg, #1a1228 0%, #30203a 28%, #4e384a 48%, #705850 68%, #907560 85%, #a8886e 100%);
}

/* Warm horizon glow — breathes only */
.bg-fajr::before {
    width: 60%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(190, 150, 105, 0.4) 0%, transparent 70%);
    filter: blur(80px);
    bottom: 5%;
    right: 5%;
    animation: fajr-pulse 10s ease-in-out infinite;
}

/* Cool upper wash — counter-phase pulse */
.bg-fajr::after {
    width: 65%;
    height: 35%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(105, 88, 130, 0.22) 0%, transparent 70%);
    filter: blur(90px);
    top: 0;
    left: 0;
    animation: fajr-pulse 10s ease-in-out infinite 5s;
}

@keyframes fajr-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.06); }
}


/* ═══════════════════════════════════════════
   2. محيط (Ocean)
   TECHNIQUE: Layered horizontal waves
   Wide, flat shapes that bob vertically
   at different speeds — like light refracting
   through deep water layers.
   ═══════════════════════════════════════════ */

.bg-ocean {
    background: linear-gradient(
        180deg,
        #050c16 0%, #0c1c2e 28%, #12303f 48%,
        #0e2535 68%, #081828 85%, #050c16 100%
    );
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.2);
}

/* Upper wave — wide thin band, slow bob */
.bg-ocean::before {
    width: 180%;
    height: 22%;
    border-radius: 45%;
    background: linear-gradient(
        90deg,
        transparent 0%, rgba(28, 110, 118, 0.12) 20%,
        rgba(35, 130, 135, 0.22) 50%,
        rgba(28, 110, 118, 0.12) 80%, transparent 100%
    );
    filter: blur(40px);
    top: 22%;
    left: -40%;
    animation: ocean-wave1 14s ease-in-out infinite;
}

/* Lower wave — denser, offset rhythm */
.bg-ocean::after {
    width: 200%;
    height: 18%;
    border-radius: 45%;
    background: linear-gradient(
        90deg,
        transparent 0%, rgba(20, 85, 95, 0.1) 25%,
        rgba(28, 105, 110, 0.18) 50%,
        rgba(20, 85, 95, 0.1) 75%, transparent 100%
    );
    filter: blur(35px);
    top: 55%;
    left: -50%;
    animation: ocean-wave2 10s ease-in-out infinite;
}

@keyframes ocean-wave1 {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-8%) translateX(3%); }
    50% { transform: translateY(5%) translateX(-2%); }
    75% { transform: translateY(-4%) translateX(2%); }
}

@keyframes ocean-wave2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(6%) translateX(-4%); }
    66% { transform: translateY(-5%) translateX(3%); }
}


/* ═══════════════════════════════════════════
   3. شفق (Aurora)
   TECHNIQUE: Vertical curtain sway
   Tall, narrow spectral ribbons that sway
   and skew like northern lights curtains.
   Uses skewX for the signature aurora look.
   ═══════════════════════════════════════════ */

.bg-aurora {
    background: linear-gradient(
        175deg,
        #04050e 0%, #081520 28%, #0d2228 48%,
        #0a1820 70%, #050810 100%
    );
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.2);
}

/* Green aurora curtain */
.bg-aurora::before {
    width: 32%;
    height: 130%;
    border-radius: 40%;
    background: linear-gradient(
        180deg,
        transparent 0%, rgba(55, 160, 125, 0.1) 10%,
        rgba(48, 148, 115, 0.32) 28%, rgba(42, 138, 108, 0.36) 48%,
        rgba(50, 145, 115, 0.18) 68%, transparent 100%
    );
    filter: blur(42px);
    top: -15%;
    left: 22%;
    animation: aurora-curtain1 16s ease-in-out infinite;
}

/* Violet aurora ribbon */
.bg-aurora::after {
    width: 26%;
    height: 115%;
    border-radius: 40%;
    background: linear-gradient(
        180deg,
        transparent 0%, rgba(100, 60, 140, 0.08) 15%,
        rgba(88, 50, 128, 0.26) 35%, rgba(80, 45, 118, 0.28) 55%,
        rgba(92, 55, 130, 0.12) 75%, transparent 100%
    );
    filter: blur(48px);
    top: -8%;
    right: 18%;
    animation: aurora-curtain2 23s ease-in-out infinite;
}

@keyframes aurora-curtain1 {
    0% { transform: translateX(0) skewX(0deg); opacity: 0.6; }
    20% { transform: translateX(8%) skewX(4deg); opacity: 0.82; }
    40% { transform: translateX(-4%) skewX(-2deg); opacity: 0.52; }
    60% { transform: translateX(10%) skewX(3deg); opacity: 0.75; }
    80% { transform: translateX(-5%) skewX(-3deg); opacity: 0.55; }
    100% { transform: translateX(0) skewX(0deg); opacity: 0.6; }
}

@keyframes aurora-curtain2 {
    0% { transform: translateX(0) skewX(0deg); opacity: 0.38; }
    30% { transform: translateX(-8%) skewX(-3deg); opacity: 0.58; }
    60% { transform: translateX(5%) skewX(2deg); opacity: 0.32; }
    100% { transform: translateX(0) skewX(0deg); opacity: 0.38; }
}


/* ═══════════════════════════════════════════
   4. صحراء (Desert)
   TECHNIQUE: Continuous slow pan
   The gradient slowly drifts sideways like
   sand shifting in the wind. One-directional
   feel with long alternating cycles.
   ═══════════════════════════════════════════ */

.bg-desert {
    background: linear-gradient(
        140deg,
        #130900 0%, #281408 18%, #422510 34%,
        #5e3a1a 48%, #7a5228 64%, #946a38 82%, #a87a45 100%
    );
    background-size: 300% 300%;
    animation: desert-pan 50s ease infinite alternate;
    box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.15);
}

/* Warm glow — slow horizontal sweep */
.bg-desert::before {
    width: 50%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(168, 130, 55, 0.28) 0%, transparent 68%);
    filter: blur(70px);
    top: 12%;
    left: 25%;
    animation: desert-drift 38s ease-in-out infinite alternate;
}

/* Earth warmth — counter-sweep */
.bg-desert::after {
    width: 45%;
    height: 45%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(140, 95, 38, 0.22) 0%, transparent 65%);
    filter: blur(65px);
    bottom: 8%;
    right: 15%;
    animation: desert-drift 50s ease-in-out infinite alternate-reverse;
}

@keyframes desert-pan {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 35%; }
}

@keyframes desert-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}


/* ═══════════════════════════════════════════
   5. ليل (Night)
   TECHNIQUE: Minimal breathing
   Nearly static — the deepest calm. Only a
   very slow expansion and contraction of
   ambient glow. Like the universe breathing.
   ═══════════════════════════════════════════ */

.bg-night {
    background: radial-gradient(
        ellipse at 50% 45%,
        #0c0e20 0%, #080a16 32%, #04060e 62%, #020308 100%
    );
    box-shadow: inset 0 0 250px rgba(0, 0, 0, 0.35);
}

/* Faint nebula — breathes only */
.bg-night::before {
    width: 65%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(45, 38, 88, 0.14) 0%, transparent 68%);
    filter: blur(100px);
    top: 12%;
    left: 18%;
    animation: night-breathe 22s ease-in-out infinite;
}

/* Barely-there warm accent — phase offset */
.bg-night::after {
    width: 50%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(35, 45, 80, 0.1) 0%, transparent 62%);
    filter: blur(90px);
    bottom: 18%;
    right: 12%;
    animation: night-breathe 22s ease-in-out infinite 11s;
}

@keyframes night-breathe {
    0%, 100% { transform: scale(1); opacity: 0.28; }
    50% { transform: scale(1.18); opacity: 0.5; }
}


/* ═══════════════════════════════════════════
   6. ربيع (Spring)
   TECHNIQUE: Slow gradient rotation
   A large overlapping element slowly rotates,
   creating shifting colored washes like
   sunlight turning through a garden.
   ═══════════════════════════════════════════ */

.bg-spring {
    background: linear-gradient(
        145deg,
        #ebe6da 0%, #ddd6c4 25%, #c8c4ad 45%,
        #b5bca0 60%, #c8c3b0 78%, #e0dbd0 100%
    );
}

/* Warm wash — rotates slowly */
.bg-spring::before {
    width: 140%;
    height: 140%;
    border-radius: 0;
    top: -20%;
    left: -20%;
    background: linear-gradient(
        0deg,
        transparent 0%, rgba(185, 148, 142, 0.18) 25%,
        transparent 50%, rgba(132, 152, 115, 0.15) 75%,
        transparent 100%
    );
    filter: blur(40px);
    animation: spring-rotate 45s linear infinite;
    transform-origin: center center;
}

/* Soft highlight — counter-rotates */
.bg-spring::after {
    width: 130%;
    height: 130%;
    border-radius: 0;
    top: -15%;
    left: -15%;
    background: linear-gradient(
        90deg,
        transparent 0%, rgba(160, 145, 120, 0.12) 30%,
        transparent 50%, rgba(140, 155, 130, 0.1) 70%,
        transparent 100%
    );
    filter: blur(50px);
    animation: spring-rotate 60s linear infinite reverse;
    transform-origin: center center;
}

@keyframes spring-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════
   7. سماء (Sky)
   TECHNIQUE: Diagonal light ray sweep
   A wide rectangular beam of warm light
   slowly sweeps across the sky diagonally,
   like sunlight through clouds.
   ═══════════════════════════════════════════ */

.bg-sky {
    background: linear-gradient(
        160deg,
        #d2dfea 0%, #b8cee0 28%, #9ebcd5 48%,
        #b0cade 68%, #c8d8e6 85%, #dce6ee 100%
    );
}

/* Diagonal sunbeam — sweeps from left to right */
.bg-sky::before {
    width: 22%;
    height: 200%;
    border-radius: 30%;
    background: linear-gradient(
        0deg,
        transparent 0%, rgba(250, 235, 190, 0.1) 20%,
        rgba(248, 228, 170, 0.18) 40%, rgba(250, 232, 180, 0.2) 50%,
        rgba(248, 228, 170, 0.18) 60%, rgba(250, 235, 190, 0.1) 80%,
        transparent 100%
    );
    filter: blur(25px);
    top: -50%;
    right: 65%;
    transform: rotate(-25deg);
    transform-origin: center;
    animation: sky-sweep 28s ease-in-out infinite alternate;
}

/* Soft ambient wash — gentle pulse */
.bg-sky::after {
    width: 48%;
    height: 38%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(195, 215, 235, 0.35) 0%, transparent 68%);
    filter: blur(55px);
    bottom: 12%;
    left: 8%;
    animation: sky-ambient 20s ease-in-out infinite;
}

@keyframes sky-sweep {
    0% { right: 72%; opacity: 0.45; }
    100% { right: -8%; opacity: 0.65; }
}

@keyframes sky-ambient {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.08); }
}


/* ═══════════════════════════════════════════
   8. مسك (Musk)
   TECHNIQUE: Orbital paths
   Elements trace slow circular paths with
   gentle rotation — like silk fabric catching
   light from a slowly turning chandelier.
   ═══════════════════════════════════════════ */

.bg-musk {
    background: radial-gradient(
        ellipse at 42% 48%,
        #2a1420 0%, #1e0e18 32%, #140a10 58%, #0e0608 100%
    );
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.2);
}

/* Rose-gold spotlight — orbits clockwise */
.bg-musk::before {
    width: 48%;
    height: 42%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(175, 142, 108, 0.26) 0%, transparent 65%);
    filter: blur(68px);
    top: 20%;
    left: 22%;
    animation: musk-orbit1 32s ease-in-out infinite;
}

/* Plum accent — orbits counter-clockwise */
.bg-musk::after {
    width: 42%;
    height: 38%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(82, 42, 72, 0.25) 0%, transparent 62%);
    filter: blur(72px);
    bottom: 18%;
    right: 18%;
    animation: musk-orbit2 38s ease-in-out infinite;
}

@keyframes musk-orbit1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(18%, -10%) rotate(6deg); }
    50% { transform: translate(8%, 12%) rotate(-4deg); }
    75% { transform: translate(-12%, 4%) rotate(5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes musk-orbit2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-15%, -10%) rotate(-6deg); }
    66% { transform: translate(10%, 8%) rotate(5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}