/* --- المتغيرات اللونية (أجواء صيفية دافئة) --- */
:root {
    --bg-color: #fefdfb;      /* مركز الخلفية: نور رملي دافئ */
    --bg-color-2: #f2e6c9;    /* أطراف الخلفية: رمل دافئ (vignette) */
    --landscape-fill: #252525; /* النخيل والرسمات — لونها الحقيقي الأصلي (بدون تعديل) */
    --sun-fill: #ffca28;       /* شمس صيفية زاهية (كهرماني) */
    --sun-glow: rgba(255, 168, 56, 0.55);
}

/* --- التنسيقات العامة --- */
body {
    /* خلفية متدرّجة دائرية تعطي عمقًا احترافيًا (نهار دافئ / ليل عميق) */
    background: radial-gradient(circle at 50% 40%, var(--bg-color) 0%, var(--bg-color-2) 78%);
    background-color: var(--bg-color-2);
    transition: background-color 0.6s ease, color 0.6s ease;
    margin: 0;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* --- تنسيق حاوية الـ SVG --- */
.svg-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px; /* للتحكم بحجم الرسمة */
    padding: 2rem;
    /* بدون حركة مستمرة على الحاوية — المطلوب أن تتحرك الشمس فقط */
}

.interactive-svg {
    width: 100%;
    height: auto;
    overflow: visible; /* حتى لا تُقصّ أطراف الشمس أثناء الدوران */
    /* لا توهّج على المشهد كله (كان يطلع كهالة حول البرواز) */
}

/* --- دوران الشمس الخفيف المستمر ---
   نُدوّر مجموعة <g id="sun"> ككل حول مركزها (transform-box: fill-box)
   فلا تتحطم الرسمة. مستمر ومستقل عن بقية الحركات. */
.interactive-svg #sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: sun-spin 32s linear infinite;
    /* التوهّج الدافئ حول الشمس فقط — وليس حول البرواز */
    filter: drop-shadow(0 0 10px var(--sun-glow));
}

/* --- الإطار: اهتزاز خفيف يمين/يسار (تمايل لطيف) ---
   نحرّك مجموعة <g id="frame"> (البرواز + النص) حول مركزها فقط، فيتحرك النص معه.
   لون البرواز يبقى كما هو (#f5f5f5) — لا نعدّله. */
.interactive-svg #frame {
    transform-box: fill-box;
    transform-origin: center;
    animation: frame-sway 3.6s ease-in-out infinite;
}
/* نُبقي مسار البرواز ظاهرًا (ليس ضمن قاعدة الإظهار opacity) */
.interactive-svg #frame > path { opacity: 1; }

/* =========================================================
   ربط ألوان الرسمة بالمتغيرات (تتبدّل مع الوضع الليلي/النهاري)
   ========================================================= */

/* أجزاء الشمس */
.interactive-svg path[fill="#f9db5a"],
.interactive-svg polygon[fill="#f9db5a"] {
    fill: var(--sun-fill) !important;
    stroke: var(--sun-fill) !important;
    transition: fill 0.6s, stroke 0.6s;
}

/* أجزاء النخل والأرض */
.interactive-svg path[fill="#252525"],
.interactive-svg polygon[fill="#252525"] {
    fill: var(--landscape-fill) !important;
    stroke: var(--landscape-fill) !important;
    transition: fill 0.6s, stroke 0.6s;
}

/* الحالة الابتدائية: كل القطع مخفية (شفافة) بانتظار تشغيل الموشن.
   نستخدم opacity (آمنة) بدل stroke-dasharray حتى لا تبدو الحركة كخربشة. */
.interactive-svg path,
.interactive-svg polygon {
    opacity: 0;
    stroke-width: 0;
}

/* =========================================================
   حركة واقعية: شروق المشهد + ظهور متدرّج + نبض إشعاعي
   كل هذا يُعاد تشغيله عند الضغط على زر التبديل (animate-draw)
   ========================================================= */

/* (1) المشهد يظهر مرة واحدة من الأسفل ويستقر (دخول لمرة واحدة، ثم ثابت).
       لا توهج نابض مستمر — الحركة المستمرة الوحيدة هي دوران الشمس #sun. */
.animate-draw {
    animation: scene-rise 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* (2) الشمس تظهر أولًا (إضاءة الفجر) */
.animate-draw path[fill="#f9db5a"],
.animate-draw polygon[fill="#f9db5a"] {
    animation: reveal 1s ease-out forwards;
}

/* (3) ثم تضيء الأرض والنخل بعدها بقليل (انتشار الضوء) */
.animate-draw path[fill="#252525"],
.animate-draw polygon[fill="#252525"] {
    animation: reveal 1.1s ease-out 0.4s forwards;
}

/* --- الكيفريمز --- */

@keyframes scene-rise {
    0%   { opacity: 0; transform: translateY(45px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes scene-glow {
    0%, 100% { filter: drop-shadow(0 0 10px var(--sun-glow)); }
    50%      { filter: drop-shadow(0 0 30px var(--sun-glow)); }
}

@keyframes reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes heat-haze {
    0%, 100% { transform: scale(1);     }
    50%      { transform: scale(1.008); }
}

@keyframes sun-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* اهتزاز الإطار: تمايل أفقي خفيف يمين/يسار مع ميلان بسيط جدًا */
@keyframes frame-sway {
    0%, 100% { transform: translateX(-12px) rotate(-1.3deg); }
    50%      { transform: translateX(12px)  rotate(1.3deg);  }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .svg-container { animation: none; }
    .interactive-svg #sun { animation: none; }
    .interactive-svg #frame { animation: none; }
    .interactive-svg path,
    .interactive-svg polygon { opacity: 1; }
    .animate-draw,
    .animate-draw path,
    .animate-draw polygon { animation: none !important; }
}