/**
 * Performance CSS for AtlasWeb
 * This CSS includes performance improvements and optimizations for both RTL and LTR layouts
 */

/* Optimize images with lazy loading */
img.lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

img:not(.lazy) {
    opacity: 1;
}

/* Improve render performance */
* {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduce layout shifts */
.img-container {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Optimize image sizes for mobile */
    .mobile-optimize {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* RTL-specific performance optimizations */
html[dir="rtl"] .performance-container {
    direction: rtl;
    unicode-bidi: embed;
}

/* Optimizations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Content visibility optimizations for below-the-fold content */
.optimize-visibility {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px; /* Approximate placeholder size */
}

/* تحسينات الفيديو */
.video-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* تنسيق أزرار التحكم بالفيديو */
.video-controls {
    transition: opacity 0.3s ease;
    z-index: 10;
}

.video-container:hover .video-controls {
    opacity: 1 !important;
}

/* تحسين عرض الفيديو في الوضع RTL */
[dir="rtl"] .video-controls {
    right: auto;
    left: 0.75rem;
}

/* تحسينات للأجهزة المحمولة */
@media (max-width: 768px) {
    .video-controls {
        opacity: 0.7 !important;
    }
    
    /* عرض الأزرار بشكل دائم على الأجهزة المحمولة للتسهيل */
    .video-container .video-controls {
        opacity: 0.7 !important;
    }
}

/* تحسينات للمستخدمين الذين يفضلون تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .video-container video {
        animation: none !important;
    }
}

/* إصلاحات للتوافقية في مختلف المتصفحات */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* إصلاحات لمتصفح IE */
    .video-container video {
        width: 100%;
        height: auto;
    }
}

@supports (-moz-appearance:none) {
    /* إصلاحات لمتصفح Firefox */
    .video-container video {
        object-fit: contain;
    }
}

/* تصغير الفيديو على الطباعة */
@media print {
    .video-container {
        display: none;
    }
}

/* Print optimizations */
@media print {
    /* Optimize for printing */
    @page {
        margin: 1cm;
    }
    
    body {
        font: 12pt Georgia, "Times New Roman", Times, serif;
        line-height: 1.3;
    }
    
    /* Hide unnecessary elements when printing */
    nav, footer, video, audio, object, embed, .no-print {
        display: none !important;
    }
}