/* ============================================================
   تنسيقات الهوية البصرية الفاخرة والأنيميشن - مركز الشيخ علي أبو زينب
   Custom Theme & Animations CSS
   ============================================================ */

:root {
    --color-primary-dark: #0A3826;
    --color-primary: #0C4A34;
    --color-primary-light: #146347;
    --color-accent-gold: #C5A059;
    --color-accent-gold-hover: #B28E46;
    --color-accent-sky: #2A5C8A;
    --color-bg-surface: #FAF7F2;
    --color-card-bg: #FFFFFF;
    --color-text-main: #1C2B24;
    --color-text-muted: #5C6B64;
}

/* التنسيق العام والأسطح */
body {
    background-color: var(--color-bg-surface);
    color: var(--color-text-main);
    font-family: 'Tajawal', sans-serif;
    min-height: 100vh;
}

/* البانر الرئيسي بحلفية الزخرفة الإسلامية الهادئة */
.hero-islamic-bg {
    background-color: var(--color-primary-dark);
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(197, 160, 89, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 90% 10%, rgba(42, 92, 138, 0.2) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M40 20L60 40L40 60L20 40Z' fill='%23c5a059' fill-opacity='0.05'/%3E%3C/svg%3E");
    animation: backgroundFloat 20s ease-in-out infinite alternate;
}

@keyframes backgroundFloat {
    0% { background-position: 0px 0px; }
    100% { background-position: 40px 40px; }
}

/* توهج وبث الشعار الدائري الرئيسي (Logo Breathing Glow) */
.logo-breathing-glow {
    animation: logoGlow 4s ease-in-out infinite alternate;
}

@keyframes logoGlow {
    0% {
        box-shadow: 0 0 20px rgba(197, 160, 89, 0.3), 0 0 40px rgba(197, 160, 89, 0.1);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 35px rgba(197, 160, 89, 0.6), 0 0 70px rgba(197, 160, 89, 0.25);
        transform: scale(1.02);
    }
}

/* انزلاق وظهور العناصر فور التحميل (Fade In & Slide Up) */
.fade-in-slide-up {
    animation: fadeInSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* الأزرار الذهبية الفاخرة مع تأثير النقر */
.btn-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%);
    color: #0A3826;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-gold:hover {
    background: linear-gradient(135deg, #E2BD45 0%, #B28E46 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.45);
}

.btn-gold:active {
    transform: translateY(1px) scale(0.97);
}

/* المشغل الصوتي العائم بالأخضر الزمردي والذهبي */
.sticky-player-emerald {
    background: linear-gradient(180deg, rgba(12, 74, 52, 0.97) 0%, rgba(10, 56, 38, 0.99) 100%);
    border-top: 2px solid rgba(197, 160, 89, 0.4);
    box-shadow: 0 -10px 30px rgba(10, 56, 38, 0.3);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* الموجة الصوتية Canvas */
.waveform-canvas {
    width: 100%;
    height: 48px;
    display: block;
}

/* الشريط الجانبي الداكن للوحة التحكم (Admin Sidebar) */
.admin-sidebar {
    background-color: var(--color-primary-dark);
    background-image: radial-gradient(circle at 10% 90%, rgba(197, 160, 89, 0.08) 0%, transparent 40%);
}

.admin-sidebar a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-sidebar a.active {
    background: linear-gradient(90deg, rgba(197, 160, 89, 0.22) 0%, rgba(197, 160, 89, 0.06) 100%);
    color: #C5A059;
    border-right: 4px solid #C5A059;
}

/* شارات التصنيفات والسلاسل */
.badge-gold {
    background-color: rgba(197, 160, 89, 0.15);
    color: #0C4A34;
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.badge-sky {
    background-color: rgba(42, 92, 138, 0.1);
    color: #2A5C8A;
    border: 1px solid rgba(42, 92, 138, 0.2);
}

/* تأثير التمرير الفاخر للبطاقات (Card Lift) */
.card-hover-effect {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(12, 74, 52, 0.1);
    border-color: rgba(197, 160, 89, 0.45);
}

.card-hover-effect:hover .icon-float {
    transform: translateY(-3px) scale(1.08);
    color: #C5A059;
}

.icon-float {
    transition: transform 0.3s ease, color 0.3s ease;
}

/* احترام خاصية إيقاف الحركة لمن يفضل ذلك */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}