/* ============================================
   DESERT THEME - Middle Eastern Animated Scene
   MTs Ma'arif 02 Kotagajah
   ============================================ */

/* --- Time-based CSS Variables --- */
/* --sil uses CONTRASTING colors against the sky so silhouettes are always visible */
.time-fajr {
    --sky-1: #0d1137;
    --sky-2: #1a1b4b;
    --sky-3: #2d1b69;
    --sil: #1a3050;
    --sil-2: #0f1e33;
    --sand: #1c1540;
    --stars-vis: 0.7;
    --card-bg: rgba(15, 23, 42, 0.92);
    --card-border: rgba(100, 116, 139, 0.25);
    --nav-bg: rgba(15, 23, 42, 0.95);
    --text-m: #e2e8f0;
    --text-s: #94a3b8;
    --text-accent: #a78bfa;
}

.time-sunrise {
    --sky-1: #2d1b69;
    --sky-2: #e55d87;
    --sky-3: #f7bb97;
    --sil: #2a1040;
    --sil-2: #1a0a2e;
    --sand: #d4956a;
    --stars-vis: 0;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(255, 241, 242, 0.95);
    --text-m: #1e293b;
    --text-s: #64748b;
    --text-accent: #db2777;
}

.time-morning {
    --sky-1: #4facfe;
    --sky-2: #87ceeb;
    --sky-3: #b8e8d8;
    --sil: #0c2e42;
    --sil-2: #081c2a;
    --sand: #c9a96e;
    --stars-vis: 0;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(240, 249, 255, 0.95);
    --text-m: #1e293b;
    --text-s: #64748b;
    --text-accent: #0284c7;
}

.time-midday {
    --sky-1: #1e88e5;
    --sky-2: #64b5f6;
    --sky-3: #bbdefb;
    --sil: #0a2540;
    --sil-2: #061830;
    --sand: #d4a960;
    --stars-vis: 0;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.95);
    --text-m: #1e293b;
    --text-s: #475569;
    --text-accent: #059669;
}

.time-afternoon {
    --sky-1: #e08a3c;
    --sky-2: #f2c94c;
    --sky-3: #ffecd2;
    --sil: #3a1a0a;
    --sil-2: #2a0f05;
    --sand: #c4854a;
    --stars-vis: 0;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(254, 243, 199, 0.95);
    --text-m: #1e293b;
    --text-s: #64748b;
    --text-accent: #d97706;
}

.time-maghrib {
    --sky-1: #1a0a2e;
    --sky-2: #c0392b;
    --sky-3: #f39c12;
    --sil: #0a0515;
    --sil-2: #050210;
    --sand: #8a3515;
    --stars-vis: 0.3;
    --card-bg: rgba(30, 15, 10, 0.92);
    --card-border: rgba(253, 224, 71, 0.15);
    --nav-bg: rgba(30, 15, 10, 0.95);
    --text-m: #fef3c7;
    --text-s: #fde68a;
    --text-accent: #fb923c;
}

.time-night {
    --sky-1: #020617;
    --sky-2: #0f172a;
    --sky-3: #1e293b;
    --sil: #1a2540;
    --sil-2: #0f1520;
    --sand: #0c1225;
    --stars-vis: 1;
    --card-bg: rgba(15, 23, 42, 0.92);
    --card-border: rgba(100, 116, 139, 0.25);
    --nav-bg: rgba(15, 23, 42, 0.95);
    --text-m: #e2e8f0;
    --text-s: #94a3b8;
    --text-accent: #38bdf8;
}

/* --- Scene Container --- */
.desert-scene {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.desert-scene.scene-mini {
    height: 100%;
    min-height: 180px;
}

@media (min-width: 769px) {
    .desert-scene {
        height: 280px;
    }

    .desert-scene.scene-mini {
        height: 100%;
        min-height: 180px;
    }
}

/* --- Sky --- */
.desert-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 50%, var(--sky-3) 100%);
}

/* --- Stars --- */
.desert-stars {
    position: absolute;
    inset: 0;
    opacity: var(--stars-vis, 0);
    transition: opacity 1s ease;
}

/* Movement enabled on mobile for lively atmosphere */
.ds-cloud,
.ds-palm,
.ds-caravan {
    will-change: transform;
}

.d-star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

/* Shooting stars removed for performance */

/* --- Sun --- */
.desert-sun {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff8c4 20%, #ffd700 60%, #ff9800 100%);
    box-shadow: 0 0 30px 8px rgba(255, 200, 0, 0.3);
}

