a:focus,
a:active {
  outline: none;
  border: none;
}

#preloader {

    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;    
}

/* Classi per le fasce orarie di Tokyo */
body.morning {
    /* Stili per la mattina (06:00 - 11:59) */
    --time-filter: brightness(1.1) contrast(1.05);
    --time-bg-opacity: 0.8;
}


body.afternoon {
    /* Stili per il pomeriggio (12:00 - 17:59) */
    --time-filter: brightness(1) contrast(1);
    --time-bg-opacity: 1;
}

body.evening {
    /* Stili per la sera (18:00 - 05:59) */
    --time-filter: brightness(0.9) contrast(1.1);
    --time-bg-opacity: 0.9;
}

.stopActions * {
    _pointer-events: none !important;
}

.show-md {
    display: none;
}
.show-sm {
    display: inline-block;
}

#smolla {
    background-color:#fff;
}

html {
    background:#000;
}

/* Disabilita pointer-events per i pulsanti delle fasce orarie non attive */
body.morning .containerHighlight[id*="afternoon"] .magnetic-button,
body.morning .containerHighlight[id*="evening"] .magnetic-button {
    pointer-events: none;
}

body.afternoon .containerHighlight[id*="morning"] .magnetic-button,
body.afternoon .containerHighlight[id*="evening"] .magnetic-button {
    pointer-events: none;
}

body.evening .containerHighlight[id*="morning"] .magnetic-button,
body.evening .containerHighlight[id*="afternoon"] .magnetic-button {
    pointer-events: none;
}

body {
    -webkit-overflow-scrolling: touch; /* Abilita momentum scroll */
    overflow-scrolling: touch;    
}

#main {
    width: 100%;
    position: fixed;
    opacity: 0; /* Inizialmente nascosto */
    background-color: #000000;
    background-position: center;
    min-height: 100vh;
    _transition: opacity 0.8s ease-in-out; /* Transizione smooth per mostrare il sito */
}


/* Mostra il sito quando i video sono caricati */
body {pointer-events: none;}
body.site-loaded #main {
    _opacity: 1;
    pointer-events: all;
}

body.site-loaded {
    _opacity: 1;
    pointer-events: all;
}

#content {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    position:relative;
    z-index: 1;
}

#contentAbout {
    display: none;
}

#innerContentAbout {
    display: flex;
    align-items: stretch;
    padding: 30px 40px;
    box-sizing: border-box;    
}

#innerContentAbout p {
    font-family: NBAkademieProMono400;
    font-size: 12px;
    color: #000000;
    letter-spacing: -0.5px;
    text-align: justify;
    line-height: 21px;
    margin-bottom: 30px;
}

#innerContentAbout p b {
    font-family: NBAkademieProMono600;
}

.aboutCol.col2 {
    width: 26%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 18px;
}

.aboutCol.col3 {
    margin-left: 47px;
    flex: 1;
}

div#contentVideo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 0;
    _object-fit: cover;
    _object-position: center;
    /* opacity: 0; */
    transition: .5s ease all;
    _transform: translateY(70%) scale(.95);
    /* mix-blend-mode: saturation; */
    /* z-index: 1; */
    _filter: grayscale(100%) brightness(1.1);
}

.video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.aboutOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFEEED;
    z-index: 1;
    opacity: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Manteniamo per retrocompatibilità */
#aboutOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFEEED;
    z-index: 0;
    opacity: 0;
    mix-blend-mode: multiply;
}



#header {
    display: none;
}

#header-mobile {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    padding-top: 20px;
    align-items: center;
}

#header-mobile .mc-bottana .text {
    margin-top: 3px !important;
}

.about-open #footer {
    pointer-events: none;
}

.about-open #contentVideo {
    pointer-events: none;
}

#IG-PATH {
    fill: #000000;
    transition: .3s ease all;
}

.evening #IG-PATH {
    fill: #FFFFFF;
    transition: .3s ease all;
}



#timeLine {
    height:60px;
    width:auto;
    display: flex;
    gap: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

#timeLine .segment {
    width: 1px;
    height: 100%;
    background: #fff;
    position: relative;
    transform-origin: bottom center;
    transition: none; /* Disabilitiamo le transizioni CSS, useremo GSAP */
}

#timeLineLabel {
    position: absolute;
    bottom: 55px; /* Posiziona sopra la timeline */
    left: 0;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none; /* Non interferisce con gli eventi mouse sulla timeline */
    transition: left 0.3s ease-out; /* Animazione fluida per il movimento */
    opacity: .75;
}

#timeLineLabel .time-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    font-family: NBAkademieProMono400;
    font-size: 11px;
    line-height: 21px;
    color: #ffffff;
    white-space: nowrap;
}

.evening #timeLineLabel .time-display {
    color: #000000;
}

#timeLineLabel .location-text {
    margin-right: 0;
}

#timeLineLabel .time-digits {
    display: flex;
    align-items: center;
}

#timeLineLabel .digit-container {
    position: relative;
    width: 8px;
    height: 12px;
    overflow: hidden;
    display: inline-block;
}

