/**
 * UPC Logo Preloader Styles
 * Optimized for all screen sizes and resolutions
 * Centers the UPC logo and makes it smaller with smooth animation
 */

:root {
    /* Preloader Variables */
    --preloader-logo-size: 80px;
    --preloader-logo-size-mobile: 60px;
    --preloader-logo-size-large: 100px;
    --preloader-animation-duration: 1.5s;
    --preloader-bg-color: #ffffff;
    --preloader-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =================================================================
   UPC PRELOADER - CENTERED AND SMALLER LOGO
   ================================================================= */

.preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--preloader-bg-color) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
    transition: opacity 0.5s ease-out !important;
    opacity: 1 !important;
}

/* Preloader hidden states - high specificity to override any conflicts */
.preloader.hidden,
body .preloader.hidden,
html .preloader.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.preloader.removed,
body .preloader.removed,
html .preloader.removed {
    display: none !important;
    visibility: hidden !important;
}

/* JavaScript-controlled hiding */
.preloader[style*="display: none"],
body .preloader[style*="display: none"],
html .preloader[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
}

.preloader img {
    width: var(--preloader-logo-size) !important;
    height: auto !important;
    max-width: var(--preloader-logo-size) !important;
    animation: preloaderPulse var(--preloader-animation-duration) ease-in-out infinite !important;
    filter: drop-shadow(var(--preloader-shadow)) !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Preloader Animation - Smooth pulsing effect */
@keyframes preloaderPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

/* Alternative spinning animation */
@keyframes preloaderSpin {
    0% {
        transform: rotate(0deg) scale(0.95);
        opacity: 0.8;
    }
    25% {
        transform: rotate(90deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg) scale(1.05);
        opacity: 1;
    }
    75% {
        transform: rotate(270deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) scale(0.95);
        opacity: 0.8;
    }
}

/* Alternative fade-in-out animation */
@keyframes preloaderFade {
    0%, 100% {
        opacity: 0.6;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive preloader sizing */
@media screen and (max-width: 768px) {
    :root {
        --preloader-logo-size: var(--preloader-logo-size-mobile);
    }

    .preloader img {
        width: var(--preloader-logo-size-mobile) !important;
        max-width: var(--preloader-logo-size-mobile) !important;
    }
}

@media screen and (min-width: 1400px) {
    :root {
        --preloader-logo-size: var(--preloader-logo-size-large);
    }

    .preloader img {
        width: var(--preloader-logo-size-large) !important;
        max-width: var(--preloader-logo-size-large) !important;
    }
}

/* High DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    .preloader img {
        filter: drop-shadow(var(--preloader-shadow)) brightness(1.02) !important;
    }
}

/* Keep white background even in dark mode for consistency */
@media (prefers-color-scheme: dark) {
    :root {
        --preloader-bg-color: #ffffff;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .preloader img {
        animation: none !important;
        opacity: 0.9 !important;
        transform: scale(1) !important;
    }
}

/* Print styles - hide preloader */
@media print {
    .preloader {
        display: none !important;
    }
}

/* =================================================================
   ALTERNATIVE ANIMATION CLASSES (Uncomment to use)
   ================================================================= */

/* Spinning animation */
/*
.preloader.spin img {
    animation: preloaderSpin 2s linear infinite !important;
}
*/

/* Fade animation */
/*
.preloader.fade img {
    animation: preloaderFade var(--preloader-animation-duration) ease-in-out infinite !important;
}
*/

/* Faster animation */
/*
.preloader.fast img {
    animation-duration: 1s !important;
}
*/

/* Slower animation */
/*
.preloader.slow img {
    animation-duration: 2.5s !important;
}
*/