/* 
=====================================
🎨 RSB & Kollegen Login Logo Enhancements
=====================================
خصائص متقدمة للشعار في صفحة تسجيل الدخول
*/

/* Logo Animation Keyframes */
@keyframes logoGlow {
    0%, 100% { 
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 255, 255, 0.4),
            inset 0 2px 4px rgba(255, 255, 255, 0.9);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(212, 175, 55, 0.6),
            inset 0 2px 4px rgba(255, 255, 255, 0.9);
    }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(0.5deg); }
    50% { transform: translateY(-4px) rotate(0deg); }
    75% { transform: translateY(-2px) rotate(-0.5deg); }
}

@keyframes textShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Enhanced Logo Hover Effects */
.company-logo:hover {
    animation: logoFloat 2s ease-in-out infinite;
}

.company-logo:active {
    transform: scale(0.98) translateY(1px);
    transition: transform 0.1s ease-out;
}

/* Premium Logo Border Effect */
.company-logo.premium-effect {
    background: radial-gradient(circle at center, #ffffff 0%, #f8f9fa 100%);
    border: 4px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.company-logo.premium-effect::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #B8860B, #D4AF37);
    border-radius: 50%;
    z-index: -1;
    animation: logoGlow 3s ease-in-out infinite;
}

/* Text Effects */
.company-name.premium-text {
    background: linear-gradient(
        45deg,
        var(--elegant-black) 0%,
        var(--rich-gold) 25%,
        var(--elegant-black) 50%,
        var(--rich-gold) 75%,
        var(--elegant-black) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 3s linear infinite;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .company-logo {
        animation: logoFloat 3s ease-in-out infinite;
    }
    
    .company-logo:hover {
        animation: logoFloat 1.5s ease-in-out infinite;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .company-logo,
    .company-logo::before,
    .company-logo::after,
    .logo-image {
        animation: none !important;
        transition: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .company-logo {
        border: 4px solid #000000;
        background: #ffffff;
    }
    
    .logo-image {
        filter: contrast(2) brightness(1.2);
    }
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
    .company-logo {
        background: #ffffff;
        border-color: rgba(212, 175, 55, 0.8);
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.6),
            0 0 30px rgba(212, 175, 55, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.9);
    }
}

/* Print Styles */
@media print {
    .company-logo {
        background: white !important;
        border: 2px solid #000000 !important;
        box-shadow: none !important;
    }
    
    .company-logo::before,
    .company-logo::after {
        display: none !important;
    }
}

/* Logo Quality Enhancements */
.logo-image.high-quality {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter: 
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2))
        brightness(1.2)
        contrast(1.3)
        saturate(1.2)
        unsharp-mask(amount 120% radius 1px threshold 3);
}

/* Ultra Clear Logo for Login */
.ultra-clear-logo {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter: 
        brightness(1.25)
        contrast(1.35)
        saturate(1.25)
        sharpness(2);
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Fallback for Browsers without WebP Support */
.logo-image {
    background-image: url('../img/logo.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Loading State */
.company-logo.loading {
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0, #f0f0f0);
    background-size: 200% 100%;
    animation: logoLoading 1.5s ease-in-out infinite;
}

@keyframes logoLoading {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Success State Animation */
.company-logo.success {
    animation: successPulse 0.6s ease-in-out;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}