/* ==============================================
   MENU EXACTO M+M - SANTACROCE RUSZNER
   ============================================== */

/* Reset focus styles for all menu buttons */
.menu-overlay button:focus,
.menu-overlay button:focus-visible,
.menu-overlay a:focus,
.menu-overlay a:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Fullscreen Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 100000; /* Below header (100001) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.84s cubic-bezier(0.645, 0.045, 0.355, 1), 
              visibility 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Background image blur */
.menu-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/images/projects/fragata-hero.jpg') center/cover;
  filter: blur(40px) brightness(0.3);
  opacity: 0.4;
  z-index: -1;
  transition: opacity 1.12s ease;
}

/* Menu Container - Centrado inicial */
.menu-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 60px;
  justify-content: center;
  transition: transform 1.12s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(135px);
}

/* Estado con submenú abierto - se mueve a la izquierda con transform */
.menu-container.submenu-open {
  transform: translateX(-6%);
}

.menu-container.third-open {
  padding-left: 8%;
}

/* Menu Columns */
.menu-column:first-child {
  position: relative;
  min-width: 350px;
  left: -100px;
  opacity: 0;
  transform: translateX(30px);
  animation: slideInColumn 0.84s cubic-bezier(0.645, 0.045, 0.355, 1) 0.68s forwards;
}

@keyframes slideInColumn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Segunda columna - aparece cuando hay submenu */
.menu-column:nth-child(2) {
  position: absolute;
  left: 40%;
  padding: 0 40px;
  min-width: 350px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(50px);
  transition: all 0.84s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-container.submenu-open .menu-column:nth-child(2) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* Tercera columna */
.menu-column:nth-child(3) {
  display: none;
  position: relative;
  padding: 0 40px;
  min-width: 350px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(20px);
}

.menu-container.third-open .menu-column:nth-child(3) {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: all 0.84s cubic-bezier(0.22, 1, 0.36, 1) 0.56s;
}

/* Línea divisoria solo cuando hay múltiples columnas */
.menu-container.submenu-open .menu-column:first-child::after,
.menu-container.third-open .menu-column:nth-child(2)::after {
  content: '';
  position: absolute;
  right: 0;
  top: -75px;
  width: 1px;
  height: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: drawLine 0.84s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@keyframes drawLine {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 550px;
    opacity: 1;
  }
}

/* Menu Items - Primera columna */
.menu-items {
  list-style: none;
  margin: 0;
  padding: 25%;
}

.menu-item {
  margin-bottom: 36px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(80px);
}

.menu-overlay.active .menu-item {
  visibility: visible;
  animation: slideFromRight 1.12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.14s + var(--item-index) * 0.21s);
}

.menu-item:nth-child(1) { --item-index: 0; }
.menu-item:nth-child(2) { --item-index: 1; }
.menu-item:nth-child(3) { --item-index: 2; }
.menu-item:nth-child(4) { --item-index: 3; }

@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.menu-item:first-child {
  margin-top: 0;
}

.menu-link {
  color: #888;
  font-size: 34px;
  font-weight: 300;
  text-decoration: none;
  letter-spacing: -0.5px;
  display: block;
  transition: color 0.56s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  text-align: left;
  width: 100%;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  transform: translateX(0);
}

.menu-link:focus {
  outline: none;
}

.menu-link:hover {
  color: #fff;
  transform: translateX(5px);
}

.menu-link.active {
  color: #fff;
  transform: translateX(10px);
}

/* Submenu Items - Segunda columna */
.submenu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  display: none;
}

/* Alineación específica para cada submenú */
#submenu-services {
  margin-top: 0;
}

#submenu-portfolio {
  margin-top: 70px;
}

.submenu-items.show {
  display: block;
  opacity: 1;
}

.submenu-item {
  margin-bottom: 32px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(20px);
}

.submenu-items.show .submenu-item {
  visibility: visible;
  animation: slideFromRight 1.12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.4s + var(--item-index) * 0.32s);
}

.submenu-item:nth-child(1) { --item-index: 0; }
.submenu-item:nth-child(2) { --item-index: 1; }
.submenu-item:nth-child(3) { --item-index: 2; }
.submenu-item:nth-child(4) { --item-index: 3; }
.submenu-item:nth-child(5) { --item-index: 4; }

.submenu-link {
  color: #666;
  font-size: 28px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  text-align: left;
  width: 100%;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.submenu-link:focus {
  outline: none;
}

.submenu-link:hover {
  color: #fff;
  transform: translateX(3px);
}

/* Third Level - Tercera columna */
.third-items {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  display: none;
}

/* Alineación específica para tercer nivel */
#third-residential {
  margin-top: 70px;
}

#third-commercial {
  margin-top: 102px;
}

#third-instalaciones {
  margin-top: 134px;
}

.third-items.show {
  display: block;
  opacity: 1;
}

.third-item {
  margin-bottom: 22px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(80px);
}

.third-items.show .third-item {
  visibility: visible;
  animation: slideFromRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.5s + var(--item-index) * 0.08s);
}

.third-item:nth-child(1) { --item-index: 0; }
.third-item:nth-child(2) { --item-index: 1; }
.third-item:nth-child(3) { --item-index: 2; }
.third-item:nth-child(4) { --item-index: 3; }
.third-item:nth-child(5) { --item-index: 4; }
.third-item:nth-child(6) { --item-index: 5; }
.third-item:nth-child(7) { --item-index: 6; }

.third-link {
  color: #555;
  font-size: 24px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.third-link:hover {
  color: #ccc;
  transform: translateX(2px);
}

/* Menu Header con logo y nombre */
.menu-header {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  z-index: 10;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInHeader 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

@keyframes fadeInHeader {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-logo {
  color: #FF8C00;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: -3px;
}

.menu-company {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Footer del menú */
.menu-footer {
  position: absolute;
  bottom: 50px;
  left: 60px;
  right: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInFooter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
}

@keyframes fadeInFooter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer-award {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInAward 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: calc(0.8s + var(--award-index) * 0.1s);
}

.footer-award:nth-child(1) { --award-index: 0; }
.footer-award:nth-child(2) { --award-index: 1; }
.footer-award:nth-child(3) { --award-index: 2; }

@keyframes slideInAward {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer-text {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  letter-spacing: 0.5px;
}

.social-link {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
  .menu-container {
    padding: 40px 20px;
  }
  
  .menu-column {
    min-width: 100%;
    padding: 0 20px;
  }
  
  .menu-link {
    font-size: 28px;
  }
  
  .submenu-link {
    font-size: 22px;
  }
  
  .third-link {
    font-size: 18px;
  }
  
  .menu-footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .menu-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .menu-logo {
    font-size: 36px;
  }
  
  .menu-company {
    font-size: 12px;
  }
}