/* ================= VARIABLES ================= */
:root {
    --sky-top: #2c3e50;
    --sky-mid: #fd746c; /* Sunrise Orange */
    --sky-bot: #ff9068; /* Sunrise Yellow */
    --water: #3498db;
    --grass-dark: #1e5128;
    --grass-light: #4ade80;
    --mosque: #1f2937; /* Silhouette Color */
    --soudho: #e2e8f0;
    --sun: #fbbf24;
}

/* ================= CONTAINER ================= */
.bd-morning-scene {
    position: relative;
    height: 350px; /* একটু বড় দৃশ্য */
    width: 100%;
    background: linear-gradient(to bottom, #3b82f6 0%, #fcd34d 60%, #fb923c 100%); /* সকালের আকাশ */
    overflow: hidden;
    margin-bottom: -1px;
    border-bottom: 5px solid #15803d;
    z-index: 1;
}

/* --- ১. সূর্য (Rising Sun) --- */
.rising-sun {
    position: absolute; bottom: 80px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 120px;
    background: radial-gradient(circle, #f59e0b, #fbbf24);
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(251, 191, 36, 0.8);
    opacity: 0.9;
    animation: riseUp 20s infinite alternate ease-in-out;
    z-index: 1;
}
@keyframes riseUp { 0% { bottom: 40px; opacity: 0.5; } 100% { bottom: 120px; opacity: 1; } }

/* --- ২. কুয়াশা/মেঘ (Fog) --- */
.fog-layer {
    position: absolute; bottom: 50px; left: 0; width: 200%; height: 100px;
    background: url('https://png.pngtree.com/png-vector/20220922/ourmid/pngtree-white-clouds-png-image_6211333.png');
    background-size: cover; opacity: 0.4; pointer-events: none;
}
.f1 { animation: moveFog 60s linear infinite; }
.f2 { bottom: 20px; opacity: 0.3; animation: moveFog 40s linear infinite reverse; }
@keyframes moveFog { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- ৩. পাখি (Birds) --- */
.bird {
    position: absolute; width: 8px; height: 8px; background: black;
    border-radius: 50%; box-shadow: 4px 4px 0 0 black;
}
.b1 { top: 50px; left: -20px; animation: fly 15s linear infinite; }
.b2 { top: 70px; left: -50px; animation: fly 18s linear infinite 3s; }
.b3 { top: 60px; left: -80px; animation: fly 20s linear infinite 5s; }
@keyframes fly {
    0% { left: -50px; transform: translateY(0) scale(0.8); }
    50% { transform: translateY(-30px); }
    100% { left: 110%; transform: translateY(0) scale(0.8); }
}

/* --- ৪. গ্রাম ও মসজিদ (Village Silhouette) --- */
.village-skyline {
    position: absolute; bottom: 60px; left: 0; width: 100%; height: 100px;
    z-index: 2; opacity: 0.9;
}
/* মসজিদ */
.mosque-structure {
    position: absolute; bottom: 0; right: 15%;
    display: flex; align-items: flex-end;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
}
.dome {
    width: 70px; height: 50px; background: var(--mosque);
    border-radius: 50px 50px 0 0; margin: 0 -10px; z-index: 2;
}
.dome::before { /* Crescent on top */
    content: '☪'; color: gold; font-size: 20px; position: absolute; top: -25px; left: 25px;
}
.minaret { width: 12px; background: var(--mosque); border-radius: 5px 5px 0 0; }
.m-left { height: 90px; } .m-right { height: 70px; }

/* গাছপালা */
.tree-line {
    position: absolute; bottom: 0; width: 100%; height: 60px;
    background: url('https://cdn.pixabay.com/photo/2020/01/31/07/53/grass-4807357_1280.png') repeat-x;
    background-size: contain; filter: brightness(0.4);
}

/* --- ৫. স্মৃতিসৌধ (Soudho) --- */
.soudho-wrapper {
    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
    width: 300px; height: 220px; display: flex; justify-content: center; align-items: flex-end;
    z-index: 3; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}
.wall {
    position: absolute; bottom: 0; width: 0; height: 0; border-style: solid;
    border-color: transparent transparent var(--soudho) transparent;
}
/* 7 Walls Logic */
.w1 { border-width: 0 130px 70px 130px; border-color: transparent transparent #94a3b8 transparent; z-index: 1; }
.w2 { border-width: 0 110px 100px 110px; border-color: transparent transparent #cbd5e1 transparent; z-index: 2; }
.w3 { border-width: 0 90px 130px 90px; border-color: transparent transparent #94a3b8 transparent; z-index: 3; }
.w4 { border-width: 0 70px 160px 70px; border-color: transparent transparent #e2e8f0 transparent; z-index: 4; }
.w5 { border-width: 0 50px 180px 50px; border-color: transparent transparent #94a3b8 transparent; z-index: 5; }
.w6 { border-width: 0 30px 200px 30px; border-color: transparent transparent #cbd5e1 transparent; z-index: 6; }
.w7 { border-width: 0 15px 220px 15px; border-color: transparent transparent #ffffff transparent; z-index: 7; }

/* --- ৬. নদী (River) --- */
.river-section {
    position: absolute; bottom: 0; width: 100%; height: 60px;
    background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
    z-index: 4; overflow: hidden;
}
.water-shine {
    position: absolute; top: 0; left: 0; width: 200%; height: 100%;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, transparent 20px);
    animation: flowWater 10s linear infinite;
}
@keyframes flowWater { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- নৌকা (Boat Animation) --- */
.boat-anim-container {
    position: absolute; bottom: 10px; left: -150px;
    animation: sail 25s linear infinite; z-index: 5;
}
@keyframes sail {
    0% { left: -150px; transform: rotate(2deg); }
    50% { transform: rotate(-2deg) translateY(3px); }
    100% { left: 110%; transform: rotate(2deg); }
}
.hull {
    width: 100px; height: 25px; background: #78350f; /* Wood */
    border-radius: 0 0 50px 50px;
    position: relative;
}
.hull::before { /* Chhai/Roof */
    content: ''; position: absolute; left: 20px; bottom: 20px;
    width: 40px; height: 20px; background: #5a2e0c; border-radius: 20px 20px 0 0;
}
.sail {
    position: absolute; bottom: 25px; left: 40px;
    width: 0; height: 0;
    border-left: 30px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 60px solid #ef4444; /* Red Sail */
    transform: skewX(-10deg);
}
.flag {
    position: absolute; top: -55px; left: 40px; width: 20px; height: 12px;
    background: #006a4e; /* BD Green */
}
.flag::after {
    content: ''; position: absolute; top: 3px; left: 5px; width: 6px; height: 6px;
    background: #f42a41; border-radius: 50%;
}

/* --- ৭. ঘাস (Foreground) --- */
.grass-foreground {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 20px;
    z-index: 6; display: flex; justify-content: space-around;
}
.grass {
    width: 10px; height: 20px; background: #166534;
    border-radius: 10px 10px 0 0;
}
.flower {
    width: 10px; height: 10px; background: yellow; border-radius: 50%;
    margin-top: -5px; box-shadow: 0 0 5px orange;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    .bd-morning-scene { height: 280px; }
    .soudho-wrapper { transform: translateX(-50%) scale(0.65); transform-origin: bottom center; }
    .mosque-structure { right: 5%; transform: scale(0.7); transform-origin: bottom right; }
    .rising-sun { width: 80px; height: 80px; bottom: 60px; }
}