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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


/* =========================================================
   PAGE
   ========================================================= */

html,
body {

    width: 100%;
    height: 100%;

}


body {

    overflow: hidden;

    background: #080807;

}


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

#home {

    position: relative;

    width: 100vw;
    height: 100vh;

    width: 100dvw;
    height: 100dvh;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(
            ellipse 85% 75% at 50% 46%,
            #27251f 0%,
            #1d1c18 28%,
            #12120f 58%,
            #080807 100%
        );

}


/* =========================================================
   ATMOSPHERIC LIGHT
   ========================================================= */

#home::before {

    content: "";

    position: absolute;

    inset: -15%;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse 55% 45% at 50% 43%,
            rgba(170, 158, 125, 0.075) 0%,
            rgba(130, 122, 101, 0.035) 35%,
            transparent 72%
        );

    filter: blur(40px);

    z-index: 0;

}


/* =========================================================
   VIGNETTE
   ========================================================= */

#home::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse 85% 80% at center,
            transparent 48%,
            rgba(0, 0, 0, 0.18) 72%,
            rgba(0, 0, 0, 0.48) 100%
        );

    z-index: 20;

}


/* =========================================================
   MAP CONTAINER
   ========================================================= */

.map-container {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

    z-index: 2;

    perspective: 1800px;

}


/* =========================================================
   ZOOM LAYER
   ========================================================= */

.map-zoom-layer {

    position: relative;

    flex-shrink: 0;

    width: max-content;
    height: max-content;

    transform-origin: center center;

    transform:
        scale(1);

    will-change: transform;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}


/* =========================================================
   MAP STAGE
   ========================================================= */

.map-stage {

    position: relative;

    display: block;

    flex-shrink: 0;

    width: max-content;
    height: max-content;

    transform:
        translate3d(0, 0, 0);

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    will-change: transform, opacity;

}


/* =========================================================
   MAP PICTURE
   ========================================================= */

.map-picture {

    position: relative;

    display: block;

    width: max-content;
    height: max-content;

}


/* =========================================================
   MAP IMAGE
   ========================================================= */

.map-image {

    display: block;

    width: auto;
    height: auto;

    max-width: 100vw;
    max-width: 100dvw;

    max-height: 100vh;
    max-height: 100dvh;

    object-fit: contain;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}


/* =========================================================
   ROUTE SVG
   ========================================================= */

.route-svg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 4;

    overflow: visible;

}


/* =========================================================
   TRATTEGGIO
   ========================================================= */

.route-path-black,
.route-path-red {

    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray:
        0.55 1.15;

}


/* =========================================================
   PERCORSO NERO
   ========================================================= */

.route-path-black {

    stroke: #050505;

    stroke-width: 0.22;

    opacity: 0.95;

}


/* =========================================================
   PERCORSO ROSSO
   ========================================================= */

.route-path-red {

    stroke: #c92820;

    stroke-width: 0.30;

    opacity: 1;

    visibility: hidden;

}


/* =========================================================
   PUNTI
   ========================================================= */

.route-points {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 10;

}


/* =========================================================
   PUNTO BASE
   =========================================================

   I punti restano presenti e mantengono
   tutte le coordinate responsive,
   ma sono completamente invisibili.
   ========================================================= */

.route-point {

    position: absolute;

    width: 18px;
    height: 18px;

    display: block;

    border-radius: 50%;

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

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    box-shadow: none;

}


/* =========================================================
   COLORI PUNTI
   ========================================================= */

.route-start {

    background: #00ff66;

}


.route-node {

    background: #00aaff;

}


.route-p1s1,
.route-p1s2,
.route-p1s3,
.route-p1s4 {

    background: #ff3030;

}


.route-p2s1,
.route-p2s2,
.route-p2s3,
.route-p2s4 {

    background: #ff00ff;

}


/* =========================================================
   =========================================================
   GEOMETRIA RESPONSIVE
   =========================================================
   ========================================================= */


/* =========================================================
   GEOMETRIA DEFAULT
   DESKTOP
   ========================================================= */

:root {

    /* START */

    --start-x: 21%;
    --start-y: 37%;


    /* SNODO */

    --node-x: 39%;
    --node-y: 40%;


    /* PERCORSO 1 */

    --p1s1-x: 43%;
    --p1s1-y: 51%;

    --p1s2-x: 50%;
    --p1s2-y: 70%;

    --p1s3-x: 59.5%;
    --p1s3-y: 64%;

    --p1s4-x: 60%;
    --p1s4-y: 53%;


    /* PERCORSO 2 */

    --p2s1-x: 41%;
    --p2s1-y: 36%;

    --p2s2-x: 49%;
    --p2s2-y: 35%;

    --p2s3-x: 55%;
    --p2s3-y: 41%;

    --p2s4-x: 60%;
    --p2s4-y: 54%;

}


/* =========================================================
   APPLICAZIONE COORDINATE
   ========================================================= */

.route-start {

    left: var(--start-x);
    top: var(--start-y);

}


.route-node {

    left: var(--node-x);
    top: var(--node-y);

}


