/* Scrollbar unica */
   ::-webkit-scrollbar {
       width: 4px;
   }

   ::-webkit-scrollbar-track {
       background: #1a1a1a;
   }

   ::-webkit-scrollbar-thumb {
       background: #be3bff;
       border-radius: 2px;
   }

   body {
       background-color: rgba(0, 0, 0, 0.987);
       background-repeat: no-repeat;
       background-position: center;
       background-attachment: fixed;
       background-size: 50%;
   }

   .nav-container {
       position: fixed;
       background: rgba(0, 0, 0, 0.95);
       top: 0;
       right: 0;
       gap: 1rem;
       padding: 1rem;
       z-index: 1000;
       display: flex;
       justify-content: flex-end;
       width: auto;
   }

   .nav-item {
       color: white;
       text-decoration: none;
       font-family: ABCDiatype-Medium, sans-serif;
       font-weight: bold;
       margin-left: 2rem;
       font-size: 0.9rem;
       transition: color 0.3s ease;
   }

   .nav-item:hover {
       color: #b400fb;
   }

   .splash-screen {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
        background-color: rgb(143, 20, 210);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       animation: fadeOut 3s forwards;
   }

   .splash-text {
       color: white;
       font-size: 3rem;
       font-family: ABCDiatype-Medium, sans-serif;
       font-weight: bold;
       font-style: italic;
       animation: fadeIn 1s ease-in;
   }

   @keyframes fadeOut {
       0% {
           opacity: 1;
           visibility: visible;
       }

       80% {
           opacity: 1;
           visibility: visible;
       }

       100% {
           opacity: 0;
           visibility: hidden;
       }
   }

   @keyframes fadeIn {
       0% {
           opacity: 0;
       }

       100% {
           opacity: 1;
       }
   }

   /* Aggiunta media query per dispositivi mobili */
   @media screen and (max-width: 768px) {
       .splash-text {
           font-size: 2rem;
       }
   }

  @media screen and (max-width: 768px) {
      .hamburger-menu {
          display: flex;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1001;
          cursor: pointer;
          background: none;
          padding: 1rem;
          width: 60px;
      }

      .bars-container {
          display: flex;
          flex-direction: column;
          gap: 5px;
          width: 25px;
          margin: 0 auto;
      }

      .bar {
          width: 25px;
          height: 3px;
          background-color: white;
          transition: 0.3s;
      }

      .nav-container {
          display: none;
          position: fixed;
          top: 0;
          right: -100%;
          width: 250px;
          height: 100vh;
          background: #b400fb;
          padding-top: 60px;
          transition: 0.3s;
          flex-direction: column;
          gap: 1rem;
      }

      .nav-container.active {
          right: 0;
          display: flex;
      }

      /* Hamburger animation */
      .hamburger-menu.active .bar:first-child {
          transform: rotate(-45deg) translate(-5px, 6px);
      }

      .hamburger-menu.active .bar:nth-child(2) {
          opacity: 0;
      }

      .hamburger-menu.active .bar:last-child {
          transform: rotate(45deg) translate(-5px, -6px);
      }
  }

  @media screen and (max-width: 780px) {
      .nav-container {
          width: 100%;
          padding: 0;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          background: #b400fb;
          display: none;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          gap: 2rem;
      }

      .nav-container.active {
          display: flex;
      }

      .nav-container .nav-item {
          color: white;
          font-size: 2rem;
          margin: 2rem;
          text-align: center;
          width: 100%;

      }
  }

   .artwork-container {
       position: fixed;
       justify-content: center;
       align-items: center;
       width: 90px;
       height: auto;
       top: 0;
       left: 0;
       margin-left: 0.5rem;

   }

   .artwork-container img {
       max-width: 100%;
       height: auto;
       cursor: pointer;
   }

   .images-container {
       display: flex;
       justify-content: center;
       gap: 40px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       margin-top: 0px;
   }

   .image-box {
       position: relative;
        display: inline-block;
       border: solid 1px #cccccc;
       margin: 0;
       padding: 0;
       will-change: transform;
       transform: translateZ(0);
   }

   .image-box video {
       width: 300px;
       height: auto;
       cursor: pointer;
       display: block;
   }

   .image-box2 img {
       width: 300px;
       height: auto;
       display: block;
       cursor: pointer;
   }
 
   /* Bottom Player Styles */
   .bottom-player {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       width: 100vw;
       height: 60px;
       background: rgb(0, 0, 0);
       z-index: 1000;
       border: 1px solid #b400fb;
       border-bottom: none;
       box-sizing: border-box;
   }

   .bottom-player .custom-player {
       position: relative;
       width: 100%;
       height: 60px;
   }

   .bottom-player .controls {
       position: absolute;
       left: 0;
       top: 0;
       height: 60px;
       display: flex;
       align-items: center;
       font-size: 0;
       white-space: nowrap;
   }

   .control-container {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 60px;
       height: 60px;
       background: white;
       cursor: pointer;
       margin: 0;
       border-right: 1px solid #eee;
   }

   .control-container:last-child {
       border-right: none;
   }

   .bottom-player .control-button {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
       background: white;
       cursor: pointer;
       margin: 0;
   }

   .bottom-player .control-button i {
       color: #080808;
       font-size: 18px;
   }

   .bottom-player .control-button:hover {
       background: #f0f0f0;
   }

   .bottom-player .control-button i:hover {
       color: #b400fb;
   }

   .bottom-player .track-info {
       position: absolute;
       left: 200px;
       top: 50%;
       transform: translateY(-50%);
       padding-left: 20px;
   }

   .bottom-player .song-info {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }

   .bottom-player .title-row {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .bottom-player .song-title {
       font-size: 14px;
       color: white;
       font-weight: bold;
   }

   .bottom-player .artist-name {
       font-size: 12px;
       color: #999;
       margin-left: 8px;
   }

   .bottom-player .time-row {
       font-size: 11px;
       color: #999;
       margin-top: 2px;
   }

   .bottom-player .time-row span {
       margin: 0 2px;
   }

   .bottom-player .progress-container {
       position: absolute;
       bottom: 2px;
       left: 200px;
       width: calc(100% - 220px);
       height: 2px;
       background: #333;
       cursor: pointer;
   }

   .bottom-player .progress-bar {
       width: 100%;
       height: 100%;
       background: #333;
       position: relative;
   }

   .bottom-player .progress {
       position: absolute;
       left: 0;
       top: 0;
       width: 0;
       height: 100%;
       background: #b400fb;
       transition: width 0.1s linear;
   }

   .bottom-player .volume-container {
       position: absolute;
       right: 120px;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .bottom-player .volume-container i {
       color: white;
       font-size: 14px;
       cursor: pointer;
   }

   .bottom-player .volume-container input[type="range"] {
       width: 100px;
       height: 4px;
       -webkit-appearance: none;
       background: #333;
       border-radius: 2px;
       cursor: pointer;
   }

   .bottom-player .volume-container input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
       width: 12px;
       height: 12px;
       background: #b400fb;
       border-radius: 50%;
       cursor: pointer;
   }

   .bottom-player .volume-container input[type="range"]::-moz-range-thumb {
       width: 12px;
       height: 12px;
       background: #b400fb;
       border-radius: 50%;
       cursor: pointer;
       border: none;
   }

   .interactive-section {
       min-height: 100vh;
       width: 100%;
       background-color: rgba(255, 255, 255, 0.987);
       position: relative;
       opacity: 0;
       transition: opacity 0.5s ease;
       margin-top: 100vh;
   }

   .interactive-section.visible {
       opacity: 1;
   }

   .instructions {
       position: absolute;
       bottom: 65px;
       left: 50%;
       transform: translateX(-50%);
       color: #000;
       font-family: ABCDiatype-Medium, sans-serif;
       text-align: center;
       padding: 10px;
       z-index: 1;
   }

   #scene-container {
       width: 100%;
       height: 100vh;
   }

   /* Media Queries */
   @media screen and (max-width: 1200px) {
       .images-container {
           justify-content: center;

           margin-top: 0px;
       }

       .image-box video {
           width: 300px;
       }
   }

   @media screen and (max-width: 780px) {
       .nav-container {
           padding: 0.5rem;
           gap: 1rem;
       }

       .artwork-container {
           width: 80px;
       }

       .image-box video {
           width: 250px;
       }

       /* Nascondi volume su mobile */
       .bottom-player .volume-container {
           display: none;
       }

       /* Aggiusta la progress bar senza il volume */
       .bottom-player .progress-container {
           width: calc(100% - 120px);
       }

       .instructions {
           bottom: 70px;
           padding: 0 20px;
           font-size: 14px;
       }
   }

   @media screen and (max-width: 768px) {
       .nav-container {
           padding: 0.5rem;
           gap: 1rem;
       }

       .artwork-container {
           width: 60px;
           margin-left: 0.5rem;
       }

       .image-box video {
           width: 300px;
       }

       #scene-container {
           height: 35vh;
       }



       .instructions {
           font-size: 12px;
           text-align: center;
           padding: 0 10px;
       }
   }

   @media screen and (max-width: 400px) {


       .artwork-container {
           width: 50px;

       }


   }

   @media screen and (max-height: 600px) {
       .images-container {
           margin-top: 80px;
       }

       .instructions {
           bottom: 100px;
       }
   }

   /* Orientamento landscape su mobile */
   @media screen and (max-height: 450px) and (orientation: landscape) {




       .instructions {
           bottom: 70px;
           font-size: 11px;
       }
   }