*,:after,:before{
    box-sizing:border-box
}
:root{
    font-size:17px
}
html,body{
    height:100vh;
    overflow:hidden
}
body{
    --color-text:#fff;
    --color-title:#dbb59b;
    --color-bg:#161a19;
    --color-link:#7f9993;
    --color-link-hover:#fff;
    --color-menu:#7f9993;
    --img-ratio:1.5;
    color:var(--color-text);
    background:var(--color-bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    margin:0;
    font-family:acumin-pro,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
    font-weight:300
}
body:after{
    z-index:1000;
    content:"";
    pointer-events:none;
    width:100vw;
    height:100vh;
    transform-origin:100% 0;
    background:url(shadow.f3dc3bb9.png) 100% 0/cover no-repeat;
    animation:move 7s 2s infinite alternate;
    position:fixed;
    top:0;
    left:0
}
@keyframes move{
    to{
        transform:scaleX(1.1)
    }
}
.js .loading:before,.js .loading:after{
    content:"";
    z-index:1000;
    position:fixed
}
.js .loading:before{
    width:100%;
    height:100%;
    background:var(--color-bg);
    top:0;
    left:0
}
.js .loading:after{
    width:60px;
    height:60px;
    opacity:.4;
    background:var(--color-link);
    border-radius:50%;
    margin:-30px 0 0 -30px;
    animation:loaderAnim .7s linear infinite alternate forwards;
    top:50%;
    left:50%
}
@keyframes loaderAnim{
    to{
        opacity:1;
        transform:scale(.5)
    }
}

.title-pageh1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

a{
    color:var(--color-link);
    white-space:nowrap;
    outline:0;
    text-decoration:none;
    position:relative;
    overflow:hidden
}
a:before{
    /*    content:"";
        height:1px;
        width:100%;
        transform-origin:0%;
        background:currentColor;
        transition:transform .3s;
        position:absolute;
        top:95%*/
}
a:hover:before{
    transform-origin:100%;
    transform:scaleX(0)
}
a:hover{
    color:var(--color-link-hover);
    outline:0
}
a:focus{
    background:#d3d3d3;
    outline:0
}
a:focus:not(:focus-visible){
    background:0 0
}
a:focus-visible{
    background:0 0;
    outline:2px solid red
}
.oh{
    overflow:hidden
}
.line{
    transform-origin:0;
    white-space:nowrap;
    will-change:transform;
    padding-bottom:.15rem
}
.unbutton{
    font:inherit;
    background:0 0;
    border:0;
    margin:0;
    padding:0
}
.unbutton:focus{
    outline:0
}
main{
    height:100%;
    grid-template:"logo menu"25%". ."25%"button-enter button-enter"1fr"frame frame"/1fr 250px;
    padding:1rem;
    display:grid
}
.frame{
    z-index:200;
    grid-area:frame;
    padding-bottom:.5rem;
    position:relative
}
.frame__title{
    margin:0;
    font-size:1rem;
    font-weight:400;
    position:relative
}
.frame__links a:not(:last-child){
    margin-right:1rem
}
.logo{
    color:var(--color-title);
    grid-area:logo;
    justify-self:start;
    margin:0;
    font-family:kudryashev-d-excontrast-sans,sans-serif;
    font-size:2.45rem;
    font-weight:300;
    line-height:1;
    display:grid
}
.logo__layer{
    grid-area:1/1/2/2;
    transition:all .5s ease-out
}
.show .logo__layer--1{
    opacity:.1
}
.show .logo__layer--2{
    opacity:.3;
    transform:translate(50%)
}
.show .logo__layer--3{
    transform:translate(100%)
}
.button-menu{
    z-index:100;
    width:1.65rem;
    height:.65rem;
    color:var(--color-menu);
    opacity:.5;
    cursor:not-allowed;
    border-top:2px solid;
    border-bottom:2px solid;
    grid-area:menu;
    align-self:start;
    justify-self:end;
    margin:.5rem 1.5rem
}
.intro-progress{
    width:4ch;
    color:var(--color-title);
    grid-area:logo;
    align-self:start;
    justify-self:start;
    font-size:10vw;
    font-weight:400;
    line-height:.5
}
.intro-image{
    --img-height:260px;
    height:var(--img-height);
    width:calc( 1/var(--img-ratio)*var(--img-height));
    background-repeat:no-repeat;
    background-size:100%;
    grid-area:1/1/-1/-1;
    justify-self:end;
    position:relative;
    /*filter: brightness(35%);*/
    /*bottom: -70px;*/
    opacity: .6;
}
.intro-content__image .intro-image{
    --img-height:360px
}
.trail{
    align-items:center;
    justify-items:center;
    display:grid;
    position:relative
}
.no-js .trail{
    width:100%;
    height:100%;
    background-size:100%
}
.trail__img,.trail__text{
    will-change:transform;
    grid-area:1/1/2/2;
    position:relative
}
.trail__img{
    width:100%;
    height:100%
}
.intro-content{
    height:100%;
    grid-template:"."4rem"title-up"min-content"title-down"min-content"."1rem"image""."1fr/100%;
    grid-area:1/1/-1/-1;
    justify-items:center;
    display:grid;
    overflow:hidden
}
.intro-content__title{
    color:var(--color-title);
    white-space:nowrap;
    will-change:transform;
    align-self:end;
    font-size:max(1.5rem,min(22vh,14vw));
    font-weight:400;
    line-height:.9;
    position:relative
}
.intro-content__title em{
    font-style:italic;
    font-weight:400
}
.intro-content__title--up{
    opacity:0;
    grid-area:title-up;
    align-self:end;
    font-family:kudryashev-d-excontrast-sans,sans-serif;
    font-weight:300
}
.intro-content__title--up .trail__text{
    transform:translateY(-14vh)
}
.intro-content__title--down{
    text-transform:uppercase;
    opacity:0;
    grid-area:title-down
}
.intro-content__title--down .trail__text{
    transform:translateY(18vh)
}
.intro-content__image{
    grid-area:image;
    align-self:end
}
.button-enter{
    z-index:200;
    color:inherit;
    width:100px;
    height:100px;
    cursor:pointer;
    background:0 0;
    border:1px solid #dbb59b;
    border-radius:50%;
    grid-area:button-enter;
    align-self:start;
    justify-self:center;
    align-items:center;
    justify-items:center;
    display:grid;
    position:relative;
    overflow:hidden;

    left: 50%;
    transform: translateX(-50%) !important;

    position: absolute;
    bottom: 30px;
    display: none;
}
.button-enter.hide{
    pointer-events:none
}
.button-enter span{
    pointer-events:none;
    cursor:pointer;
    width:100%;
    height:100%;
    color:#dbb59b;
    align-items:center;
    justify-items:center;
    font-weight: 600;
    font-size: 20px;
    transition:color,transform .3s;
    display:grid;
    position:relative;
    transform:translateY(1rem)
}
.button-enter:hover span,.button-enter:focus-visible span{
    color:#000;
    transform:translateY(0)
}
.button-enter:before{
    content:"";
    width:100px;
    height:100px;
    background:#dbb59b;
    margin:-50px 0 0 -50px;
    transition:transform .3s;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateY(100%)
}
.button-enter:hover:before,.button-enter:focus-visible:before{
    transform:translateY(0%)
}
.js .logo,.js .button-menu,.js .button-enter{
    opacity:0
}
.js .logo.show,.js .button-menu.show,.js .button-enter.show{
    opacity:1;
    transition:opacity .5s ease-out
}
.js .button-enter.show{
    transition:opacity 1.5s ease-in-out
}
.content{
    pointer-events:none;
    height:100%;
    grid-column-gap:3.5%;
    grid-template:". . ."4rem"content-title-up content-title-up content-title-up"min-content"content-title-down content-title-down content-title-down"min-content". . ."2rem"content-about content-about content-about""content-img-1 content-img-2 content-img-3"/31% 31% 31%;
    grid-area:1/1/-1/-1;
    padding:0 1rem;
    display:grid
}
.content__title{
    position:relative
}
.content__title .intro-content__title{
    width:min-content;
    grid-column:1/span 2;
    font-size:max(2rem,min(10vh,8vw))
}
.content__title--up{
    z-index:1;
    grid-area:content-title-up;
}

@media (max-width: 768px) {
    .content__title--up{
        position: relative;
        top: -65px;
        left: -9px;
    }
}

.content__title--down{
    z-index:3;
    grid-area:content-title-down
}

@media (max-width: 768px) {
    .content__title--down{
        position: relative;
        top: -65px;
        left: -9px;
    }
}

.content__about{
    z-index:100;
    opacity:0;
    flex-direction:column;
    /*grid-area:content-about;*/
    font-size:1.3rem;
    line-height:1.1;
    display:flex;
    /*pointer-events: none;*/
        position: absolute;
    right: 0;
    top: 50px;
    width: 50%;
    overflow-y: auto;
    height: calc(100vh - 100px);
    /*z-index: 99999999999999;*/
    /*pointer-events: all;*/

    scroll-behavior: smooth; /* Scorrimento fluido */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--color-title) transparent;
}

