/* components/staggeredmenu/staggered-menu.css
   Header fijo (logo + botón Menu) y panel lateral que entra en capas escalonadas.
   El padding del header lo define cada página (style.css / trabajo.css). */

/* --- HEADER SUPERIOR --- */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
  mix-blend-mode: difference; /* se ve blanco sobre fondos oscuros y negro sobre claros */
  pointer-events: none; /* el espacio vacío del header deja pasar el scroll y los clics */
}

.site-header > * {
  pointer-events: auto; /* el logo y el botón sí reciben clics */
}

.sm-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  user-select: none;
}

.sm-logo-img { display: block; height: 50px; width: auto; object-fit: contain; }

/* --- BOTÓN MENU / CERRAR --- */
.sm-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.35rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
  background: transparent; color: var(--white); cursor: pointer;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.06em; line-height: 1;
}

/* Las 4 líneas de texto (Menu / Cerrar / Menu / Cerrar) se desplazan hacia arriba dentro de una ventana de 1 línea */
.sm-toggle-textWrap { position: relative; display: inline-block; height: 1em; overflow: hidden; white-space: nowrap; }
.sm-toggle-textInner { display: flex; flex-direction: column; line-height: 1; }
.sm-toggle-line { display: block; height: 1em; line-height: 1; text-transform: uppercase; }

/* Ícono "+" que gira y se convierte en "×" */
.sm-icon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; will-change: transform; }
.sm-icon-line { position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); will-change: transform; }

/* --- CONTENEDOR DEL MENÚ --- */
.staggered-menu-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100dvh; /* dvh: siempre cubre el área visible, aunque cambien las barras del navegador móvil */
  z-index: 8000; /* debajo del header, para que el mix-blend-mode lo vuelva negro */
  pointer-events: none; /* cerrado deja pasar los clics (el JS lo cambia al abrir) */
}

/* Capas de color que entran antes que el panel */
.sm-prelayers { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(300px, 45vw, 550px); pointer-events: none; z-index: 5; opacity: 0; }
.sm-prelayer { position: absolute; top: 0; right: 0; height: 100%; width: 100%; }

/* --- PANEL --- */
.staggered-menu-panel {
  position: absolute; top: 0; right: 0;
  width: clamp(300px, 45vw, 550px); height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  padding: 8em 4vw 4vw 4vw; overflow-y: auto;
  z-index: 10; pointer-events: auto;
  /* Oculto hasta que el JS lo saca de pantalla con GSAP (evita que se vea un instante al cargar).
     Se usa visibility y no transform: un translateX en CSS GSAP lo tomaría como punto de partida
     y el panel quedaría trabado a mitad de camino al abrir. */
  visibility: hidden;
}

.sm-panel-inner { flex: 1; display: flex; flex-direction: column; }
.sm-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; counter-reset: smItem; }
.sm-panel-itemWrap { position: relative; overflow: hidden; line-height: 1.1; padding: 5px 0; }

/* Cada enlace: título + número arriba a la derecha */
.sm-panel-item {
  position: relative;
  display: inline-flex;
  align-items: flex-start; /* el número queda arriba respecto al título */
  color: var(--black);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sm-panel-itemLabel {
  display: inline-block;
  will-change: transform;
  transform-origin: 50% 100%;
}

.sm-panel-item:hover {
  color: var(--cyan);
}

/* Numeración automática (01, 02...). La opacidad la anima el JS con --sm-num-opacity */
.sm-panel-item::after {
  counter-increment: smItem;
  content: "0" counter(smItem);
  position: relative;
  top: 5px;
  margin-left: 12px;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 500;
  color: var(--cyan);
  pointer-events: none;
  opacity: var(--sm-num-opacity, 0);
}

/* --- REDES --- */
.sm-socials-title { margin: auto 0 1rem; padding-top: 3rem; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.sm-socials-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.sm-socials-link { font-size: 1.1rem; font-weight: 500; color: var(--black); text-decoration: none; transition: opacity 0.3s ease, color 0.3s ease; }
.sm-socials-list:hover .sm-socials-link { opacity: 0.4; }
.sm-socials-list:hover .sm-socials-link:hover { opacity: 1; color: var(--cyan); }

@media (max-width: 768px) { .staggered-menu-panel, .sm-prelayers { width: 100%; } }