/**
 * NAO STUDIO — NIVEL 0: PANTALLA DE PRESENTACIÓN
 * Hereda geometría base de .nao-view-stage y header de ui-elements.css
 */

.nao-intro-stage {
  justify-content: space-between;
  align-items: center;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 5vw, 4rem);
  padding-top: calc(clamp(2rem, 5vh, 4rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(2.5rem, 6vh, 4.5rem) + env(safe-area-inset-bottom, 0px));
}

/* En Nivel 0 el isotipo reposa más tenue (0.08) para ceder protagonismo al bloque central */
.nao-intro-stage .nao-isotype-link {
  --iso-opacity: 0.08;
}

/* ==========================================================================
   COREOGRAFÍA DE ENTRADA (ASCENSO DESDE ABAJO) Y SALIDA (DESPEGUE ESCALONADO)
   ========================================================================== */
.nao-intro-stage.is-mounted {
  animation: naoIntroRiseFromBelow 780ms var(--ease-boutique) forwards;
}

.nao-intro-stage.is-mounted .nao-brand-lockup {
  animation: naoBrandRiseUp 760ms var(--ease-boutique) backwards;
}

@keyframes naoIntroRiseFromBelow {
  from {
    opacity: 0;
    transform: translateY(90px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes naoBrandRiseUp {
  from {
    opacity: 0;
    transform: translateY(90px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Salida escalonada hacia arriba al navegar al Nivel 1 */
.nao-intro-stage.is-exiting .nao-brand-header {
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 420ms var(--ease-boutique), opacity 360ms var(--ease-boutique);
}

.nao-intro-stage.is-exiting .nao-brand-lockup {
  transform: translateY(-170px) scale(0.95) !important;
  opacity: 0 !important;
  transition: transform 520ms var(--ease-boutique) 40ms, opacity 460ms var(--ease-boutique) 40ms;
}

.nao-intro-stage.is-exiting .nao-intro-triad {
  transform: translateY(-90px);
  opacity: 0;
  transition: transform 480ms var(--ease-boutique) 100ms, opacity 420ms var(--ease-boutique) 100ms;
}

.nao-intro-stage.is-exiting .nao-intro-footer {
  transform: translateY(-60px);
  opacity: 0;
  transition: transform 420ms var(--ease-boutique) 140ms, opacity 360ms var(--ease-boutique) 140ms;
}

/* ==========================================================================
   ZONA CENTRAL: LOGOTIPO, DESCRIPTOR "STUDIO" & TRÍADA DOCK
   ========================================================================== */
.nao-intro-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  transform: translateY(-2.8vh);
}

.nao-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(0.8rem, 1.8vh, 1.4rem);
  will-change: transform;
}

.nao-intro-logo-wrap {
  width: clamp(220px, 32vw, 380px);
}

.nao-intro-logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.5));
}

.nao-intro-descriptor {
  font-family: var(--font-n0-family);
  font-weight: var(--font-n0-weight);
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: var(--font-n0-tracking);
  text-transform: var(--font-n0-transform);
  color: var(--text-secondary);
  margin-left: var(--font-n0-tracking);
  margin-top: clamp(2.6rem, -11.5vh, -3.4rem);
  margin-bottom: clamp(1.5rem, 8.2vh, 2.0rem);
  opacity: 0.95;
}

/* Tríada de disciplinas con efecto dock horizontal elástico */
.nao-intro-triad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(0.6rem, 1.2vw, 1.2rem);
  color: var(--text-secondary);
  padding: 0.5rem 0;
}

.nao-intro-discipline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  font-family: var(--font-n3-family);
  font-weight: var(--font-n3-weight-bold);
  letter-spacing: var(--font-n3-tracking);
  font-size: clamp(0.86rem, 1.35vw, 1rem);
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: 
    font-size 0.35s var(--ease-boutique),
    padding 0.35s var(--ease-boutique),
    color 0.25s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    text-shadow 0.35s var(--ease-boutique),
    opacity 0.25s ease;
}

.nao-intro-discipline:hover,
.nao-intro-discipline:focus-visible {
  font-size: clamp(0.98rem, 1.6vw, 1.18rem);
  padding: 0.35rem 1.1rem;
  color: var(--text-primary);
  background-color: rgba(98, 149, 179, 0.12);
  border-color: rgba(118, 180, 207, 0.25);
  text-shadow: 0 0 16px rgba(118, 180, 207, 0.45);
}

.nao-intro-triad:hover .nao-intro-discipline:not(:hover) {
  opacity: 0.45;
}

.nao-intro-triad:hover .nao-dot-sep {
  opacity: 0.3;
}

/* ==========================================================================
   ZONA INFERIOR: BOTÓN MAGNÉTICO (BOX PROXIMITY)
   ========================================================================== */
.nao-intro-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.nao-magnetic-bound {
  position: relative;
  padding: 1.5rem;
  margin: -1.5rem;
}

.nao-magnetic-btn {
  font-family: var(--font-n3-family);
  font-weight: var(--font-n3-weight-bold);
  letter-spacing: var(--font-n3-tracking-btn);
  padding: clamp(0.95rem, 1.8vh, 1.15rem) clamp(2rem, 4vw, 3rem);
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  text-transform: uppercase;
  will-change: transform;
  overflow: hidden;
  box-shadow: 0 10px 28px -6px rgba(6, 11, 20, 0.7);
  transition: 
    border-color var(--time-fast) ease,
    background-color var(--time-fast) ease,
    box-shadow var(--time-norm) var(--ease-boutique);
}

.nao-magnetic-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(118, 180, 207, 0.15) 0%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity var(--time-norm) ease;
}

.nao-magnetic-btn:hover {
  border-color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--control-hover) 45%, transparent);
  box-shadow: 
    0 14px 34px -4px rgba(6, 11, 20, 0.85),
    0 0 24px -2px rgba(98, 149, 179, 0.22);
}

.nao-magnetic-btn:hover::before {
  opacity: 1;
}

.nao-magnetic-btn:active {
  background-color: var(--control-active);
}

.nao-magnetic-btn-text {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.nao-magnetic-btn-icon {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  stroke: var(--accent-secondary);
  transition: transform var(--time-norm) var(--ease-boutique);
}

.nao-magnetic-btn:hover .nao-magnetic-btn-icon {
  transform: translateX(3px) rotate(45deg);
}

@media (max-width: 640px) {
  .nao-intro-triad {
    flex-direction: column;
    gap: 0.35rem;
  }
  
  .nao-intro-triad .nao-dot-sep {
    display: none;
  }

  .nao-intro-discipline {
    padding: 0.6rem 1.2rem;
    min-height: 44px;
  }
  
  .nao-magnetic-btn {
    width: 100%;
    max-width: 320px;
  }
}