/* Side-by-Side Animation Container */
.side-anim-wrapper {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin: 20px auto;
    overflow: hidden;
}

/* تصویر پس‌زمینه یخچال */
.side-bg {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* تصویر دیسپلی (لایه رویی) */
.side-display {
    position: absolute;
    top: 38%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 19%;
    height: auto;
    z-index: 2;
    pointer-events: none;
    
    /* حالت پیش‌فرض: خاموش */
    opacity: 0;
    filter: brightness(0) contrast(0);
    
    /* اجرای همزمان دو انیمیشن: 
       1. sideFlashInitial: سیکل سریع اولیه (2s) بدون تکرار
       2. sideDisplayFlash: سیکل اصلی (5s) با تاخیر 2 ثانیه‌ای برای ادامه دادن */
    animation: 
        sideFlashInitial 2s ease-in-out forwards,
        sideDisplayFlash 5s ease-in-out infinite 2s;
}

/* Keyframes - سیکل سریع اولیه (برای دیده شدن فوری) */
@keyframes sideFlashInitial {
    0% {
        opacity: 0;
        filter: brightness(0) contrast(0);
    }
    15% {
        /* روشن شدن سریع و پرنور */
        opacity: 1;
        filter: brightness(1.6) contrast(1.3) drop-shadow(0 0 12px rgba(200, 230, 255, 0.9));
    }
    70% {
        /* روشن ماندن کوتاه */
        opacity: 1;
        filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 15px rgba(180, 220, 255, 0.9));
    }
    100% {
        /* خاموش شدن کامل قبل از شروع سیکل بعدی */
        opacity: 0;
        filter: brightness(0) contrast(0);
    }
}

/* Keyframes - سیکل اصلی و آرام (تکرار شونده) */
@keyframes sideDisplayFlash {
    0%, 10% {
        opacity: 0;
        filter: brightness(0) contrast(0);
    }
    12% {
        opacity: 0.8;
        filter: brightness(1.5) contrast(1.2) drop-shadow(0 0 10px rgba(200, 230, 255, 0.8));
    }
    15%, 85% {
        opacity: 1;
        filter: brightness(1.1) contrast(1.1) 
               drop-shadow(0 0 15px rgba(180, 220, 255, 0.9)) 
               drop-shadow(0 0 30px rgba(100, 180, 255, 0.6));
    }
    88% {
        opacity: 0.2;
        filter: brightness(0.5);
    }
    90%, 100% {
        opacity: 0;
        filter: brightness(0);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .side-display { 
        animation: none !important; 
        opacity: 1 !important; 
        filter: brightness(1.1) drop-shadow(0 0 10px rgba(180, 220, 255, 0.5)) !important;
    }
}