#timeLineLabel .digit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: NBAkademieProMono400;
    font-size: 12px;
    line-height: 21px;
}

#timeLineLabel .digit.current {
    transform: translateY(0%);
}

#timeLineLabel .digit.next {
    transform: translateY(100%);
}

#timeLineLabel .time-separator {
    margin: 0 2px;
    font-family: NBAkademieProMono500;
    font-size: 13px;
    line-height: 20px;
    margin-top: -2px;
}

.loaded #main {
    _transition: 1s ease all;
    opacity: 1;  
}

#logo {
    width: 140px;
    opacity: 1;
}
.evening #idLogo,.evening .idLogo {
    fill: #ffffff;
}

.c1 {
    width: 20%;
}
.c2 {
    width: 45%;
}

.c3 {
    display: flex;
    gap: 20px;
}


p {
    font-family: NBAkademieProMono400-Regular;
    font-size: 12px;
    color: #000000;
    text-align: left;    
}


/* Pulsante con forma personalizzata */
.mc-shape-button {


    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1); /* leggero overlay */

    mask-image: url('../images/button-shape.svg');          /* La tua forma */
    -webkit-mask-image: url('../images/button-shape.svg');  /* Safari */
  
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    
    mask-position: center;
    -webkit-mask-position: center;

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

    width: 315px;
    height: 100px;
}

/* Pulsante con forma personalizzata */
.mc-shape-button-long {


    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1); /* leggero overlay */

    mask-image: url('../images/button-shape-long.svg');          /* La tua forma */
    -webkit-mask-image: url('../images/button-shape-long.svg');  /* Safari */
  
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    
    mask-position: center;
    -webkit-mask-position: center;

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

    width: 454px;
    height: 100px;
}


.button-text {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    z-index: 1;
    font-family: NBAkademieProMono400-Regular;
    font-size: 13px;
    line-height: 20px;
    color: #000000;

}


.mc-bottana {
    position:relative;
    display: inline-block;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    height: 30px;
}

.mc-bottana.inactive {
    pointer-events: none;
}

.mc-bottana .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    color: #fff;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;    
    font-family: NBAkademieProMono500;
    font-size: 11px;
    color: #000000;
    text-align: center;
    line-height: 20px;    
    transition: .3s ease all;
}

.evening .mc-bottana .text {
    color: #FFFFFF;
}



.mc-bottana.inverse .text {
    color:#8B7454;
}

.morning .mc-bottana.inverse .text {
    color:#DDCAB3;
    font-family: NBAkademieProMono400;
}

.afternoon .mc-bottana.inverse .text {
    color:#A8BC9E;
    font-family: NBAkademieProMono400;
}

.evening .mc-bottana.inverse .text {
    color:#4E2600;
    font-family: NBAkademieProMono500;
}

.mc-bottana .g path{
    fill:#FFFFFF;
    fill-opacity: 0.1;
    stroke:#000;
    transition: .5s ease all;
}

.evening .mc-bottana .g path{
    fill:#4E2B04;
    fill-opacity: 0.25;
    stroke:#FFFFFF;
    transition: .5s ease all;
}

.afternoon .mc-bottana .g path{
    fill:#AAA89D;
}

.morning .mc-bottana .g path{
    fill:#907C61;
}

.about-open.afternoon .mc-bottana .g path,
.about-open.morning .mc-bottana .g path,
.about-open.evening .mc-bottana .g path {
    transition-delay: .5s;
    fill: #FFFFFF;
}


.mc-bottana.inverse .g path{
    fill:#000 !important;
    fill-opacity: 1 !important;
    stroke:#000;
    transition: .5s ease all;
}

.evening .mc-bottana.inverse .g path{
    fill:#ffffff !important;
    fill-opacity: 1 !important;
    stroke:#ffffff;
    transition: .5s ease all;
}

.mc-bottana:hover .g path{
    fill:#fff;
    stroke:#fff;
    fill-opacity: 1;
    transition: .5s ease all;
}

.evening .mc-bottana:hover .g path{
    fill:#000000;
    stroke:#000000;
    fill-opacity: 1;
    transition: .5s ease all;
}

.mc-bottana.inverse:hover .g path{
    fill:#fff !important;
    stroke:#fff !important;
    transition: .5s ease all;
}
.morning .mc-bottana.inverse:hover .g path,.afternoon .mc-bottana.inverse:hover .g path{
    fill:#fff !important;
    stroke:#fff !important;
    transition: .5s ease all;
}

.evening .mc-bottana.inverse:hover .g path{
    fill:#000 !important;
    stroke:#000 !important;
    transition: .5s ease all;
}

.mc-bottana.inverse:hover .g{
    fill:#000;
    stroke:#000;
    transition: .5s ease all;
}

.mc-bottana:hover .text {
    color: #000;
    transition: .5s ease all;
}

.evening .mc-bottana:hover .text {
    color: #ffffff;
    transition: .5s ease all;
}

.evening .mc-bottana.inverse:hover .text {
    color: #ffffff;
    transition: .5s ease all;
}

.morning .mc-bottana.inverse:hover .text,.afternoon .mc-bottana.inverse:hover .text {
    color: #000000;
    transition: .5s ease all;
}


