/* Water Dispenser Animation Container */
.disp-anim-wrapper {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin: 20px auto;
}

.disp-bg {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* کانتینر حباب‌ها */
.disp-bubbles-container {
    position: absolute;
    top: 6%;
    left: 18%;
    width: 30%;
    height: 25%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

/* حباب‌ها - با درخشش فلزی و لبه‌های تیز */
.disp-bubble {
    position: absolute;
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 1;
    /* ترکیب درخشش فلزی با هاله‌های قبلی */
    filter: brightness(1.4) contrast(1.3) 
            drop-shadow(0 0 2px rgba(0, 20, 60, 0.8)) /* هاله تیره برای عمق */
            drop-shadow(0 0 5px rgba(255,255,255,0.95)) /* هاله سفید داخلی قوی */
            drop-shadow(0 0 10px rgba(200,230,255,0.8)); /* هاله آبی بیرونی */
    will-change: transform, filter, opacity;
}

/* 7 حباب با ریتم قبلی + انیمیشن درخشش فلزی */
.disp-bubble-1 { left: 45%; animation: dispFunnelLeft 3.5s ease-in-out infinite 0s, dispGlow 1.2s ease-in-out infinite alternate; }
.disp-bubble-2 { left: 50%; animation: dispFunnelCenter 4s ease-in-out infinite 0.5s, dispGlow 1.4s ease-in-out infinite alternate; }
.disp-bubble-3 { left: 55%; animation: dispFunnelRight 3.8s ease-in-out infinite 1s, dispGlow 1.1s ease-in-out infinite alternate; }
.disp-bubble-4 { left: 48%; width: 20px; height: 20px; animation: dispFunnelLeft 4.2s ease-in-out infinite 1.5s, dispGlow 1.5s ease-in-out infinite alternate; }
.disp-bubble-5 { left: 52%; width: 20px; height: 20px; animation: dispFunnelRight 3.9s ease-in-out infinite 2s, dispGlow 1.3s ease-in-out infinite alternate; }
.disp-bubble-6 { left: 50%; width: 15px; height: 15px; animation: dispFunnelCenter 4.5s ease-in-out infinite 0.8s, dispGlow 1.6s ease-in-out infinite alternate; }
.disp-bubble-7 { left: 47%; width: 17px; height: 17px; animation: dispFunnelLeft 4.1s ease-in-out infinite 1.8s, dispGlow 1.25s ease-in-out infinite alternate; }

/* حرکت قیفی - چپ */
@keyframes dispFunnelLeft {
    0%   { transform: translateY(85px) translateX(0) scale(0.7); opacity: 0; }
    20%  { opacity: 1; }
    50%  { transform: translateY(0) translateX(-8px) scale(1); opacity: 1; }
    100% { transform: translateY(-40px) translateX(-15px) scale(0.8); opacity: 0; }
}

/* حرکت قیفی - وسط */
@keyframes dispFunnelCenter {
    0%   { transform: translateY(85px) translateX(0) scale(0.7); opacity: 0; }
    20%  { opacity: 1; }
    50%  { transform: translateY(0) translateX(0) scale(1.1); opacity: 1; }
    100% { transform: translateY(-40px) translateX(0) scale(0.8); opacity: 0; }
}

/* حرکت قیفی - راست */
@keyframes dispFunnelRight {
    0%   { transform: translateY(85px) translateX(0) scale(0.7); opacity: 0; }
    20%  { opacity: 1; }
    50%  { transform: translateY(0) translateX(8px) scale(1); opacity: 1; }
    100% { transform: translateY(-40px) translateX(15px) scale(0.8); opacity: 0; }
}

/* درخشش متناوب فلزی (تپش براقیت) */
@keyframes dispGlow {
    0%   { 
        filter: brightness(1.3) contrast(1.2) 
               drop-shadow(0 0 2px rgba(0, 20, 60, 0.6)) 
               drop-shadow(0 0 4px rgba(255,255,255,0.85)); 
    }
    100% { 
        filter: brightness(1.8) contrast(1.5) 
               drop-shadow(0 0 3px rgba(0, 20, 60, 0.9)) 
               drop-shadow(0 0 8px rgba(255,255,255,1)) 
               drop-shadow(0 0 15px rgba(200,230,255,1)); 
    }
}

@media (prefers-reduced-motion: reduce) {
    .disp-bubble { animation: none !important; opacity: 0.9 !important; }
}