/* /root/anifehras/frontend/css/base.css */

/* تسجيل متغيّر اللون كي يتحوّل بسلاسة عند تغيير القسم (توقيع الموقع البصري) */
@property --accent {
    syntax: '<color>';
    inherits: true;
    initial-value: #3b82f6;
}

:root {
    --bg-deep: #030810;
    --accent: #3b82f6;
    --accent-soft:   color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
    --accent-glow:   color-mix(in srgb, var(--accent) 35%, transparent);
    --text-main: #f6f9fc;
    --text-sub: #8aa0b6;
    --glass-bg: rgba(8, 15, 26, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --sidebar-width: 80px;
    --bottom-nav-height: 65px;
    --appbar-h: 78px;
    --card-radius: 16px;
    --blur-amount: 12px;
    --blur-amount-mobile: 4px;
    --font-display: 'Changa', 'Cairo', sans-serif;
    --font-body: 'Cairo', sans-serif;
    color-scheme: dark;
    transition: --accent 0.55s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-deep);
    color: var(--text-main);
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* هالة محيطية تتبع لون القسم الحالي وتتحوّل معه */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 65% 45% at 18% 42%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 55% 40% at 82% 12%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 70%);
}

::selection { background: var(--accent-glow); color: #fff; }

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
}

.page { display: none; }
.page.active { display: block; animation: page-in 0.28s ease; }
@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* تمرير أفقي موحّد */
.h-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    -webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar { height: 5px; }
.h-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

/* تلاشي أطراف الصفوف القابلة للتمرير */
.scroll-fade-wrapper {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* إظهار حلقة التركيز للوحة المفاتيح فقط */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

img { max-width: 100%; }

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