.about-open .mc-bottana .g path {
    stroke: #000000;
}
.about-open .mc-bottana .text {
    _transition-delay: .5s;
    color: #000000;
}

.about-open .mc-bottana.inverse .text {
    color: #FFFFFF;
}

.about-open .mc-bottana.inverse .g path{
    fill:#000 !important;
    stroke:#000 !important;
    transition: .5s ease all;
}

.about-open .mc-bottana.inverse .text {
    color: #fff;
}

.about-open .mc-bottana.inverse:hover .g path{
    fill:#fff !important;
    stroke:#fff !important;
    transition: .5s ease all;
}

.about-open .mc-bottana.inverse:hover .text {
    color: #000 !important;
}




.about-open #IG-PATH {
    transition-delay: .5s;
    fill: #000000;
}


.video-container {
    position: absolute;
    width: 100%;
    height: calc(90dvh + 10px);
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s opacity ease;
}

.video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
    object-position: center;
    opacity: 1; /* Il video all'interno del container è sempre visibile */
    transition: .5s ease all;
}

.morning .video {
    object-position: center;
}

/* Mostra i video-container corretti in base alla fascia oraria */
.morning .video-container.morning {
    opacity: 1;
    transition: .5s opacity ease;
}
.afternoon .video-container.afternoon {
    opacity: 1;
    transition: .5s opacity ease;
}
.evening .video-container.evening {
    opacity: 1;
    transition: .5s opacity ease;
}

/* Manteniamo anche le vecchie regole per retrocompatibilità */
.morning video.morning {
    opacity: 1;
    transition: .5s ease all;
}
.afternoon video.afternoon {
    opacity: 1;
    transition: .5s ease all;
}
.evening video.evening {
    opacity: 1;
    transition: .5s ease all;
}

.highlight-svg {
  position: absolute;
  width: 10vw;
  top: 40vh;
  left: 30vw;
  height: auto;
  pointer-events: none;
}

#strokeMask circle {
  transform-origin: center;
  animation: rotateConicGradient 4s linear infinite;
}

.containerHighlight {
    position: absolute;
    height: auto;
    width: 4%;    
}

.containerHighlight .magnetic-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: all;
}

#magneticBtn2 {
    top: -39%;
    left: 160%;
}

#magneticBtn4 {
    top: -29%;
    left: 124%;
}

#magneticBtn6 {
    top: -39%;
    left: 160%;
}

@keyframes _rotateGradient {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:root {
	--rad: 0deg;
}

.magnetic-button {
    width: 46px;
    height: 46px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: absolute; /* Cambiato per posizionamento assoluto */
    user-select: none;
}

.magnetic-button:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Stato attivo del pulsante (modale aperta) */
.magnetic-button.active {
    background: #FFFFFF !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

.magnetic-button.active .plus-icon {
    color: #000 !important;
    /* Rotazione gestita da JavaScript, non da CSS */
}

.evening .magnetic-button {
    background:#fff !important
}

.evening .magnetic-button .plus-icon {
    color:#000 !important
}

/* Disabilita interazione con altri pulsanti quando uno è attivo */
.modal-open .magnetic-button:not(.active) {
    _pointer-events: none;
    _opacity: 0.3;
}

.plus-icon {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}


.tooltip {
    position: absolute;
    left: 0%;
    top: 50%;

    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 15px;
    white-space: nowrap;
    
    pointer-events: none;
    
    background-image: url("../images/tooltip-left.svg");
    background-repeat: no-repeat;
    width:208px;
    height: 90px;
    z-index: 10;
    box-sizing: border-box;

    transform-origin:  center right;
    transition: transform 0.5s ease, opacity 0.3s ease 0s;
    transform:  translateY(-50%) translateX(calc(-100% + 22px)) rotate(-20deg);
    
    opacity: 0;
    will-change: transform, opacity;
    
}
.tooltip.visible {

    transition: opacity 0.1s ease, transform 0.5s ease;
    transform:  translateY(-50%) translateX(calc(-100% + 22px)) rotate(0deg);
    opacity: 1;
}


/* Base styles per tutti i container highlight */
.highlight-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Styles specifici per la mattina (06:00 - 11:59) */
#highlightMorning #highlight-morning-1 {
    position: absolute;
    top: 30%;
    left: 15%;
    height: auto;
    width: 4.2%;
}

#magneticBtn1 {
    top: 100%;
    left: -50%;
}

#magneticBtn3 {
    top: 100%;
    left: -50%;
}

#magneticBtn5 {
    top: 100%;
    left: -50%;
}

#highlightMorning #highlight-morning-2 {
    position: absolute;
    _top: 70%;
    _left: 35%;
    top: 62%;
    left: 33%;    
    height: auto;
    width: 4%;    
}

.morning #highlightMorning {
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
    transition-delay: 0.2s;
}

.morning #highlightMorning .rotating-border {
    _animation: rotateConicGradient 5s linear infinite;
}

/* Styles specifici per il pomeriggio (12:00 - 17:59) */
#highlightAfternoon #highlight-afternoon-1 {
    position: absolute;
    top: 25%;
    left: 70%;
    height: auto;
    width: 3.7%;    
}