.route-p1s1 {

    left: var(--p1s1-x);
    top: var(--p1s1-y);

}


.route-p1s2 {

    left: var(--p1s2-x);
    top: var(--p1s2-y);

}


.route-p1s3 {

    left: var(--p1s3-x);
    top: var(--p1s3-y);

}


.route-p1s4 {

    left: var(--p1s4-x);
    top: var(--p1s4-y);

}


.route-p2s1 {

    left: var(--p2s1-x);
    top: var(--p2s1-y);

}


.route-p2s2 {

    left: var(--p2s2-x);
    top: var(--p2s2-y);

}


.route-p2s3 {

    left: var(--p2s3-x);
    top: var(--p2s3-y);

}


.route-p2s4 {

    left: var(--p2s4-x);
    top: var(--p2s4-y);

}


/* =========================================================
   ICONS
   ========================================================= */

.map-icons {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 5;

    pointer-events: none;

}


/* =========================================================
   MAP ICON
   ========================================================= */

.map-icon {

    position: absolute;

    display: flex;

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

    width: 8%;

    aspect-ratio: 1;

    border: none;

    background: transparent;

    padding: 0;

    cursor: pointer;

    pointer-events: auto;

    transform:
        translate3d(-50%, -50%, 0);

    filter:

        drop-shadow(
            0 0px 5px
            rgba(0, 0, 0, 0.50)
        );

    transition:

        transform 0.25s ease,
        filter 0.25s ease;

}


.map-icon img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;

}


.map-icon:hover {

    transform:

        translate3d(-50%, -50%, 0)
        scale(1.12);

    filter:

        drop-shadow(
            0 12px 20px
            rgba(0, 0, 0, 0.60)
        );

}


/* =========================================================
   EXIT ANIMATION
   ========================================================= */

.map-stage.is-exiting {

    animation:

        mapExit
        850ms
        cubic-bezier(
            0.65,
            0,
            0.25,
            1
        )
        forwards;

}


@keyframes mapExit {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            );

        opacity: 1;

    }


    35% {

        transform:
            translate3d(
                -4vw,
                -1vh,
                80px
            );

        opacity: 1;

    }


    100% {

        transform:
            translate3d(
                -115vw,
                -8vh,
                220px
            );

        opacity: 0;

    }

}


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

@media (max-width: 767px) {

    #home {

        background:

            radial-gradient(
                ellipse 110% 70% at 50% 45%,
                #25231e 0%,
                #1b1a16 30%,
                #11110e 62%,
                #080807 100%
            );

    }


    /* -----------------------------------------
       GEOMETRIA PUNTI
       ----------------------------------------- */

    :root {

        --start-x: 24%;
        --start-y: 24%;

        --node-x: 18%;
        --node-y: 43%;

        --p1s1-x: 37%;
        --p1s1-y: 50%;

        --p1s2-x: 50%;
        --p1s2-y: 61%;

        --p1s3-x: 64%;
        --p1s3-y: 58%;

        --p1s4-x: 67%;
        --p1s4-y: 53%;

        --p2s1-x: 34%;
        --p2s1-y: 41%;

        --p2s2-x: 46%;
        --p2s2-y: 41%;

        --p2s3-x: 58%;
        --p2s3-y: 45%;

        --p2s4-x: 66%;
        --p2s4-y: 49%;

    }


    /* -----------------------------------------
       ICONS
       ----------------------------------------- */

    .icon-music {

        left: 64%;
        top: 60%;

        width: 17%;

    }


    .icon-portfolio {

        left: 48%;
        top: 39%;

        width: 22%;

    }


    .icon-about {

        left: 51%;
        top: 67%;

        width: 25%;

    }


    .icon-logbook {

        left: 26%;
        top: 51%;

        width: 28%;

    }


    .icon-oldclients {

        left: 31%;
        top: 35%;

        width: 16%;

    }


    .icon-personalproject {

        left: 73%;
        top: 51%;

        width: 28%;

    }


    .icon-shop {

        left: 68%;
        top: 42%;

        width: 27%;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    #home {

        background:

            radial-gradient(
                ellipse 95% 75% at 50% 46%,
                #27251f 0%,
                #1c1b17 30%,
                #12120f 60%,
                #080807 100%
            );

    }


    /* -----------------------------------------
       GEOMETRIA PUNTI
       ----------------------------------------- */

    :root {

        --start-x: 23%;
        --start-y: 23%;

        --node-x: 23%;
        --node-y: 44%;

        --p1s1-x: 38%;
        --p1s1-y: 54%;

        --p1s2-x: 50%;
        --p1s2-y: 70%;

        --p1s3-x: 67%;
        --p1s3-y: 65%;

        --p1s4-x: 65%;
        --p1s4-y: 57%;

        --p2s1-x: 37%;
        --p2s1-y: 42%;

        --p2s2-x: 49%;
        --p2s2-y: 42%;

        --p2s3-x: 59%;
        --p2s3-y: 47%;

        --p2s4-x: 63%;
        --p2s4-y: 53%;

    }


    /* -----------------------------------------
       ICONS
       ----------------------------------------- */

    .icon-music {

        left: 66%;
        top: 67%;

        width: 20%;

    }


    .icon-portfolio {

        left: 51%;
        top: 38%;

        width: 24%;

    }


    .icon-about {

        left: 49%;
        top: 76%;

        width: 24%;

    }


    .icon-logbook {

        left: 26%;
        top: 56%;

        width: 30%;

    }


    .icon-oldclients {

        left: 33%;
        top: 34%;

        width: 18%;

    }


    .icon-personalproject {

        left: 71%;
        top: 55%;

        width: 30%;

    }


    .icon-shop {

        left: 68%;
        top: 42%;

        width: 30%;

    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1919px) {

    #home {

        background:

            radial-gradient(
                ellipse 85% 75% at 50% 46%,
                #29271f 0%,
                #1e1d18 30%,
                #12120f 60%,
                #080807 100%
            );

    }


    /* -----------------------------------------
       GEOMETRIA PUNTI
       DESKTOP
       ----------------------------------------- */

    :root {

        --start-x: 21%;
        --start-y: 37%;

        --node-x: 39%;
        --node-y: 40%;

        --p1s1-x: 43%;
        --p1s1-y: 51%;

        --p1s2-x: 50%;
        --p1s2-y: 70%;

        --p1s3-x: 59.5%;
        --p1s3-y: 64%;

        --p1s4-x: 60%;
        --p1s4-y: 53%;

        --p2s1-x: 41%;
        --p2s1-y: 36%;

        --p2s2-x: 49%;
        --p2s2-y: 35%;

        --p2s3-x: 55%;
        --p2s3-y: 41%;

        --p2s4-x: 60%;
        --p2s4-y: 54%;

    }


    /* -----------------------------------------
       ICONS
       ----------------------------------------- */

    .icon-music {

        left: 59%;
        top: 67%;

        width: 12%;

    }


    .icon-portfolio {

        left: 50%;
        top: 30%;

        width: 12%;

    }


    .icon-about {

        left: 50%;
        top: 78%;

        width: 13%;

    }


    .icon-logbook {

        left: 37%;
        top: 53%;

        width: 15%;

    }


    .icon-oldclients {

        left: 40%;
        top: 25%;

        width: 10%;

    }


    .icon-personalproject {

        left: 63%;
        top: 51%;

        width: 16%;

    }


    .icon-shop {

        left: 61%;
        top: 34%;

        width: 16%;

    }

}


