/**
 * HERO CAROUSEL - FALLBACK STYLES
 * 
 * Graceful degradation for when JavaScript is disabled or fails
 * Ensures a single static hero image is displayed as fallback
 */

/* Fallback for no-JS or failed initialization */
.split-hero-visual:empty::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/slider-image-2438.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Fallback message for no-JS */
.split-hero-visual:empty::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, 
        rgba(15, 14, 13, 0.65) 0%,
        rgba(42, 38, 36, 0.55) 35%,
        rgba(93, 64, 55, 0.5) 70%,
        rgba(139, 115, 85, 0.4) 100%);
    z-index: 2;
}

/* Loading state */
.split-hero-visual.carousel-loading {
    position: relative;
}

.split-hero-visual.carousel-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        #F0EBE6 0%, 
        #E8E3DD 100%);
    z-index: 1;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.split-hero-visual.carousel-loading::after {
    content: 'جاري التحميل...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-secondary);
    font-family: 'Markazi Text', serif;
    font-size: 1.25rem;
    z-index: 2;
}

@keyframes skeletonPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Error state */
.split-hero-visual.carousel-error {
    position: relative;
    background: linear-gradient(135deg, 
        #F0EBE6 0%, 
        #E8E3DD 100%);
}

.split-hero-visual.carousel-error::after {
    content: 'خطأ في تحميل المعرض';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-secondary);
    font-family: 'Markazi Text', serif;
    font-size: 1.25rem;
    text-align: center;
}

/* Remove states when carousel is loaded */
.split-hero-visual:not(:empty) {
    background: none;
}

.split-hero-visual:not(:empty)::before,
.split-hero-visual:not(:empty)::after {
    display: none;
}