#highlightAfternoon #highlight-afternoon-2 {
    position: absolute;
    top: 65%;
    left: 50%;
    height: auto;
    width: 1%;    
}

.afternoon #highlightAfternoon {
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
    transition-delay: 0.2s;
}

.afternoon #highlightAfternoon .rotating-border {
    _animation: rotateConicGradient 5s linear infinite;
}

/* Styles specifici per la sera (18:00 - 05:59) */
#highlightEvening #highlight-evening-1 {
    position: absolute;
    top: 45%;
    left: 20%;
    height: auto;
    width: 4%;    
}

#highlightEvening #highlight-evening-2 {
    position: absolute;
    top: 40%;
    left: 55%;
    height: auto;
    width: 3.9%;    
}

.evening #highlightEvening {
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
    transition-delay: 0.2s;
}

.evening #highlightEvening .rotating-border {
    _animation: rotateConicGradient 5s linear infinite;
}

svg.highlight {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.rotating-border {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none;
	border-radius: 0;
	mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.4 157"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M170.71,70.27c-.32-15.1-.62-29.36-.62-37.46,0-11.8-6.62-20.05-20.22-25.22C136.21,2.41,114.96,0,83,0,5.99,0,0,25.12,0,32.86c.02,2.64.54,64.97,1.42,84.84,1.16,26.45,28.57,39.3,83.78,39.3,27.62,0,49.36-4.29,64.6-12.75,13.93-7.73,21.6-18.71,21.6-30.92,0-10.19-.35-26.9-.7-43.05ZM85.2,151.33c-57.56,0-77.24-13.89-78.12-33.88-.88-19.99-1.41-84.64-1.41-84.64,0-9.15,12.96-27.15,77.34-27.15s81.41,10.23,81.41,27.15,1.32,60.96,1.32,80.51-22.97,38.01-80.53,38.01Z"/></g></svg>');
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
    mask-position: center;
	background: conic-gradient(from var(--rad) at 50% 50%, rgba(255,255,255,.1) 0%, rgba(255,255,255,1) 100%);
	_background-size: 200% 200%;
	z-index: 2;
	_animation: rotateConicGradient 4s linear infinite;
}



#maskMorning2 {
    mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159.27 68.36"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M159.01,20.29c-1.68-11.76-9.84-20.29-19.41-20.29-1.04,0-2.11.1-3.16.3-6.16,1.17-66.39,11.76-102.38,18.09-11.04,1.94-19.59,3.45-23.2,4.08C-2.67,24.86-.13,43.17.83,50.07l.02.17c.94,6.77,4.27,18.13,16,18.13.98,0,2.01-.09,3.05-.26,3.36-.56,23.78-4.19,47.42-8.39,31.04-5.51,69.66-12.38,74.45-13.13,11.13-1.76,19.03-13.79,17.25-26.28ZM140.88,40.98c-8.35,1.32-114,20.21-121.91,21.53-7.91,1.32-11.32-4.57-12.5-13.06-.82-5.94-2.85-19.95,5.38-21.4,15.15-2.68,117.52-20.65,125.65-22.19,8.13-1.54,14.58,6,15.9,15.23s-4.17,18.56-12.52,19.88Z"/></g></svg>');    
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159.27 68.36"><g id="Livello_1-2"><path  stroke="white" stroke-width="1" d="M159.01,20.29c-1.68-11.76-9.84-20.29-19.41-20.29-1.04,0-2.11.1-3.16.3-6.16,1.17-66.39,11.76-102.38,18.09-11.04,1.94-19.59,3.45-23.2,4.08C-2.67,24.86-.13,43.17.83,50.07l.02.17c.94,6.77,4.27,18.13,16,18.13.98,0,2.01-.09,3.05-.26,3.36-.56,23.78-4.19,47.42-8.39,31.04-5.51,69.66-12.38,74.45-13.13,11.13-1.76,19.03-13.79,17.25-26.28ZM140.88,40.98c-8.35,1.32-114,20.21-121.91,21.53-7.91,1.32-11.32-4.57-12.5-13.06-.82-5.94-2.85-19.95,5.38-21.4,15.15-2.68,117.52-20.65,125.65-22.19,8.13-1.54,14.58,6,15.9,15.23s-4.17,18.56-12.52,19.88Z"/></g></svg>');    
}

