/* =========================================================
   CINGILAPAI — BRAND INTEGRATION v0.1.2
   ========================================================= */


/* Il colore coincide con il fondo del master visivo */
.site-header {
    background: #041911;
}


/* Area del logo */
.brand {
    display: inline-flex;
    align-items: center;

    overflow: visible;

    flex: 0 0 auto;
}


/*
 * Il master SVG contiene sul margine destro
 * una piccola porzione della linea divisoria
 * della tavola originale.
 *
 * La eliminiamo VISIVAMENTE senza modificare
 * il master archiviato.
 */
.brand-logo {
    display: block;

    width: 285px;
    height: auto;

    max-width: none;

    clip-path: none;

    margin-right: 0;
}


/* Header leggermente più importante */
.header-inner {
    min-height: 104px;
}


/* Desktop medio */
@media (max-width: 1100px) {

    .brand-logo {
        width: 255px;
        margin-right: 0;
    }

    .main-nav {
        gap: 25px;
    }

}


/* Tablet */
@media (max-width: 900px) {

    .header-inner {
        min-height: 82px;
    }

    .brand-logo {
        width: 225px;
        margin-right: 0;
    }

}


/* Smartphone */
@media (max-width: 560px) {

    .brand-logo {
        width: 190px;
        margin-right: 0;
    }

}


/* CINGILAPAI — OFFICIAL HEADER SHIMMER v1 */

.brand {
    position: relative;
    isolation: isolate;
}

.brand-logo {
    position: relative;
    z-index: 1;

    animation:
        cingilapai-logo-intro
        2300ms
        cubic-bezier(.2,.7,.2,1)
        both;
}


/*
 * Scia luminosa:
 * il PNG viene utilizzato come maschera,
 * quindi la luce appare solo sul logo
 * e non sul rettangolo circostante.
 */
.brand::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 40%,
            rgba(255,220,130,.08) 45%,
            rgba(255,248,210,.92) 50%,
            rgba(255,205,80,.22) 55%,
            transparent 60%,
            transparent 100%
        );

    background-size:
        260% 100%;

    background-position:
        150% 50%;

    -webkit-mask-image:
        url("/assets/brand/cingilapai-logo-header.png?v=20260809-brand1");

    mask-image:
        url("/assets/brand/cingilapai-logo-header.png?v=20260809-brand1");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    opacity: 0;

    animation:
        cingilapai-logo-shimmer
        20s
        linear
        2350ms
        infinite;

    will-change:
        background-position,
        opacity;
}


/* Entrata iniziale del logo */
@keyframes cingilapai-logo-intro {

    0% {
        opacity: .72;

        transform:
            translateY(-2px)
            scale(.985);

        filter:
            brightness(.82)
            saturate(.95)
            drop-shadow(
                0 0 0
                rgba(247,191,70,0)
            );
    }

    46% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1.012);

        filter:
            brightness(1.30)
            saturate(1.08)
            drop-shadow(
                0 0 11px
                rgba(255,235,165,.82)
            )
            drop-shadow(
                0 0 22px
                rgba(216,166,77,.42)
            );
    }

    60% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1.012);

        filter:
            brightness(1.27)
            saturate(1.07)
            drop-shadow(
                0 0 11px
                rgba(255,235,165,.72)
            )
            drop-shadow(
                0 0 20px
                rgba(216,166,77,.35)
            );
    }

    82% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1.004);

        filter:
            brightness(1.10)
            saturate(1.02)
            drop-shadow(
                0 0 8px
                rgba(247,191,70,.30)
            );
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1)
            saturate(1)
            drop-shadow(
                0 0 0
                rgba(247,191,70,0)
            );
    }
}


/*
 * Ciclo totale: 20 secondi.
 * La scia è visibile soltanto
 * per circa 1,8 secondi.
 */
@keyframes cingilapai-logo-shimmer {

    0%,
    1% {
        background-position:
            150% 50%;

        opacity: 0;
    }

    2% {
        opacity: .9;
    }

    11% {
        background-position:
            -50% 50%;

        opacity: .9;
    }

    12%,
    100% {
        background-position:
            -50% 50%;

        opacity: 0;
    }
}


/* Accessibilità */
@media (prefers-reduced-motion: reduce) {

    .brand-logo {
        animation: none !important;
    }

    .brand::after {
        display: none;
        animation: none !important;
    }

}