@media (max-width: 768px) {
    .content__about{
        right: auto;
        top: 260px;
        width: calc(100% - 45px);
        height: calc(100vh - 270px);
        left: 25px;
    }
}

/* Scrollbar custom solo per WebKit (Chrome, Safari, Edge) */
.content__about::-webkit-scrollbar {
    width: 8px;
}

.content__about::-webkit-scrollbar-track {
    background: transparent;
}

.content__about::-webkit-scrollbar-thumb {
    background: var(--color-title);
    border-radius: 10px;
}

.content__about::-webkit-scrollbar-thumb:hover {
    background: var(--color-title);
}



.content__about-a {
    font-family: "Roboto Mono", monospace;
    font-weight: 300;
    font-size: 21px;
    line-height: 30px;
    color: var(--color-title);
    will-change: transform;
    padding-right: 25px;
}

@media (max-width: 768px) {
    .content__about-a {
        padding-right: 0;
    }
}

.title1 {
    font-size: 39px;
    line-height: 45px;
    margin-top: 0;
    font-family: kudryashev-d-excontrast-sans,sans-serif;
}

@media (max-width: 768px) {
    .title1 {
        margin-top: 0;
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 18px;
    }
}

.title2 {
    font-size: 20px;
    line-height: 24px;
}

@media (max-width: 768px) {
    .title2 {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 20px;
    }
}

