/* Variabili CSS per colori, font, ecc. */
:root {
    --font-family-main: 'Major Mono Display', monospace;
    --background-color: #000;
    --text-color: #fff;
    --section-bg-color: #111;
    --feature-bg-color: #000000;
}

body {
    cursor: none;

        overflow-x: hidden;

    padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#custom-cursor {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1000;
    mix-blend-mode: difference; /* Crea un effetto negativo in sovrapposizione */
    background-color: rgba(255, 255, 255, 0.75); /* Bianco semi-trasparente */
}

@media (max-width: 768px) {
    /* Nasconde il cursore personalizzato sui dispositivi con larghezza fino a 768px */
    #custom-cursor {
        display: none;
    }
}

/* Nasconde il cursore su dispositivi con funzionalità touch */
@media (hover: none) and (pointer: coarse) {
    * {
        cursor: none;
    }
}

/* Imposta i colori di sfondo per le sezioni, alternandoli */

#made-for {
    border-radius: 20px; /* Angoli arrotondati */
    border: 2px solid #077A76; /* Contorno colorato, usa uno dei tuoi colori */
    border-color: #f16100; /* Colore specificato */
}


#story {
    border-radius: 20px; /* Angoli arrotondati */
    border: 2px solid #077A76; /* Contorno colorato, usa uno dei tuoi colori */
    }

    #real-pics {
        border-radius: 20px; /* Angoli arrotondati */
        border: 2px solid #fcd707; /* Contorno colorato, usa uno dei tuoi colori */
        padding: 0;
    }

#features {
    border-radius: 20px; /* Angoli arrotondati */
    border: 2px solid #fcd707; /* Contorno colorato, usa uno dei tuoi colori */
    padding: 0;
}

#production img {
    width: 100%; /* Rendi l'immagine larga quanto il contenitore */
    height: auto; /* Mantiene le proporzioni dell'immagine */
    display: block; /* Elimina eventuali spazi extra sotto l'immagine */
}

#production {
   
    padding: 0; /* Rimuove il padding per permettere alla GIF di espandersi a tutto schermo */
    margin: 0; /* Opzionale: rimuove i margini per espansione completa, se desiderato */
}
#who-we-are {
    border-radius: 20px; /* Angoli arrotondati */
    border: 2px solid  #fcd707; /* Contorno colorato, usa uno dei tuoi colori */
    
}
#e-shop {
    border-radius: 20px; /* Angoli arrotondati */
    border: 2px solid  #f16100;
    text-align: center;
   
}

#quote {
    border-radius: 20px; /* Angoli arrotondati */
    border: 2px solid #077A76; /* Contorno colorato, usa uno dei tuoi colori */
    border-color: #f16100; /* Colore specificato */
}


/* Stili di base per ciascuna sezione della pagina */
.page {
    padding: 40px; /* Aggiunge spazio intorno al contenuto dentro la sezione */
    margin-top: 100px; /* Aggiunge spazio sopra ogni sezione */
    margin-bottom: 100px; /* Aggiunge spazio sotto ogni sezione */
    border-radius: 20px; /* Angoli arrotondati */
}

#home {
    margin-top: 20px; /* Riduce lo spazio sopra la prima sezione */
    border: 4px solid #077A76; /* Specifica il colore del bordo */
}

@media (max-width: 768px) {
    .page {
        padding: 20px; /* Riduce il padding su dispositivi mobili */
        margin-top: 50px; /* Riduce lo spazio sopra ogni sezione */
        margin-bottom: 50px; /* Riduce lo spazio sotto ogni sezione */
    }

    #home {
        margin-top: 10px; /* Ulteriore riduzione dello spazio sopra la prima sezione per dispositivi mobili */
    }
}


/* Target the h2 element inside the #home section */
#home h2 {
    font-size: calc(24px + 2vw); /* Combina una dimensione base con una porzione della larghezza della viewport */
    text-align: left;
}
/* Responsive base layout */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-family-main);
    background-color: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden; /* Evita lo scroll orizzontale indesiderato */
}

