/**
 * NAO STUDIO — VISTA DE CATEGORÍA (NIVEL 2)
 * Hereda geometría base de .nao-view-stage y primitivas de ui-elements.css
 */

.nao-category-stage {
  justify-content: center;
  align-items: center;
  padding-bottom: clamp(75px, 11vh, 105px);
  padding-top: clamp(20px, 4vh, 40px);
}

/* ==========================================================================
   1. CAJA CENTRAL: TÍTULO CON ENTRADA PAUSADA Y SALIDA SUPERIOR
   ========================================================================== */
.nao-category-center-box {
  width: 88vw;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 2.4vh, 1.8rem);
  z-index: 10;
}

.nao-category-title-block {
  text-align: center;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  will-change: transform, opacity;
  transition: 
    transform 850ms var(--ease-boutique), 
    opacity 750ms var(--ease-boutique);
}

.nao-category-stage.is-entering .nao-category-title-block {
  opacity: 0;
  transform: translateY(-45px);
}

.nao-category-stage.is-mounted .nao-category-title-block {
  opacity: 1;
  transform: translateY(0);
}

.nao-category-stage.is-exiting .nao-category-title-block {
  opacity: 0;
  transform: translateY(-40px);
  transition: transform 380ms var(--ease-boutique), opacity 320ms var(--ease-boutique);
}

.nao-category-heading {
  font-family: var(--font-n1-family);
  font-weight: var(--font-n1-weight);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--font-n1-tracking);
  margin: 0;
  line-height: 1.1;
}

.nao-category-subheading {
  font-family: var(--font-n2-family);
  font-weight: var(--font-n2-weight);
  font-size: clamp(0.85rem, 1.05vw, 0.98rem);
  letter-spacing: var(--font-n2-tracking);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  text-align: center;
  max-width: 600px;
}

/* ==========================================================================
   2. CONTENEDOR DE FILAS (ACORDEÓN DE 220ms Y DESFILE ESCALONADO)
   ========================================================================== */
.nao-category-rows {
  width: 100%;
  height: clamp(410px, 49vh, 520px);
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.nao-category-row {
  position: relative;
  flex: 1;
  min-height: clamp(70px, 8.5vh, 82px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: 
    flex 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms var(--ease-boutique),
    opacity 750ms var(--ease-boutique);
  will-change: flex, transform, opacity;
}

.nao-category-row:last-child {
  border-bottom: none;
}

/* Entrada escalonada desde la izquierda */
.nao-category-stage.is-entering .nao-category-row {
  opacity: 0;
  transform: translateX(-90px);
}

.nao-category-stage.is-mounted .nao-category-row {
  opacity: 1;
  transform: translateX(0);
}

/* Flex mantiene 0s de delay; el escalonamiento aplica únicamente a transform y opacity */
.nao-category-stage.is-mounted .nao-category-row:nth-child(1) { transition-delay: 0s, 120ms, 120ms; }
.nao-category-stage.is-mounted .nao-category-row:nth-child(2) { transition-delay: 0s, 240ms, 240ms; }
.nao-category-stage.is-mounted .nao-category-row:nth-child(3) { transition-delay: 0s, 360ms, 360ms; }
.nao-category-stage.is-mounted .nao-category-row:nth-child(4) { transition-delay: 0s, 480ms, 480ms; }

/* Salida rápida hacia la derecha en 380ms */
.nao-category-stage.is-exiting .nao-category-row {
  opacity: 0;
  transform: translateX(90px);
  pointer-events: none;
  transition: transform 380ms var(--ease-boutique), opacity 340ms var(--ease-boutique);
}

@media (hover: hover) and (pointer: fine) {
  .nao-category-rows:hover .nao-category-row {
    flex: 0.85;
    transition-delay: 0s !important;
  }
  
  .nao-category-rows .nao-category-row:hover,
  .nao-category-row.is-active {
    flex: 2.2 !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   3. PARALELOGRAMO CINÉTICO Y VIAJE DEL NÚMERO
   ========================================================================== */
.nao-row-parallelogram-morph {
  position: absolute;
  top: clamp(8px, 1.1vh, 12px);
  bottom: clamp(8px, 1.1vh, 12px);
  left: clamp(1rem, 2.5vw, 2rem);
  width: clamp(85px, 8vw, 115px);
  background-color: var(--row-accent);
  clip-path: polygon(clamp(14px, 1.8vw, 22px) 0, 100% 0, calc(100% - clamp(14px, 1.8vw, 22px)) 100%, 0% 100%);
  z-index: 2;
  pointer-events: none;
  transition: 
    top 220ms cubic-bezier(0.16, 1, 0.3, 1),
    bottom 220ms cubic-bezier(0.16, 1, 0.3, 1),
    left 240ms cubic-bezier(0.16, 1, 0.3, 1),
    width 240ms cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 240ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: top, bottom, left, width, clip-path;
}

@media (hover: hover) and (pointer: fine) {
  .nao-category-row:hover .nao-row-parallelogram-morph,
  .nao-category-row.is-active .nao-row-parallelogram-morph {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, calc(100% - clamp(35px, 4.5vw, 65px)) 100%, 0% 100%);
  }
}

.nao-row-num-anchor {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: clamp(1rem, 2.5vw, 2rem);
  width: clamp(85px, 8vw, 115px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
  transition: 
    left 320ms var(--ease-boutique),
    width 320ms var(--ease-boutique);
  will-change: left, width;
}

.nao-row-num {
  font-family: var(--font-n4-family);
  font-weight: var(--font-n4-weight-bold);
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  color: var(--surface-bg);
  letter-spacing: var(--font-n4-tracking);
  line-height: 1;
  transform: translateX(-1px);
  transition: 
    font-size 320ms var(--ease-boutique),
    transform 320ms var(--ease-boutique);
  will-change: font-size, transform;
}

@media (hover: hover) and (pointer: fine) {
  .nao-category-row:hover .nao-row-num-anchor,
  .nao-category-row.is-active .nao-row-num-anchor {
    left: calc(100% - clamp(140px, 16vw, 220px));
    width: auto;
  }

  .nao-category-row:hover .nao-row-num,
  .nao-category-row.is-active .nao-row-num {
    font-size: clamp(3.5rem, 5.5vw, 5rem);
    transform: none;
  }
}

/* ==========================================================================
   4. CONTENIDO EDITORIAL E INVERSIÓN CROMÁTICA
   ========================================================================== */
.nao-row-editorial {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: clamp(7.5rem, 11.5vw, 10.5rem);
  max-width: 65%;
  transition: margin-left 320ms var(--ease-boutique);
}

.nao-row-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-n4-family);
  font-style: var(--font-n4-style);
  font-size: clamp(0.72rem, 0.9vw, 0.84rem);
  color: var(--text-muted);
  letter-spacing: var(--font-n4-tracking);
  text-transform: uppercase;
  transition: color var(--time-norm) var(--ease-boutique);
}

.nao-row-title {
  font-family: var(--font-n1-family);
  font-weight: var(--font-n1-weight);
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: var(--font-n1-tracking);
  margin: 0.2rem 0 0 0;
  transition: 
    color var(--time-norm) var(--ease-boutique), 
    font-size var(--time-norm) var(--ease-boutique);
}

.nao-row-expanded-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: 
    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    max-height 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nao-row-summary {
  font-family: var(--font-n3-family);
  letter-spacing: var(--font-n3-tracking);
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0.4rem 0 0 0;
  max-width: 560px;
  text-align: left;
  transition: color var(--time-norm) var(--ease-boutique);
}

.nao-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nao-row-tag {
  font-family: var(--font-n3-family);
  letter-spacing: var(--font-n3-tracking);
  font-size: clamp(0.65rem, 0.8vw, 0.75rem);
  padding: 0.25rem 0.65rem;
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--surface-card) 60%, transparent);
  transition: 
    color var(--time-norm) var(--ease-boutique),
    background-color var(--time-norm) var(--ease-boutique),
    border-color var(--time-norm) var(--ease-boutique);
}