.content__about-title{
    margin: 0 7vw 0 0;
    font-style:italic
}
.content__about p{
    margin:0;
    margin-bottom: 45px;
    font-size: 16px;
    line-height: 25px;
}

@media (max-width: 768px) {
    .content__about p{
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 35px;
    }
}

.content__image{
    z-index:2;
    align-items:flex-end;
    margin-bottom:-20vh;
    display:flex;
    position:relative
}

@media (max-width: 768px) {
    .content__image{
        width: 250px;
        left: -80px;
    }
}

.content__image--1{
    grid-area:content-img-1
}
.content__image--2{
    grid-area:content-img-2
}
.content__image--3{
    grid-area:content-img-3
}
.content__image-inner,.content__image .intro-image{
    width:100%;
    height:100%;
    opacity:0;
    will-change:opacity,transform,border-radius;
    background-position:50% 0;
    background-size:cover;
    border-radius:20vw 20vw 0 0
}
@media screen and (min-width:53em){
    main{
        grid-column-gap:5vw;
        grid-template:"logo.menu"". . ."50%".button-enter."1fr"frame frame frame"/30vw 1fr 30vw;
        padding:2.5rem 1rem 0
    }
    .intro-content{
        grid-template-rows:32% 15% 35% 18%;
        grid-template-areas:"title-up""title-down""image""."
    }
    .intro-image{
        --img-height:45vh
    }
    .intro-content__image .intro-image{
        --img-height:53vh
    }
    .content{
        grid-template-rows:20% 10vh 10vh auto auto;
        grid-template-areas:". . .""content-title-up content-about content-about""content-title-down content-about content-about""content-img-1 content-img-2 content-img-3"
    }
    .content__title .intro-content__title{
        grid-column:1/span 2
    }
    .content__about{
        /*max-width:440px;*/
        flex-direction:row;
        /*grid-row:2/span 2;*/
        justify-self:end
    }
    .content__image-inner,.content__image .intro-image{
        height:50vh;
        border-radius:20vw 20vw 0 0
    }
    .button-enter{
        align-self:center
    }
    .frame{
        width:100%;
        grid-template-columns:auto auto 1fr;
        grid-template-areas:"title links sponsor";
        display:grid
    }
    .frame__title{
        grid-area:title
    }
    .frame__links{
        grid-area:links;
        margin-left:5vw
    }
}


@media (max-width: 768px) {
    .content__image-inner, .content__image .intro-image {
        border-radius: 100px  100px 0 0;
        height: 410px;
    }
    .content__title .intro-content__title{
        font-size:35px;
    }
}


.menu-privacy.show {
    display: flex !important;
}

.logo-portfolio {
    display: none;
}

@media (max-width: 768px) {
    nav.menu {
        left: 6px !important;
    }
}


footer {
    display: none !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
    background-color: transparent !important;
}

footer.show {
    display: block !important;
}