/* =====================================================
   VESTIGIA — STYLE SYSTEM
   Layout contemplativo, non invasivo
===================================================== */

/* =========================
   VARIABILI GLOBALI
========================= */
:root {
    --bg: #272424;          /* Sfondo assoluto */
    --gold: #D4AF37;        /* Oro sacrale */
    --text: #eaeaea;        /* Testo secondario */
}

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

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Courier New", monospace;
    -webkit-font-smoothing: antialiased;
}

/* =========================
   HEADER
   Logo + Manifesto
========================= */

.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Respiro superiore minimo */
    padding-top: 32px;
}

/* LOGO
   - Larghezza controllata in HTML/CSS
   - Altezza eventualmente forzata da te (500px)
   - Qui NON imponiamo spazi verticali inutili */
.logo {
    width: 400px;
    max-width: 95vw;
    height: auto;
    display: block;
}

/* MANIFESTO BUTTON
   - Spazio fisso dal logo: 240px
   - NON più 480px
*/
.manifesto {
    margin-top: 20px; /* <<< DISTANZA DAL LOGO */
    width: 180px;
    cursor: pointer;

    transition:
        transform 0.6s ease,
        box-shadow 0.6s ease;
}

/* Hover elegante, non giocattolo */
.manifesto:hover {
    transform: translateY(-6px) scale(1.04);
    /* box-shadow: 0 18px 40px rgba(0,0,0,0.6);*/
}

/* =========================
   VIEWER OPERA
========================= */

.viewer {
    margin-top: 40px; /* <<< DISTANZA DAL MANIFESTO */

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

    /* Permette alle immagini verticali
       di scendere sopra i metadata */
    margin-bottom: 100px;
}

/* Contenitore dell'opera */
.artwork {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 80vw;
    max-height: 75vh;

    animation: fade 1.2s ease;
}

/* Immagine vera e propria */
.artwork img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;

    /* box-shadow: 0 40px 90px rgba(0,0,0,0.7);*/
}

/* =========================
   NAVIGAZIONE LATERALE
========================= */

.nav {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);

    font-size: 80px;
    color: var(--gold);
    text-decoration: none;

    opacity: 0.35;
    user-select: none;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.nav:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
}

.nav.left {
    left: 50px;
}

.nav.right {
    right: 50px;
}

/* =========================
   METADATA
========================= */

.metadata {
    margin-top: 20px; /* <<< DISTANZA DAL MANIFESTO */
    max-width: 400px;
    margin: 0 auto 40px;

    /* Non troppo centrato,
       lascia respirare il contenuto */
    /* padding-left: 2px;*/
}

/* Riga metadata */
.row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

/* PNG label */
.row img {
    width: 150px;
    height: auto;
}

/* Testo */
.row span {
    font-size: 16px;
    opacity: 0.9;
    white-space: nowrap;
}

/* =========================
   ANIMAZIONI
========================= */

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .logo {
        width: 90vw;
    }

    .manifesto {
        margin-top: 140px; /* proporzione mobile */
        width: 140px;
    }

    .viewer {
        margin-bottom: 60px;
    }

    .artwork {
        max-width: 90vw;
        max-height: 65vh;
    }

    .nav {
        font-size: 48px;
    }

    .metadata {
        padding: 20px;
    }

    .row img {
        width: 160px;
    }

    .row span {
        font-size: 15px;
    }
}