.desert-sun::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, transparent 70%);
}

/* --- Moon --- */
.desert-moon {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f0d0;
    overflow: hidden;
    box-shadow: 0 0 20px 5px rgba(245, 240, 208, 0.15);
}

.moon-shadow {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sky-1);
    top: 0;
}

.desert-moon::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 240, 208, 0.1) 0%, transparent 70%);
}

/* --- Clouds --- */
.ds-cloud {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    animation: dsCloudDrift var(--c-dur) linear infinite;
}

@keyframes dsCloudDrift {
    from {
        transform: translateX(-150px) scale(var(--c-scale, 1));
    }

    to {
        transform: translateX(110vw) scale(var(--c-scale, 1));
    }
}

/* --- Birds --- */
.ds-bird-group {
    position: absolute;
    left: -100px;
    z-index: 20;
    /* High z-index to be above dunes */
    animation: dsBirdFly linear infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes dsBirdFly {
    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(115vw);
    }
}

/* --- Shooting Stars --- */
.ds-s-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: dsShootingStar linear infinite;
}

@keyframes dsShootingStar {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    15% {
        transform: translate(250px, 150px) scale(0);
        opacity: 0;
    }

    100% {
        transform: translate(250px, 150px) scale(0);
        opacity: 0;
    }
}

/* --- Ground SVG Layers --- */
.ds-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ds-dune {
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* --- Gate/Gerbang (left side) --- */
.ds-gate {
    position: absolute;
    bottom: 42px;
    left: 8%;
    z-index: 3;
}

.scene-mini .ds-gate {
    bottom: 26px;
}

.scene-mini .ds-gate svg {
    width: 45px;
    height: auto;
}

/* --- School Building --- */
.ds-school {
    position: absolute;
    bottom: 42px;
    right: 6%;
    z-index: 3;
}

.scene-mini .ds-school {
    bottom: 26px;
}

.scene-mini .ds-school svg {
    width: 80px;
    height: auto;
}

/* --- Palm Trees --- */
.ds-palm {
    position: absolute;
    bottom: 38px;
    z-index: 2;
    animation: dsPalmSway 5s ease-in-out infinite alternate;
    transform-origin: bottom center;
}

.scene-mini .ds-palm {
    bottom: 24px;
}

.scene-mini .ds-palm svg {
    width: 20px;
    height: auto;
}

@keyframes dsPalmSway {
    0% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
    }
}

/* --- Camel Caravan --- */
.ds-caravan {
    position: absolute;
    bottom: 5px;
    left: -240px;
    z-index: 4;
    animation: dsCaravanWalk 45s linear infinite;
}

.scene-mini .ds-caravan {
    bottom: 2px;
}

.scene-mini .ds-caravan svg {
    width: 120px;
    height: auto;
}

@keyframes dsCaravanWalk {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(100vw + 480px));
    }
}

.ds-caravan-2 {
    position: absolute;
    bottom: 28px;
    right: -200px;
    opacity: 0.25;
    z-index: 1;
    transform: scaleX(-1) scale(0.6);
    animation: dsCaravan2 60s linear infinite;
}

.scene-mini .ds-caravan-2 {
    display: none;
}

@keyframes dsCaravan2 {
    0% {
        transform: scaleX(-1) scale(0.6) translateX(0);
    }

    100% {
        transform: scaleX(-1) scale(0.6) translateX(calc(100vw + 400px));
    }
}

/* Birds removed for performance */

/* Dust particles removed for performance */

/* --- Info Overlay --- */
.desert-info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: white;
    text-align: center;
    padding: 10px 15px;
}