#maskAfternoon1 {
    mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 169.68 182.12"><g> <path stroke="white" stroke-width="1" d="M94.58,0h-19.54C25.25.56,0,8.82,0,24.57v119.35c0,13.62,7.91,23.71,23.52,29.98,13.77,5.53,33.74,8.22,61.05,8.22h.54c27.31,0,47.28-2.69,61.05-8.22,15.61-6.27,23.52-16.36,23.52-29.98V24.57c0-15.75-25.25-24.01-75.11-24.57ZM164.01,143.92c0,22.54-26.95,32.53-78.9,32.53-.09,0-.18,0-.27,0-.09,0-.18,0-.27,0-51.95,0-78.9-9.99-78.9-32.53V24.57C5.67,14.51,26.47,6.21,75.11,5.67h9.72s.01,0,.02,0c0,0,.01,0,.02,0h9.72c48.64.54,69.44,8.84,69.44,18.9v119.35Z"/></g></svg>');    
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 169.68 182.12"><g ><path stroke="white" stroke-width="1" d="M94.58,0h-19.54C25.25.56,0,8.82,0,24.57v119.35c0,13.62,7.91,23.71,23.52,29.98,13.77,5.53,33.74,8.22,61.05,8.22h.54c27.31,0,47.28-2.69,61.05-8.22,15.61-6.27,23.52-16.36,23.52-29.98V24.57c0-15.75-25.25-24.01-75.11-24.57ZM164.01,143.92c0,22.54-26.95,32.53-78.9,32.53-.09,0-.18,0-.27,0-.09,0-.18,0-.27,0-51.95,0-78.9-9.99-78.9-32.53V24.57C5.67,14.51,26.47,6.21,75.11,5.67h9.72s.01,0,.02,0c0,0,.01,0,.02,0h9.72c48.64.54,69.44,8.84,69.44,18.9v119.35Z"/></g></svg>');    
}

#maskAfternoon2 {
    mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.56 165.53"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M39.9,1.65c-3.37-1.12-7.94-1.65-14.36-1.65-.42,0-.84,0-1.25,0-.42,0-.83,0-1.25,0-6.43,0-10.99.52-14.36,1.65C.84,4.25,0,10.04,0,12.41v137.32c0,10.03,12.46,15.62,24.19,15.8h.17c11.73-.18,24.19-5.78,24.19-15.8V12.41c0-2.37-.84-8.16-8.66-10.76ZM42.89,149.73c0,5.98-9.86,10-18.61,10.13-8.75-.13-18.61-4.15-18.61-10.13V12.41c0-5.37,6.98-6.74,17.36-6.74.42,0,.84,0,1.25,0,.42,0,.83,0,1.25,0,10.38,0,17.36,1.37,17.36,6.74v137.32Z"/></g></svg>');    
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.56 165.53"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M39.9,1.65c-3.37-1.12-7.94-1.65-14.36-1.65-.42,0-.84,0-1.25,0-.42,0-.83,0-1.25,0-6.43,0-10.99.52-14.36,1.65C.84,4.25,0,10.04,0,12.41v137.32c0,10.03,12.46,15.62,24.19,15.8h.17c11.73-.18,24.19-5.78,24.19-15.8V12.41c0-2.37-.84-8.16-8.66-10.76ZM42.89,149.73c0,5.98-9.86,10-18.61,10.13-8.75-.13-18.61-4.15-18.61-10.13V12.41c0-5.37,6.98-6.74,17.36-6.74.42,0,.84,0,1.25,0,.42,0,.83,0,1.25,0,10.38,0,17.36,1.37,17.36,6.74v137.32Z"/></g></svg>');        
}

#maskEvening1 {
    mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187.34 171.16"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M93.67,0C28.01,0,0,7.16,0,23.93v117.4c0,4.74,2.96,13.76,22.76,20.88,16.3,5.86,40.52,8.96,70.03,8.96h1.76c68.49,0,92.79-16.07,92.79-29.84V23.93C187.34,7.16,159.33,0,93.67,0ZM181.68,141.32c0,9.23-21.65,24.17-87.12,24.17-.3,0-.58,0-.88,0-.29,0-.58,0-.88,0-65.47,0-87.12-14.94-87.12-24.17V23.93c0-12.11,28.68-18.26,88-18.26s88,6.15,88,18.26v117.4Z"/></g></svg>');    
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187.34 171.16"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M93.67,0C28.01,0,0,7.16,0,23.93v117.4c0,4.74,2.96,13.76,22.76,20.88,16.3,5.86,40.52,8.96,70.03,8.96h1.76c68.49,0,92.79-16.07,92.79-29.84V23.93C187.34,7.16,159.33,0,93.67,0ZM181.68,141.32c0,9.23-21.65,24.17-87.12,24.17-.3,0-.58,0-.88,0-.29,0-.58,0-.88,0-65.47,0-87.12-14.94-87.12-24.17V23.93c0-12.11,28.68-18.26,88-18.26s88,6.15,88,18.26v117.4Z"/></g></svg>');    
}