/* Target the h2 element inside the #home section */
#quote h2 {
    font-size: calc(24px + 2vw); /* Combina una dimensione base con una porzione della larghezza della viewport */
    text-align: left;
}

/* Adattamento testo e dimensioni per dispositivi mobili */
@media (max-width: 600px) {
    #who-we-are h2, #story h2, #made-for h2, #e-shop h2, #quote h2, #real-pics h2, #home h2 {
        font-size: 18px; /* Ridimensiona i titoli per dispositivi mobili */
    }

    .gallery__img, .details__img {
        width: 100%; /* Le immagini si adattano alla larghezza del dispositivo */
        height: auto; /* Mantengono le proporzioni */
    }
}

/* Header e GIF animata */
#myHeader {
    position: relative;
    width: 100%;
    height: 100vh; /* Altezza piena su desktop */
    overflow: hidden;
}

#header-gif {
    background-image: url("/migration-assets/165b8a51d4073c39f937.gif");
    background-size: contain;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Ottimizzazioni per dispositivi mobili */
@media (max-width: 768px) {
    #myHeader {
        height: 50vh; /* Riduci l'altezza sull'header per schermi più piccoli */
    }
}

@media (max-width: 480px) {
    #myHeader {
        height: 30vh; /* Altezza ancora minore per schermi molto piccoli */
    }
}



.scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.5); /* Bianco semi-trasparente */
    border: none;
    padding: 10px;
    cursor: pointer;
    transform: translateY(-50%);
    border-radius: 50%; /* Rende i bottoni rotondi */
    width: 60px; /* Specifica una larghezza */
    height: 60px; /* Specifica un'altezza per rendere i bottoni perfettamente circolari */
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-btn:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Più opaco al passaggio del mouse */
}
.left-btn {
    left: 20px;
}

.right-btn {
    right: 20px;
}

