/* ======================================================
   VILLA MUSONE FRAMEWORK
   HEADER v1.2
====================================================== */


/* -------------------------------------------------- */
/* HEADER PRINCIPALE */
/* -------------------------------------------------- */

.vm-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100px;
    z-index: 9999;

background: rgba(8, 10, 14, .24);

backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);

    transition:
        min-height .65s cubic-bezier(.22, 1, .36, 1),
        background .45s ease,
        backdrop-filter .45s ease,
        box-shadow .45s ease;

    animation: vmHeaderEntrance .7s cubic-bezier(.22, 1, .36, 1) forwards;
}


/* -------------------------------------------------- */
/* HEADER DOPO LO SCROLL */
/* -------------------------------------------------- */

.vm-header.scrolled {
    background: rgba(8, 10, 14, .82);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}


/* -------------------------------------------------- */
/* CONTENITORI INTERNI */
/* -------------------------------------------------- */

.vm-header-left,
.vm-header-center,
.vm-header-right {
    transition:
        min-height .65s cubic-bezier(.22, 1, .36, 1),
        padding .65s cubic-bezier(.22, 1, .36, 1);
}


/* -------------------------------------------------- */
/* LOGO */
/* -------------------------------------------------- */

.vm-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-logo img {
    display: block;
    width: auto;
    height: 100px;
    max-width: none;

    transform: scale(1);
    transform-origin: center center;

    will-change: height, transform;

    transition:
        height .65s cubic-bezier(.175, .885, .32, 1.08),
        transform .65s cubic-bezier(.175, .885, .32, 1.08),
        filter .45s ease;
}

.vm-header.scrolled .vm-logo img {
    height: 80px !important;
    transform: scale(.985);
}


/* -------------------------------------------------- */
/* HAMBURGER */
/* -------------------------------------------------- */

.vm-toggle {
    cursor: pointer;
    transform: scale(1);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
}

.vm-toggle:hover {
    transform: scale(1.08);
}

.vm-toggle:active {
    transform: scale(.96);
}


/* -------------------------------------------------- */
/* ICONE SOCIAL */
/* -------------------------------------------------- */

.vm-social a {
    transform: translateY(0);

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
}

.vm-social a:hover {
    transform: translateY(-3px);
    opacity: .78;
}


/* -------------------------------------------------- */
/* ANIMAZIONE INIZIALE HEADER */
/* -------------------------------------------------- */

@keyframes vmHeaderEntrance {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -------------------------------------------------- */
/* TABLET */
/* -------------------------------------------------- */

@media screen and (max-width: 1024px) {

    .vm-header {
        min-height: 90px;
    }

    .vm-header.scrolled {
        min-height: 74px;
    }

    .vm-logo img {
        height: 90px;
    }

    .vm-header.scrolled .vm-logo img {
        height: 72px !important;
    }
}


/* -------------------------------------------------- */
/* MOBILE */
/* -------------------------------------------------- */

@media screen and (max-width: 767px) {

    .vm-header {
        min-height: 78px;
    }

    .vm-header.scrolled {
        min-height: 66px;
    }

    .vm-logo img {
        height: 76px;
    }

    .vm-header.scrolled .vm-logo img {
        height: 62px !important;
    }

    .vm-toggle:hover {
        transform: none;
    }

    .vm-social a:hover {
        transform: none;
        opacity: 1;
    }
}


/* -------------------------------------------------- */
/* ACCESSIBILITÀ: RIDUZIONE ANIMAZIONI */
/* -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .vm-header,
    .vm-header-left,
    .vm-header-center,
    .vm-header-right,
    .vm-logo img,
    .vm-toggle,
    .vm-social a {
        animation: none !important;
        transition: none !important;
    }
}