/* =========================================
   RESET
   ========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}


/* =========================================
   PAGINA HOME
   ========================================= */

body {
    background: #000;
}

.home {
    position: relative;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background-image: url("https://www.arcantia.it/wp-content/uploads/2026/02/Sfondo-home-Arcantia.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =========================================
   LOGO
   ========================================= */

.logo {
    position: absolute;

    top: 20%;
    left: 50%;

    transform: translate(-50%, -30%);

    display: block;

    width: min(65vw, 750px);
    height: auto;

    z-index: 2;

cursor: pointer;
}


/* =========================================
   BARRA DI NAVIGAZIONE
   ========================================= */

.home-menu {

    position: absolute;

    left: 0;
    bottom: 0;

width: 100%;
    max-width: none;

    display: flex;
    align-items: stretch;
    justify-content: center;

    padding: 7px;

    background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 211, 165, 0.15) 10%,
    rgba(232, 211, 165, 0.75) 25%,
    #e8d3a5 35%,
    #e8d3a5 65%,
    rgba(232, 211, 165, 0.75) 75%,
    rgba(232, 211, 165, 0.15) 90%,
    transparent 100%
);

    border: none;

    box-shadow:
        0 -3px 10px rgba(0, 0, 0, 0.35);

    z-index: 3;
}

.home-menu::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(107, 69, 40, 0.2) 10%,
        rgba(107, 69, 40, 0.7) 25%,
        #6b4528 35%,
        #6b4528 65%,
        rgba(107, 69, 40, 0.7) 75%,
        rgba(107, 69, 40, 0.2) 90%,
        transparent 100%
    );
}

/* =========================================
   SINGOLO ELEMENTO DEL MENU
   ========================================= */
.home-menu-links {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: max-content;
}

.home-menu-item {

    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: clamp(4px, 0.7vh, 8px) clamp(10px, 1.2vw, 18px);

    color: #3b2618;

    text-decoration: none;

    border-left: 1px solid rgba(107, 69, 40, 0.25);
    border-right: 1px solid rgba(107, 69, 40, 0.15);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Evita il bordo sulla prima voce */

.home-menu-item:first-child {
    border-left: none;
}


/* =========================================
   ICONE
   ========================================= */

.menu-icon {

    display: block;

    width: clamp(65px, 8.3vh, 100px);
    height: clamp(65px, 8.3vh, 100px);

    object-fit: contain;

    margin-bottom: 4px;
}


/* =========================================
   TESTO
   ========================================= */

.home-menu-item span {

    display: block;

    font-size: 0.82rem;
    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    text-shadow:
        1px 1px 1px rgba(255, 235, 190, 0.7);
}


/* =========================================
   HOVER
   ========================================= */

.home-menu-item:hover {
    background: rgba(107, 69, 40, 0.10);
    color: #6b4528;
}

/* =========================================
   SMARTPHONE
   ========================================= */

@media (max-width: 768px) {

    .home-menu {

        left: 0;
        bottom: 0;

        transform: none;

        width: 100%;
        max-width: none;

        border-left: none;
        border-right: none;
        border-bottom: none;

        border-radius: 0;

        padding: 5px;

        overflow-x: auto;
    }

.home-menu-links {
    justify-content: flex-start;
    margin: 0;
}
    .home-menu-item {
        width: 90px;
    }


    .menu-icon {

        width: 60px;
        height: 60px;

        margin-bottom: 3px;
    }


    .home-menu-item span {

        font-size: 0.7rem;

        white-space: normal;
    }


.logo {

    width: min(82vw, 750px);
}

 .corner-image {
        display: none;
    }

.message-window {

        width: calc(100vw - 30px);

        height: min(250px, 50vh);

        padding: 28px 25px 20px;
    }


    .message-window h2 {

        font-size: 1.1rem;

        margin-bottom: 12px;
    }


    .message-content {

        font-size: 0.82rem;

        line-height: 1.4;
    }

}

/* =========================================
   PERSONAGGI AGLI ANGOLI
   ========================================= */

.corner-image {
    position: fixed;
    bottom: 0;

    height: min(33vh, 300px);
    width: auto;

    z-index: 10;
    pointer-events: none;
}

.corner-left {
    left: 0;
}

.corner-right {
    right: 0;
}


/* =========================================
   PERGAMENA MESSAGGI
   ========================================= */

.message-scroll {
    position: absolute;

    left: 40%;
    bottom: 10%;

    transform: translateX(-50%);

    width: 93px;
    height: auto;

    padding: 0;
    margin: 0;

    border: none;
    background: transparent;

    cursor: pointer;

    z-index: 5;

    transition: transform 0.2s ease;
}

.message-scroll img {
    display: block;

    width: 100%;
    height: auto;
}


/* Effetto al passaggio del mouse */

.message-scroll:hover {
    transform: translateX(-50%) translateY(-4px);
}


/* =========================================
   BARRA DI NAVIGAZIONE
   ========================================= */

.home-menu {
    z-index: 10;
}

/* =========================================
   FINESTRA DEI MESSAGGI
   ========================================= */

.message-overlay {
    position: fixed;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.25);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 20;
}