.gallery {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.gallery::-webkit-scrollbar {
    display: none; /* Nasconde le scrollbar su Webkit (Chrome, Safari, ecc.) */
}

.gallery__item {
    flex: 0 0 auto;
}

.gallery__img {
    max-height: 600px; /* Imposta l'altezza massima delle GIF */
    width: auto; /* Mantieni le proporzioni delle immagini */
    object-fit: cover; /* Assicura che le immagini coprano l'area assegnata senza perdere le proporzioni */
}

/* Aggiustamenti responsivi */
@media (max-width: 768px) {
    .gallery__img {
        max-height: 400px; /* Riduci l'altezza delle immagini su tablet */
    }
}

/* Rimuovi la modifica al flex-direction per dispositivi sotto i 480px */
@media (max-width: 480px) {
    .gallery__img {
        max-height: 300px; /* Riduci ulteriormente l'altezza delle immagini su dispositivi mobili */
    }
}


/*carusel*/

  figure {
    margin: 0;
  }

  .container {
   
    width: 300px;
    height: 700px;
    text-align: left;
    margin: 0px auto;
    -webkit-perspective: 1500px;
    -webkit-perspective-origin: 50% -25%;
  }

    .carousel {
      -webkit-transform-style: preserve-3d;
      -webkit-transform: translateZ(-540px);
      position: sticky;
      margin: 0;
      width: 400px;
      height: 600px;
      -webkit-transition: 1s;
    }

      .carousel img {
        position: absolute;
        opacity: 1;
        transition: opacity 1s ease; /* Added transition property */
        -webkit-transition: 1s;
        width: 400px;
        height: 600px;
        background:#000000;
      }

      /*menage positioning of the imgs */

      .carousel img:nth-child(1) { -webkit-transform: translateZ(800px) scale(.8); }
      .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(800px) scale(.8);}
      .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(9) { -webkit-transform: rotateY(360deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(10) { -webkit-transform: rotateY(405deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(11) { -webkit-transform: rotateY(450deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(12) { -webkit-transform: rotateY(495deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(13) { -webkit-transform: rotateY(540deg) translateZ(800px) scale(.8); }
      .carousel img:nth-child(14) { -webkit-transform: rotateY(585deg) translateZ(800px) scale(.8); }
        
      @media (max-width: 768px) {
        .container {
          height: 50vh; /* Ridimensiona l'altezza del contenitore del carosello */
        }
      
        .carousel {
          transform: translateZ(-250px); /* Riduci la profondità per evitare distorsioni */
          height: 50vh; /* Adatta l'altezza del carosello */
        }
      
        .carousel img {
          width: auto; /* Mantiene le proporzioni originali delle immagini */
          height: auto; /* Adatta l'altezza per mantenere le proporzioni */
          max-height: 50vh; /* Assicura che le immagini non siano troppo grandi */
        }
      }
/*fine carusel*/
.details {
    display: flex;
    flex-direction: row; /* Mantiene il layout orizzontale */
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px;

  }


.details__item {
    flex: 0 0 auto; /* Gli elementi non cresceranno oltre il loro contenuto */
}

.details__img {
    max-height: 600px; /* Controllo flessibile dell'altezza */
    width: auto; /* Mantiene le proporzioni originali dell'immagine */
    object-fit: cover; /* Assicura che le immagini coprano l'area */
}

/* Aggiustamenti responsivi */
@media (max-width: 768px) {
    .details__img {
        max-height: 400px; /* Riduce l'altezza delle immagini su tablet */
    }
}

@media (max-width: 480px) {
    .details__img {
        max-height: 300px; /* Ulteriore riduzione per dispositivi piccoli */
    }
}
/* fine foto dettagli */

#who-we-are h2,
#story h2,
#made-for h2,
#e-shop h2,
#quote h2,
#real-pics h2 {
  /* Utilizza clamp() per un controllo flessibile su tutte le dimensioni dello schermo */
  font-size: clamp(1.5rem, 4vw + 1rem, 2.5rem); /* Adegua i valori max e min secondo necessità */
  text-align: left;
}

/* Utilizza media queries per adeguamenti specifici su intervalli di larghezza dello schermo */
@media (max-width: 768px) {
    #who-we-are h2,
    #story h2,
    #made-for h2,
    #e-shop h2,
    #quote h2,
    #real-pics h2 {
      font-size: clamp(1.2rem, 6vw + 1rem, 2rem); /* Valori ridotti */
    }
  }

@media (max-width: 480px) {
    #who-we-are h2,
    #story h2,
    #made-for h2,
    #e-shop h2,
    
    #real-pics h2 {
      font-size: font-size clamp(0.8rem, 9vw + 1rem, 1.4rem); /* Ulteriormente ridotti */
    }
  }
  @media (max-width: 480px) {
    #quote h2 {
      font-size: clamp(0.8rem, 9vw + 1rem, 1.4rem); /* Ottimizzato per schermi piccoli come iPhone SE 2020 */
    }
}

.shop-header {
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center items horizontally if needed */
    text-align: center;
}

.email-link {
    background-color: #f0f0f0; /* Light grey background */
    color: #333; /* Dark grey text */
    padding: 10px 20px; /* Button padding */
    text-decoration: none; /* Remove underline from link */
    display: block; /* Make the link occupy its own line */
    width: fit-content; /* Fit the button's width to its content */
    margin: 20px auto 0; /* Margin on top and auto on the sides to center it */
    border-radius: 5px; /* Rounded corners for the button */
    font-weight: bold; /* Bold text */
}

.email-link:hover {
    background-color: #e0e0e0; /* Slightly darker shade for hover effect */
    cursor: pointer; /* Change cursor to indicate it's clickable */
}

/* Footer */
footer {
    background-color: var(--footer-bg-color);
    color: var(--text-color);
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}


/* Stili del piè di pagina */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
}

footer p {
    margin: 0;
    color: var(--text-color);
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow: scroll; /* Ensuring content is still scrollable even without a scrollbar */
}