/* Formal Organization Panorama CSS - Modern and Professional */

/* Container للبانوراما */
.panorama-container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh; /* يحسن حساب الارتفاع على الموبايل */
    overflow: hidden;
    background: linear-gradient(135deg, #1a365d 0%, #2d3748 50%, #4a5568 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الشرائح داخل البانوراما */
.panorama-slider {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* prevent any horizontal spill from slide shadows or scaling */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    margin: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    filter: brightness(0.85) contrast(1.1) saturate(1.05);
}

.slide.active {
    opacity: 1;
    /* animation disabled on mobile via media query for performance */
    animation: formalSlideGlow 4s ease-in-out infinite alternate;
    filter: brightness(0.9) contrast(1.15) saturate(1.1);
}

@keyframes formalSlideGlow {
    0% {
        filter: brightness(0.9) contrast(1.15) saturate(1.1);
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }
    100% {
        filter: brightness(0.95) contrast(1.2) saturate(1.15);
        transform: scale(1.01);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    }
}

/* Professional overlay effect */
.panorama-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 1;
   
}






/* Slide Images: use local assets (CSP-friendly, no inline styles) */
.slide-1 { background-image: url('../images/pr.png'); }
.slide-2 { background-image: url('../images/c.jpg'); }
.slide-3 { background-image: url('../images/sahara.jpg'); }

/* Professional particle effect */
.panorama-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(218, 165, 32, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 224, 138, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(218, 165, 32, 0.05) 0%, transparent 50%);
    animation: none; /* تعطيل حركة الجسيمات لتجنب أي تأثير على عناصر مثبتة */
    pointer-events: none;
    z-index: 0;
}

/* الحركة معطلة */

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .panorama-container {
        height: 100svh; /* ملء شاشة الهاتف بالكامل عند الدخول */
    }
    .panorama-container::after { display: none; } /* تعطيل طبقة الجزيئات */
    .panorama-container::before { background: rgba(0,0,0,0.35); } /* تراكب أخف */
    .slide { transition: opacity 0.6s ease-in-out; box-shadow: none; }
    .slide.active { animation: none; }
    
  
    .slide {
        margin: 0;
        border-radius: 6px;
    }
 }


@media (max-width: 480px) {
    .panorama-container {
        height: 100svh; /* إبقاء الملء الكامل على أصغر الشاشات */
    }
    
    /* keep hero font sizes defined in icomos_sudan.css */
    
    .panorama-container::after { display: none; }
    .slide { margin: 0; border-radius: 4px; animation: none; }
   
}


.panorama-container {
    animation: formalFadeInUp 1.2s ease-out;
}

/* Professional slide entrance effect */
/* entrance animation applied only on desktop via JS to avoid jank on mobile */

@keyframes formalSlideEntrance {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}