#maskEvening2 {
    mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162.86 66.78"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M158.85,25.85c-2.58-3.71-6.18-6.04-10.42-6.72C138.58,17.55,47.69,3.53,21.55.15c-.75-.1-1.52-.15-2.28-.15C9.99,0,2.22,7.16.39,17.41c-1.92,10.77,3.37,24.68,13.08,26.48,11.22,2.08,120.07,21.43,127.91,22.69.82.13,1.64.2,2.45.2,8.92,0,15.8-7.74,18.41-20.72,1.49-7.44.22-15-3.4-20.21ZM156.68,44.95c-2.19,10.92-7.54,17.14-14.4,16.04-7.95-1.29-117-20.67-127.78-22.67-5.53-1.03-10.11-11.06-8.53-19.91,1.58-8.85,8.25-13.49,14.85-12.64,25.89,3.35,116.29,17.28,126.7,18.96,7.94,1.28,10.93,11.41,9.16,20.22Z"/></g></svg>');    
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg id="Livello_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162.86 66.78"><g id="Livello_1-2"><path stroke="white" stroke-width="1" d="M158.85,25.85c-2.58-3.71-6.18-6.04-10.42-6.72C138.58,17.55,47.69,3.53,21.55.15c-.75-.1-1.52-.15-2.28-.15C9.99,0,2.22,7.16.39,17.41c-1.92,10.77,3.37,24.68,13.08,26.48,11.22,2.08,120.07,21.43,127.91,22.69.82.13,1.64.2,2.45.2,8.92,0,15.8-7.74,18.41-20.72,1.49-7.44.22-15-3.4-20.21ZM156.68,44.95c-2.19,10.92-7.54,17.14-14.4,16.04-7.95-1.29-117-20.67-127.78-22.67-5.53-1.03-10.11-11.06-8.53-19.91,1.58-8.85,8.25-13.49,14.85-12.64,25.89,3.35,116.29,17.28,126.7,18.96,7.94,1.28,10.93,11.41,9.16,20.22Z"/></g></svg>');        
}




.textAndCarousel {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .75);
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4%;
    padding-right: 4%;
    _padding-top: 46px;
    padding-bottom: 0%;    
    box-sizing: border-box;    
}

.contentModal {
    position:relative;
}

.textAndCarousel.active {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Pulsante target nella modale - posizionato in alto al centro di modalContent */
.modal-button-target {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 30;
    /* z-index: 20; */
    cursor: pointer;
    width: 46px;
    height: 46px;    
}

.modal-target-button {
    opacity: 0; /* Invisibile per default */
    pointer-events: all; /* Abilita click per chiudere la modale */
    background: #FFFFFF !important; /* Sempre bianco come il clone */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

.modal-target-button .plus-icon {
    color: #000 !important; /* Icona nera su sfondo bianco */
    transform: rotate(45deg); /* Ruota il × per farlo sembrare una X */
}

/* Pulsante clonato durante l'animazione */
.magnetic-button.modal-clone {
    position: fixed;
    z-index: 1001;
    pointer-events: none;
}

/* Contenuti interni della modale */
.textAndCarousel > div {
    display: none;
    max-width: 1250px;

    width: 100%;
    height: 80svh;
    _aspect-ratio: 1264 / 483;
    _mask: url(../images/modalMask.svg);
    _-webkit-mask: url(../images/modalMask.svg);
    _mask-repeat: no-repeat;
    _mask-size: contain;

}

.carousel {
    mask: url(../images/modalMask-mobile.svg);
    -webkit-mask: url(../images/modalMask-mobile.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center top;
    position:relative;
}

.progress {
    height: 5px;
    width: 100%;
    position: absolute;
    background: black;
    right: 0;
    display: flex;
    gap: 2px;
    flex-direction: row;
    z-index: 10; /* Porta in primo piano */
    bottom: 0;
}

.progress .prog {
    width: 100%;
    flex: 1;
    background: #BFB3B2;
    position: relative;
    display: inline-block;
    overflow: hidden;
    border:0px solid #BFB3B2;
}

.progress .prog:before {
    width: 100%;
    content: "";
    background: #FFEEED;
    position: absolute;
    height: 100%;
    transform: translateY(100%); /* Inizia dal basso, nascosta */
    transform-origin: bottom center;
    transition: none; /* Disabilitiamo le transizioni CSS, useremo GSAP */
}

.progress .prog.active:before {
    /* Classe attiva per lo stato corrente */
    background: #FFEEED;
}

/* Progress bar animata via JavaScript */
.progress .prog .progress-bar {
    width: 100%;
    height: 100%;
    background: #FFEEED;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top center;
    transform: translateY(-100%); /* Inizia dall'alto, nascosta */
    z-index: 1;
}

.modalContent {
    mask: url(../images/modalMask-mobile.svg);
    -webkit-mask: url(../images/modalMask-mobile.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center bottom;
    background: #000000;
}

.textAndCarousel p,.textAndCarousel li {
    font-family: 'NBAkademieProMono400';
    font-size: 12px;
    color: #BFB3B2;
    line-height: 21px;    
}

.textAndCarousel .contentDavvero{
    max-width:630px;
}

.textAndCarousel .contentDavvero p {
    margin-bottom: 30px;
}

.textAndCarousel.active > div.show {
    display: flex !important;
    flex-direction: column;
}

.carousel {
    width: 100%;
    background: white;
    height: 40%;
}
.modalContent {
    flex: 1;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    height: 60%;
}

.contentDavvero {
    margin-top:38px;
}

.dentrodentro {
    display: flex;
    overflow-y: auto;
    height: 100%;
    align-items: center;
}

/* Scrollbar personalizzata: sfondo nero, barra bianca */
.dentrodentro::-webkit-scrollbar {
    width: 8px;
    background: #000;
}

.dentrodentro::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 4px;
}

.dentrodentro::-webkit-scrollbar-track {
    background: #000;
}

/* Firefox */
.dentrodentro {
    scrollbar-width: thin;
    scrollbar-color: #fff #000;
}

.carousel-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.carousel-inner .item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%);
    opacity: 1;
    padding: 8%;
    box-sizing: border-box;     
}

.carousel-inner .item:first-child {
    transform: translateY(0%);
    opacity: 1;
}

.carousel-inner .item-inner {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;   
}

.maikasui-icons {
    display: flex;
    gap: 25px;
}

.maikasui-icons div {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    font-family: NBAkademieProMono400;
    font-size: 12px;
    color: #000000;
    text-align: center;
    line-height: 17px;    
}

.maikasui-icons div > span{
    height:23px;
}

@media only screen and (max-width: 40.062em) {
    #smolla {
        background-color: #fff; /* Mobile: bianco */
    }
    
    /* MOBILE: Forza visibilità del video container */
    .video-container {
        _opacity: 1 !important;
        _transition: none !important;
    }
    
    /* MOBILE: Previeni transizioni CSS automatiche sui pulsanti (ma permetti GSAP) */
    .magnetic-button:not(.modal-clone) {
        transition: none !important;
    }
    
    /* MOBILE: Nascondi i pulsanti delle fasce orarie non attive */
    body.morning .containerHighlight[id*="afternoon"],
    body.morning .containerHighlight[id*="evening"] {
        display: none !important;
    }
    
    body.afternoon .containerHighlight[id*="morning"],
    body.afternoon .containerHighlight[id*="evening"] {
        display: none !important;
    }
    
    body.evening .containerHighlight[id*="morning"],
    body.evening .containerHighlight[id*="afternoon"] {
        display: none !important;
    }
    
    /* MOBILE: Nascondi timeline */
    #timeLine,
    #timeLineLabel {
        _display: none !important;
    }
    
    /* Su mobile il video è sempre visibile, no transizioni */
    .video {
        transition: none !important;
    }
}