/* Finestra aperta */

.message-overlay.is-open {
    opacity: 1;
    visibility: visible;
}


/* =========================================
   RIQUADRO
   ========================================= */

.message-window {

    position: relative;

    width: min(500px, calc(100vw - 30px));

    height: 250px;

    padding: 30px 35px 25px;

    background: #e8d3a5;

    border: 2px solid #6b4528;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45);

    color: #3b2618;

    transform: translateY(15px) scale(0.96);

    transition:
        transform 0.25s ease;
}


/* Animazione all'apertura */

.message-overlay.is-open .message-window {
    transform: translateY(0) scale(1);
}


/* =========================================
   TITOLO FINESTRA
   ========================================= */

.message-window h2 {

    margin: 0 0 15px;

    color: #6b4528;

    font-size: 1.25rem;

    text-align: center;

    font-weight: normal;

    text-shadow:
        1px 1px 1px rgba(255, 235, 190, 0.7);
}


/* =========================================
   CONTENUTO MESSAGGI
   ========================================= */

.message-content {

    height: calc(100% - 45px);

    overflow-y: auto;

    padding-right: 10px;

    color: #3b2618;

    font-size: 0.9rem;

    line-height: 1.45;

scrollbar-width: thin;
    scrollbar-color:
        rgba(107, 69, 40, 0.55)
        rgba(107, 69, 40, 0.12);
}


/* =========================================
   SINGOLO MESSAGGIO
   ========================================= */

.message-item {

    margin: 0 0 25px;
}


/* =========================================
   TITOLO DEL MESSAGGIO
   ========================================= */

.message-item h3 {

    margin: 0 0 3px;

    color: #6b4528;

    font-size: 1rem;

    line-height: 1.25;

    font-weight: bold;
}


/* =========================================
   DATA
   ========================================= */

.message-item time {

    display: block;

    margin: 0;

    color: #7d6045;

    font-size: 0.75rem;

    line-height: 1.2;
}


/* =========================================
   LINEA SEPARATRICE
   ========================================= */

.message-item time::after {

    content: "";

    display: block;

    width: 100%;

    height: 1px;

    margin-top: 7px;

    background: rgba(107, 69, 40, 0.45);
}


/* =========================================
   TESTO DEL MESSAGGIO
   ========================================= */

.message-item p {

    margin: 7px 0 0;

    color: #3b2618;

    font-size: 0.9rem;

    line-height: 1.45;
}


/* =========================================
   BARRA DI SCORRIMENTO
   ========================================= */

.message-content::-webkit-scrollbar {

    width: 8px;
}


.message-content::-webkit-scrollbar-track {

    background: rgba(107, 69, 40, 0.12);

    border-radius: 4px;
}


.message-content::-webkit-scrollbar-thumb {

    background: rgba(107, 69, 40, 0.55);

    border-radius: 4px;

    border: 1px solid rgba(232, 211, 165, 0.7);
}


.message-content::-webkit-scrollbar-thumb:hover {

    background: rgba(107, 69, 40, 0.75);
}

/* =========================================
   PULSANTE CHIUDI
   ========================================= */

.message-close {

    position: absolute;

    top: 6px;
    right: 10px;

    width: 28px;
    height: 28px;

    padding: 0;

    border: none;

    background: transparent;

    color: #6b4528;

    font-size: 1.8rem;

    line-height: 28px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}


.message-close:hover {

    transform: scale(1.15);

    color: #3b2618;
}

/* =========================================
   LINK IN ALTO A DESTRA
   ========================================= */

.home-top-links {
    position: fixed;
    top: 0;
    right: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: max-content;
    max-width: 100%;

    padding: 7px 12px;
    gap: 14px;

    background: #e8d3a5;
    border: 1px solid #6b4528;
    border-top: none;
    border-right: none;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);

    z-index: 30;
}

/* Aspetto comune a link e pulsante */

.home-top-links a,
.home-top-links button {
    display: block;

    padding: 2px 0;

    border: none;
    background: transparent;

    color: #3b2618;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.3;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition: color 0.2s ease;
}

/* Effetto al passaggio del mouse */

.home-top-links a:hover,
.home-top-links button:hover {
    color: #6b4528;
    text-decoration: underline;
}

/* =========================================
   LINK SUPERIORI - SCHERMI STRETTI
   ========================================= */

@media (max-width: 768px) {

    .home-top-links {
        gap: 9px;
        padding: 6px 8px;
    }

    .home-top-links a,
    .home-top-links button {
        font-size: 0.72rem;
    }
}