.desert-info h1,
.desert-info h2 {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* --- Entrance Animations (first load) --- */
.ds-anim .desert-sky {
    animation: dsFadeIn 1.2s ease-out;
}

.ds-anim .ds-dune {
    animation: dsSlideUp 0.8s ease-out both;
}

.ds-anim .ds-school {
    animation: dsPopUp 1s ease-out 0.3s both;
}

.ds-anim .ds-gate {
    animation: dsPopUp 1s ease-out 0.35s both;
}

.ds-anim .ds-palm {
    animation: dsPopUp 1s ease-out 0.4s both, dsPalmSway 5s ease-in-out infinite alternate 1s;
}

.ds-anim .desert-info {
    animation: dsInfoIn 0.8s ease-out 0.2s both;
}

@keyframes dsFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes dsSlideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes dsPopUp {
    0% {
        transform: translateY(25px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes dsInfoIn {
    0% {
        transform: translateY(-15px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* =============================================
   GLOBAL THEME INTEGRATION
   ============================================= */

/* Body uses sky gradient as fixed background */
body.time-fajr,
body.time-sunrise,
body.time-morning,
body.time-midday,
body.time-afternoon,
body.time-maghrib,
body.time-night {
    background: linear-gradient(180deg, var(--sky-3) 0%, var(--sky-3) 100%) fixed !important;
    color: var(--text-m);
}

/* Transparent base to show body gradient */
.app-container,
body {
    background-color: transparent !important;
}

/* --- Cards & Containers --- */
.surah-card,
.ayat-card,
.doa-card,
.p-card,
.card,
.hadith-container,
.countdown-container,
.cal-preview,
.mini-player {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
    content-visibility: auto;
    contain-intrinsic-size: 1px 150px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.is-mobile .surah-card,
.is-mobile .ayat-card,
.is-mobile .doa-card,
.is-mobile .card,
.is-mobile .hadith-container,
.is-mobile .countdown-container,
.is-mobile .mini-player {
    box-shadow: none !important;
}

/* --- Bottom Nav --- */
.bottom-nav {
    background: var(--nav-bg) !important;
    border-top: 1px solid var(--card-border) !important;
    box-shadow: 0 -2px 6px -1px rgba(0, 0, 0, 0.06);
    backface-visibility: hidden;
}

.is-mobile .bottom-nav {
    box-shadow: none !important;
}

/* --- Sticky Toolbar --- */
.sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 150;
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
    padding: 12px 20px;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
    will-change: transform;
}

.is-mobile .sticky-toolbar {
    box-shadow: none !important;
}

/* --- Themed Text Colors --- */
.surah-name,
.surah-arab,
.ayat-arab,
.doa-title,
.doa-arab,
.event-title,
.hadith-title,
.player-title,
.m-num,
.date-main,
.wib,
.address-detail {
    color: var(--text-m) !important;
}

.ayat-arti,
.doa-arti,
.event-desc,
.hadith-text,
.j-pas,
.footer {
    color: var(--text-s) !important;
}

.surah-card i.fa-play-circle {
    color: var(--text-accent) !important;
}

.btn-ctrl {
    color: var(--text-s) !important;
}

.glowing-name {
    color: var(--text-accent) !important;
}

/* --- Bottom Nav Links --- */
.bottom-nav a {
    color: var(--text-s) !important;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.bottom-nav a.active {
    color: var(--text-accent, var(--primary)) !important;
    font-weight: 800 !important;
}

.bottom-nav a.active i {
    background: var(--primary);
    color: white !important;
    border-radius: 20px;
    padding: 6px 18px;
    margin-bottom: 2px;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35);
    transform: translateY(-3px);
    transition: background 0.2s, color 0.2s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.is-mobile .bottom-nav a.active i {
    box-shadow: none !important;
}

/* --- Button & Tool Strips Themed --- */
.tool-strip .ts-tools {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

#btn-back,
#ts-prev,
#ts-next,
.ts-tools button,
.ts-zoom {
    color: var(--text-m) !important;
    background: transparent !important;
}

.ts-tools button.active-tool {
    background: var(--primary) !important;
    color: white !important;
}

.search-box {
    background: var(--card-bg) !important;
    color: var(--text-m) !important;
    border-color: var(--card-border) !important;
}

.search-box::placeholder {
    color: var(--text-s) !important;
}

/* --- Surah Number Badge --- */
.surah-num {
    background: rgba(5, 150, 105, 0.15) !important;
    color: var(--primary) !important;
}

/* --- Ayat Active Play --- */
.ayat-card.active-play {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
}

/* --- Player --- */
.mini-player .progress-bar {
    background: var(--card-border) !important;
}

.mini-player .progress-fill {
    background: var(--primary) !important;
}

.player-ayat {
    background: rgba(5, 150, 105, 0.15) !important;
    color: var(--primary) !important;
}

/* --- Tab Buttons Themed --- */
#tab-surah,
#tab-juz {
    transition: all 0.2s ease;
}

/* --- Event Card --- */
.event-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

.qr-wrapper {
    background: white !important;
}

/* --- Modal Themed (keep white for readability) --- */
.modal-box {
    background: var(--card-bg, #fff) !important;
    color: var(--text-m) !important;
    border: 1px solid var(--card-border) !important;
}