/* ══════════════════════════════════════════
   MENU — styles
   ══════════════════════════════════════════ */
.lux-hamburger {
   position: fixed;
   top: 24px;
   right: 24px;
   z-index: 9999;
   background: transparent;
   border: none;
   cursor: pointer;
   width: 32px;
   height: 18px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 0;
}

.lux-hamburger span {
   display: block;
   width: 100%;
   height: 1.5px;
   background-color: #ffffff;
   transition:
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.4s;
   transform-origin: center;
}

.lux-hamburger:focus-visible {
   outline: 1px solid rgb(191, 148, 10);
   outline-offset: 4px;
}

.lux-nav-wrapper.menu-open .lux-hamburger span {
   background-color: rgb(191, 148, 10);
}

.lux-nav-wrapper.menu-open .line-top {
   transform: translateY(8px) rotate(45deg);
}

.lux-nav-wrapper.menu-open .line-bottom {
   transform: translateY(-8px) rotate(-45deg);
}

.lux-menu-panel {
   position: fixed;
   top: 0;
   right: 0;
   height: 100vh;
   width: 420px;
   z-index: 9998;
   visibility: hidden;
   overflow: hidden;
   transition: visibility 0.9s;
}

.lux-menu-bg {
   position: absolute;
   inset: 0;
   background: url('/assets/img/marmo.webp') center center / cover no-repeat;
   background-color: #050505;
   transform: translateX(100%);
   transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sfumatura sul bordo sinistro */
.lux-menu-bg::before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 100px;
   background: linear-gradient(to right,
         rgba(5, 5, 5, 1) 0%,
         rgba(191, 148, 10, 0.08) 15%,
         /* Un leggerissimo tocco d'oro a metà */
         transparent 100%);
   z-index: 2;
   pointer-events: none;
}

.lux-menu-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(5, 5, 5, 0.65);
   pointer-events: none;
   z-index: 1;
}

.lux-menu-content {
   position: relative;
   z-index: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
   padding: 60px 50px;
   opacity: 0;
   transform: translateX(40px);
   transition:
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
      opacity 0.5s ease 0.15s;
}

.lux-brand-tag {
   font-size: 10px;
   letter-spacing: 6px;
   color: rgb(191, 148, 10);
   text-transform: uppercase;
   margin-bottom: 40px;
   font-weight: 600;
   text-decoration: none;
   display: block;
}

.lux-menu-center-wrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.lux-links-list {
   display: flex;
   flex-direction: column;
   gap: 28px;
   list-style: none;
}

.lux-item a {
   display: inline-block;
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 3px;
   color: #ffffff;
   text-decoration: none;
   text-transform: uppercase;
   position: relative;
   padding-bottom: 4px;
   transition: color 0.3s;
}

.lux-item a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 1px;
   background-color: rgb(191, 148, 10);
   transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lux-item a:hover,
.lux-item a:focus-visible {
   color: rgb(191, 148, 10);
}

.lux-item a:focus-visible {
   outline: none;
}

.lux-item a:hover::after,
.lux-item a:focus-visible::after {
   width: 100%;
}

.lux-menu-footer {
   margin-top: 60px;
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.2);
}

.lux-nav-wrapper.menu-open .lux-menu-panel {
   visibility: visible;
}

.lux-nav-wrapper.menu-open .lux-menu-bg {
   transform: translateX(0);
}

.lux-nav-wrapper.menu-open .lux-menu-content {
   opacity: 1;
   transform: translateX(0);
}

body.menu-locked {
   overflow: hidden;
}

@media (max-width: 767px) {
   .lux-menu-panel {
      width: 100%;
   }

   .lux-menu-bg {
      border-left: none;
   }

   .lux-menu-content {
      padding: 40px 30px;
   }

   .lux-item a {
      font-size: 18px;
      letter-spacing: 4px;
   }
}

/* ══════════════════════════════════════════
   CONTATTI NEL MENU OVERLAY
   ══════════════════════════════════════════ */
.lux-menu-contacts {
   display: flex;
   align-items: center;
   gap: 24px;
   margin-top: 30px;
   padding-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   /* Linea sottilissima di separazione */
}

.lux-contact-link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.5);
   font-size: 12px;
   font-weight: 300;
   letter-spacing: 1px;
   transition: color 0.4s ease;
}

.lux-contact-link:hover,
.lux-contact-link:focus-visible {
   color: rgb(191, 148, 10);
   /* Diventa oro al passaggio del mouse */
}

.lux-contact-link svg {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   /* Eredita il colore del testo (bianco o oro) */
   fill: none;
   flex-shrink: 0;
}

/* Se da mobile lo schermo è troppo piccolo, li metto in colonna */
@media (max-width: 380px) {
   .lux-menu-contacts {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
   }
}