@media (hover: hover) and (pointer: fine) {
  .nao-category-row:hover .nao-row-editorial,
  .nao-category-row.is-active .nao-row-editorial {
    margin-left: clamp(2rem, 3.5vw, 3.5rem);
  }

  .nao-category-row:hover .nao-row-title,
  .nao-category-row.is-active .nao-row-title {
    color: var(--surface-bg) !important;
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  }

  .nao-category-row:hover .nao-row-meta,
  .nao-category-row.is-active .nao-row-meta {
    color: color-mix(in srgb, var(--surface-bg) 80%, black) !important;
  }

  .nao-category-row:hover .nao-dot-sep,
  .nao-category-row.is-active .nao-dot-sep {
    color: var(--surface-bg) !important;
  }

  .nao-category-row:hover .nao-row-summary,
  .nao-category-row.is-active .nao-row-summary {
    color: color-mix(in srgb, var(--surface-bg) 92%, black) !important;
  }

  .nao-category-row:hover .nao-row-tag,
  .nao-category-row.is-active .nao-row-tag {
    color: var(--surface-bg) !important;
    background-color: color-mix(in srgb, var(--surface-bg) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--surface-bg) 28%, transparent) !important;
  }

  .nao-category-row:hover .nao-row-expanded-info,
  .nao-category-row.is-active .nao-row-expanded-info {
    opacity: 1;
    transform: translateY(0);
    max-height: 150px;
    pointer-events: auto;
  }
}

/* ==========================================================================
   5. VENTANA FLOTANTE SNELLENBERG CALIBRADA (255px × 165px)
   ========================================================================== */
.nao-category-preview-floating {
  position: fixed;
  top: 0;
  left: 0;
  width: 255px;
  height: 165px;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 60;
  transform: translate3d(var(--fp-x, -500px), var(--fp-y, -500px), 0) scale(var(--fp-scale, 0));
  transform-origin: center center;
  transition: opacity 220ms var(--ease-boutique);
  will-change: transform;
}

.nao-preview-reel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 350ms var(--ease-boutique);
  will-change: transform;
}

.nao-preview-item {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--surface-primary);
}

.nao-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nao-row-mobile-image {
  display: none;
}

/* ==========================================================================
   6. ADAPTACIÓN RESPONSIVA (MÓVIL / TÁCTIL)
   ========================================================================== */
@media (hover: none) or (max-width: 768px) {
  .nao-category-preview-floating {
    display: none !important;
  }

  .nao-category-stage {
    height: auto;
    min-height: calc(100dvh - 75px);
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 5rem;
    padding-bottom: 95px;
  }

  .nao-category-center-box {
    width: 92vw;
  }

  .nao-category-rows {
    height: auto;
    display: block;
  }

  .nao-category-row {
    flex: none;
    min-height: 85px;
    height: auto;
    padding: 1rem 0;
  }

  .nao-category-row.is-active {
    min-height: 360px;
    background-color: color-mix(in srgb, var(--surface-card) 60%, transparent);
  }

  .nao-row-editorial {
    margin-left: clamp(6.5rem, 18vw, 8rem);
    max-width: 68%;
  }

  .nao-row-expanded-info {
    max-height: 0;
  }

  .nao-category-row.is-active .nao-row-expanded-info {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nao-row-mobile-image {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0.8rem;
    border: 1px solid var(--border-subtle);
  }

  .nao-row-mobile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}