@media only screen and (min-width: 40.063em) {
    #smolla {
        background-color: #000; /* Desktop: nero */
    }
    
    /* DESKTOP: Mantieni logica esistente per video containers */
    .video-container {
        opacity: 0;
        transition: .5s opacity ease;
    }
    
    .morning .video-container.morning,
    .afternoon .video-container.afternoon,
    .evening .video-container.evening {
        opacity: 1;
        transition: .5s opacity ease;
    }
}

@media only screen and (max-width: 40.062em) and (orientation: landscape) {
    #smolla {
        background-color: #f00; /* Mobile landscape: rosso */
    }
    
    /* Su mobile landscape: stesse regole del mobile normale */
    .video-container {
        opacity: 1 !important;
        transition: none !important;
    }
    
    .video {
        transition: none !important;
    }
}







/* 2. Assicura che il container interno possa scorrere */
.dentrodentro {
    display: flex;
    overflow-y: auto;
    height: 100%;
    align-items: flex-start; /* Cambia da center a flex-start per allineare in alto */
    padding: 20px;
    box-sizing: border-box;
    position: relative; /* necessario per la scrollbar custom */
    -webkit-overflow-scrolling: touch; /* smooth scrolling su iOS */
}

.dentrodentro.scroll-container {
    /* forza il container a essere scrollabile */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}



/* 4. Assicura che il testo abbia spazio adeguato */
.contentDavvero {
    margin-top: 38px;
    margin-bottom: 38px; /* Aggiungi margine inferiore */
    flex: 1; /* Prendi tutto lo spazio disponibile */
    min-height: 0; /* Permetti shrinking */
}

#contentAbout-mobile {
    width: 100%;
    background: white;
    
    z-index: 1;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #F0EEEB;
    background-image: url(../images/floreal.svg);
    background-size: cover;
    background-position: center;    
    -webkit-mask: url(../images/modalMask-mobile.svg);
    mask: url(../images/modalMask-mobile.svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center top;        
    font-family: NBAkademieProMono400;
    font-size: 12px;
    color: #000000;
    line-height: 20px;    
    margin-bottom: 440px;
    padding-bottom: 40px;
    opacity: 0;
}

#spacerMobile {
    position: relative;
    width: 100%;
    height: 90svh;
    pointer-events: none;
}

#contentAbout-mobile p{
    font-family: NBAkademieProMono400;
    font-size: 12px;
    color: #000000;
    line-height: 20px;
}

#contentAbout-mobile p b {
    font-family: NBAkademieProMono600;
}

#footer-mobile {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;    
    font-family: NBAkademieProMono400;
    font-size: 12px;
    color: #F6F3ED;
    line-height: 20px;    
    gap:80px;
    padding: 80px 20px;
    box-sizing: border-box;    
    height: 450px;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

#footer-mobile.show {
    opacity: 1;
    pointer-events: all;
}

#shop-d-select {
    display: none;
}

.time-digits {
    margin-left: 9px;
}

#footer-mobile .mc-bottana .g path {
    fill: #000 !important;
    stroke: #fff !important;
    fill-opacity: 1 !important;    
}

#footer-mobile .mc-bottana .text {
    color: #fff !important;
}

