/* src/styles/staggered-menu.css */
/*
 * Estado abierto del menú escalonado.
 *
 * Va en una hoja propia y no en el sistema de diseño porque el compilador de
 * clases del editor descarta estas reglas: las que dependen de una clase que
 * ningún nodo lleva (.sm-open, .is-open) desaparecen enteras, y de las
 * .sm-cb:checked ~ … solo emitió una de diez. Aquí el CSS se sirve tal cual.
 *
 * Abrir y cerrar es un <input type="checkbox"> oculto con su <label>, así que
 * el menú funciona sin JavaScript. La coreografía reproduce la del
 * StaggeredMenu de React Bits con transiciones y retardos:
 *
 *   capas 0 s y 0,07 s → panel 0,15 s → líneas 0,25 s (+0,1 s cada una) →
 *   numeración 0,35 s (+0,08 s) → contacto 0,41 s (+0,08 s)
 */

.sm-cb:checked ~ .hdr .sm-toggle-textInner {
  transform: translateY(-50%);
}

.sm-cb:checked ~ .hdr .sm-icon {
  transform: rotate(225deg);
}

.sm-cb:checked ~ .hdr {
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sm-cb:checked ~ .sm-prelayers .sm-prelayer {
  transform: translateX(0);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.sm-cb:checked ~ .sm-prelayers .sm-prelayer:nth-child(2) {
  transition-delay: 0.07s;
}

.sm-cb:checked ~ .sm-panel {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, visibility 0s linear 0s;
}

.sm-cb:checked ~ .sm-panel .sm-panel-itemLabel {
  transform: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.25s + var(--i, 0) * 0.1s);
}

.sm-cb:checked ~ .sm-panel .sm-panel-item::after {
  opacity: 1;
  transition: opacity 0.6s ease;
  transition-delay: calc(0.35s + var(--i, 0) * 0.08s);
}

.sm-cb:checked ~ .sm-panel .sm-socials-title {
  opacity: 1;
  transition: opacity 0.5s ease 0.41s;
}

.sm-cb:checked ~ .sm-panel .sm-socials-link {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
  transition-delay: calc(0.45s + var(--i, 0) * 0.08s);
}

@media (prefers-reduced-motion: reduce) {
  .sm-panel,
  .sm-prelayer,
  .sm-panel-itemLabel,
  .sm-socials-link,
  .sm-toggle-textInner,
  .sm-icon,
  .sm-cb:checked ~ .sm-panel,
  .sm-cb:checked ~ .sm-prelayers .sm-prelayer,
  .sm-cb:checked ~ .sm-panel .sm-panel-itemLabel,
  .sm-cb:checked ~ .sm-panel .sm-socials-link {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}