/* ============================================
   👉 IMPOSTAZIONI RAPIDE — modifica solo qui
   ============================================ */
:root {
    --loader-bg-color: #1e1e1e;   /* colore di sfondo del loader */
    --loader-duration: 1s;        /* quanto resta visibile prima di sparire */
    --loader-fade: 0.35s;         /* durata della dissolvenza in uscita */
    --logo-size: 200px;            /* dimensione del logo */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #fafafa;
    color: #222;
}

/* Overlay a schermo intero */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--loader-bg-color);

    /* Sparisce da sola dopo --loader-duration, senza bisogno di JS.
       animation-delay = quanto resta visibile prima di iniziare la dissolvenza
       animation-duration (nel keyframe sotto) = durata della dissolvenza */
    animation: loader-fade-out var(--loader-fade) ease forwards;
    animation-delay: var(--loader-duration);
}

@keyframes loader-fade-out {
    from {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

#page-loader .logo-wrap {
    max-width: var(--logo-size);
    max-height: var(--logo-size);
    animation: pulse 1.1s ease-in-out infinite;
}

/* Stili "blindati": non ereditano width/opacity/display da classi
   del sito (es. plugin di lazyload, script che impostano width via JS).
   object-fit: contain mantiene le proporzioni originali del logo,
   anche se è rettangolare e non quadrato. */
#page-loader img,
#page-loader svg {
    width: auto !important;
    height: auto !important;
    max-width: var(--logo-size) !important;
    max-height: var(--logo-size) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.9); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    #page-loader .logo-wrap { animation: none; }
}