#footer-mobile #IG-path use{
    fill: #ffffff !important;
    transition: .3s ease all;
}

.d-shop-hover {
    position: relative;
}

.shop-d-select {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 37px;
    _opacity: 0;
    pointer-events: none;
    width: 100%;
}

.shop-d-select a{
    opacity: 0;
    pointer-events: none;
    transition: .8s all;
    transition-delay: var(--back-delay) !important;
}

.d-shop-hover:hover .shop-d-select {
    _opacity: 1;
    pointer-events: all;
}
.d-shop-hover:hover .shop-d-select a {
    opacity: 1;
    transition-delay: var(--delay) !important;
    pointer-events: all;
    transition: .8s all;
    
}

#header-mobile .mc-bottana.inverse {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    width: 100%;
}

svg.highlight {
    opacity: 0;
}

.mc-bottana path {
    stroke-width: 1px;
}

.evening .mc-bottana .text {
    font-family: NBAkademieProMono400;
}

#timeLineLabel .g path {
    fill-opacity: .65 !important;
}

/*sovrascrivo tutto per lo show del sito*/
div#contentVideo {
    transition: none;
    opacity: 0;
}
#timeLineLabel {
    transition: none;
    _opacity: 0;
}
#timeLine {
    _opacity: 0;
    _width:300vw;
}
.scrollContainerTimeline {
    width:100vw;
    
    overflow-x:auto;
    overflow-y:hidden;
}

/* Hide scrollbar but keep scrolling */
.scrollContainerTimeline {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
  overflow: auto;            /* or scroll if you prefer */
}

.scrollContainerTimeline::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.magnetic-button {
    transition: none;
}

#natural-beauty .go {
    fill-opacity: 0;
}

#footer {
    display: flex;
    align-items: flex-end;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    top: calc(90svh - 90px);
    width: 100%;
    height: 100px;
}

#timeLineLabel {
    left:50%;
    height:38px
}

#footer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.site-loaded #footer:before {
  
  opacity: 1;
  transition-delay: 3s !important;
  transition: opacity 4s ease;
  
}

.about-open #footer:before {
  
  opacity: 0;
    transition-delay: 0s !important;
  transition: opacity .5s ease;
  
}

.full-loaded-after-animation #footer:before {
    transition-delay: 0s !important;
}

#nowLabel {
    display:none;
}

 .time-separator {
    -webkit-animation: 2s blink ease infinite;
    -moz-animation: 2s blink ease infinite;
    -ms-animation: 2s blink ease infinite;
    -o-animation: 2s blink ease infinite;
    animation: 2s blink ease infinite;
  }



  @keyframes "blink" {
    0%, 70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-moz-keyframes blink {
    0%, 70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-webkit-keyframes "blink" {
    0%, 70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-ms-keyframes "blink" {
    0%, 70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-o-keyframes "blink" {
    0%, 70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .about-open #idLogo,.about-open .idLogo {
    transition-delay: .5s !important;
    transition:.3s ease all;
    fill: #000 !important;
    
  }

  .wrappuozzo {
    display: flex;
    width: 100%;
    padding-bottom: 8px;
    flex-direction: column;
    flex: 1;
  }

  #magneticBtn1 {
    top: -100%;
    left: 50%;
  }

  #magneticBtn2 {
    top: -10%;
    left: 210%;
  }

  #magneticBtn3 {
    top: 0%;
    left: -110%;
  }

  #magneticBtn4 {
    top: -80%;
    left: 160%;
  }  

  #magneticBtn5 {
    top: -130%;
    left: 50%;
  }

  #magneticBtn6 {
    top: 140%;
    left: 230%;
  }


  
.magnetic-button{opacity:1;transform: scale(1) rotate(0)}
.rotating-border{opacity:1}

  body.noscroll {
    overflow: hidden; /* blocca lo scroll della pagina */
  }

  body,html {
    overflow:hidden !important;
  }






  .scroll-container {
  position: relative;
  height: 300px; /* puoi cambiare in base alle tue esigenze */
  overflow: hidden; /* nasconde la scrollbar nativa */
}

.scroll-content {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px; /* spazio per la scrollbar simulata */
  -webkit-overflow-scrolling: touch; /* scroll fluido su iOS */
}

.custom-scrollbar {
  position: absolute;
  top: 0;
  right: 2px;
  width: 3px;
  height: 100%;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  z-index: 999;
  pointer-events: none; /* permette solo al thumb di essere cliccato */
  opacity: 1 !important; /* sempre visibile */
  visibility: visible !important; /* sempre visibile */
  display: block !important; /* forza display */
}

.custom-scroll-thumb {
  width: 100%;
  background: #4D4847;
  border-radius: 4px;
  position: absolute;
  top: 0;
  height: 40px; /* fallback iniziale, verrà sovrascritta da JS */
  touch-action: none; /* fondamentale per drag su mobile */
  pointer-events: all; /* abilita il drag */
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.3);
  opacity: 1 !important; /* sempre visibile */
  visibility: visible !important; /* sempre visibile */
  display: block !important; /* forza display */
  margin-top: 20px;
}

#ideograms {
    opacity:0;
    transform: translateY(50px);
}