/* =========================================================
   ULTRAWIDE
   ========================================================= */

@media (min-width: 1920px) {

    #home {

        background:

            radial-gradient(
                ellipse 80% 70% at 50% 45%,
                #2b2921 0%,
                #1f1e19 30%,
                #13130f 60%,
                #080807 100%
            );

    }


    /* -----------------------------------------
       GEOMETRIA PUNTI
       ----------------------------------------- */

    :root {

        --start-x: 26%;
        --start-y: 37%;

        --node-x: 43%;
        --node-y: 39%;

        --p1s1-x: 45.5%;
        --p1s1-y: 49%;

        --p1s2-x: 50%;
        --p1s2-y: 70%;

        --p1s3-x: 56%;
        --p1s3-y: 64%;

        --p1s4-x: 55.5%;
        --p1s4-y: 53%;

        --p2s1-x: 45%;
        --p2s1-y: 33%;

        --p2s2-x: 49%;
        --p2s2-y: 32%;

        --p2s3-x: 53%;
        --p2s3-y: 41%;

        --p2s4-x: 55%;
        --p2s4-y: 47%;

    }


    /* -----------------------------------------
       ICONS
       ----------------------------------------- */

    .icon-music {

        left: 56%;
        top: 66%;

        width: 8%;

    }


    .icon-portfolio {

        left: 50%;
        top: 28%;

        width: 9%;

    }


    .icon-about {

        left: 49%;
        top: 77%;

        width: 9%;

    }


    .icon-logbook {

        left: 41%;
        top: 51%;

        width: 11%;

    }


    .icon-oldclients {

        left: 43%;
        top: 24%;

        width: 7%;

    }


    .icon-personalproject {

        left: 58%;
        top: 50%;

        width: 11%;

    }


    .icon-shop {

        left: 57%;
        top: 34%;

        width: 11%;

    }

}


/* =========================================================
   PAGINA PRECARICATA SOTTO LA MAPPA
   ========================================================= */

#pagePreloader {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    opacity: 0;

    pointer-events: none;

    z-index: 1;

    background: #080807;

}


/* =========================================================
   QUANDO LA PAGINA È PRONTA SOTTO LA MAPPA
   ========================================================= */

#home.page-under-map {

    background: transparent;

}


#home.page-under-map::before,
#home.page-under-map::after {

    opacity: 0;

}


/* =========================================================
   LA MAPPA RESTA SOPRA LA PAGINA
   ========================================================= */

#home.page-under-map .map-container {

    z-index: 2;

}