/**
 * Animated Favicon CSS Support
 * Provides fallback styles and enhanced favicon functionality
 */

/* Favicon animation keyframes for CSS-based animation fallback */
@keyframes favicon-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Enhanced favicon styles for different browsers */
link[rel="shortcut icon"],
link[rel="icon"] {
    transition: opacity 0.3s ease;
}

/* Favicon hover effect (for browsers that support it) */
link[rel="shortcut icon"]:hover,
link[rel="icon"]:hover {
    animation: favicon-pulse 1s infinite;
}

/* Preload video for faster favicon generation */
.favicon-video-preloader {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Loading state for favicon */
.favicon-loading {
    position: relative;
}

.favicon-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    animation: favicon-shimmer 2s infinite;
}

@keyframes favicon-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Responsive favicon sizes */
@media (max-width: 768px) {
    /* Mobile optimizations for favicon */
    .animated-favicon {
        animation-duration: 2s; /* Slower animation on mobile to save battery */
    }
}

/* High DPI display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Enhanced favicon for retina displays */
    link[rel="shortcut icon"],
    link[rel="icon"] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode favicon adjustments */
@media (prefers-color-scheme: dark) {
    .favicon-container {
        filter: brightness(1.1) contrast(1.1);
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .animated-favicon,
    link[rel="shortcut icon"],
    link[rel="icon"] {
        animation: none !important;
        transition: none !important;
    }
}

/* Print styles - hide animated elements */
@media print {
    .favicon-video-preloader,
    .animated-favicon {
        display: none !important;
    }
}