/* Non-Critical CSS - Loaded Asynchronously */
/* Contains enhancements and non-essential styles */

/* Enhanced hover effects (non-critical) */
@media (hover: hover) {
    .stage-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
}

/* Print styles */
@media print {
    .menu-btn,
    #sidebar,
    .ad-slot,
    .marquee-bg {
        display: none !important;
    }

    .site-container {
        box-shadow: none;
    }

    body {
        background: white;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .stage-card {
        border-width: 2px;
    }

    .icon-box {
        border: 2px solid currentColor;
    }
}

/* Focus visible enhancement */
:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Selection styles */
::selection {
    background-color: #dbeafe;
    color: #1e3a8a;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Loading state for images */
img {
    background-color: #f1f5f9;
}

/* Prevent layout shift during font loading */
.font-loading body {
    opacity: 0.99;
}

/* ===============================
   Marquee Enhancements (Non-Critical)
================================ */

/* تأثير إيقاف مؤقت عند hover */
@media (hover: hover) {
    .marquee-bg:hover .marquee-content {
        animation-play-state: paused;
    }
}

/* تعديلات إضافية للـ Marquee */
.marquee-bg {
    position: relative;
}

/* زيادة سرعة الـ Marquee على الموبايل */
@media (max-width: 768px) {
    .marquee-content {
        animation-duration: 15s !important;
    }
}