/* ==========================================================================
   PEAK® — chrome.css
   Todo lo que persiste o cubre: loader de entrada, transición de marca,
   navegación, menú, cursor y pie. Nada de esto pertenece a una página.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ESTADOS PREVIOS  ·  sólo si hay JS, para que sin JS todo se lea igual
   -------------------------------------------------------------------------- */

/* El salto de linea es estructura, no animacion: va siempre. Si dependiera
   de `.js`, sin JavaScript los <span> quedarian en linea y las palabras de
   dos lineas seguidas se pegarian ("Alturaen cada cuadro"). */
.line { display: block; }
.line__inner { display: block; }

/* La mascara y el desplazamiento si son de la animacion. */
.js .line { overflow: hidden; }
.js .line__inner { will-change: transform; }

/* Dos dueños distintos, nunca el mismo elemento:
     [data-intro]  lo anima la línea de tiempo de entrada de la página
     [data-reveal] lo anima el scroll, al entrar en cuadro
   Si un elemento llevara ambos, las dos animaciones se pelearían por la
   misma propiedad y quedaría a medio camino. */
.js [data-intro='lines'] .line__inner,
.js [data-reveal='lines'] .line__inner { transform: translateY(105%); }
.js [data-intro='fade'],
.js [data-reveal='fade'] { opacity: 0; }
.js [data-reveal='wipe'] { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.js [data-reveal='diagonal'] { clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); }

/* --------------------------------------------------------------------------
   2. LOADER DE ENTRADA
   Cortina negra, marca al centro, contador en mono y una regla de 1px
   que se llena. Sale con el corte a 45° del brandmark.
   -------------------------------------------------------------------------- */

/* Sin JavaScript la cortina no existe: es una capa fija a pantalla completa
   y nadie la retiraria, asi que taparia el sitio entero. Se muestra sólo
   cuando la clase `.js` confirma que hay quien la saque. */
#loader { display: none; }

.js #loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--ink);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 125% 100%, 0 100%);
  will-change: clip-path;

  /* Red de seguridad: si el script se cae, no se descarga o lanza un error,
     la cortina se retira sola a los 12 s. Un sitio en blanco es peor que
     una entrada sin animación. */
  animation: loader-failsafe 0s linear 12s forwards;
}

@keyframes loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.loader__stage {
  display: grid;
  place-items: center;
  gap: var(--s-8);
}

.loader__mark {
  height: clamp(48px, 7vw, 92px);
  color: var(--paper);
}
.loader__mark svg { height: 100%; }

.loader__foot {
  padding: var(--s-8) var(--gutter) var(--s-10);
  display: grid;
  gap: var(--s-4);
}

.loader__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.loader__bar {
  position: relative;
  height: 1px;
  width: 100%;
  background: var(--paper-24);
  overflow: hidden;
}
.loader__bar span {
  position: absolute;
  inset: 0;
  background: var(--signal);   /* el único acento de esta pantalla */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.loader__count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   3. TRANSICIÓN ENTRE PÁGINAS
   Panel del color de marca con el logo al centro: entra por la derecha,
   sale por la izquierda. El panel es 30% más ancho que la pantalla porque
   su borde de ataque va inclinado a 8°, guiño a la diagonal del logotipo.
   -------------------------------------------------------------------------- */

#transition { display: none; }

.js #transition {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.tr__panel {
  position: absolute;
  top: -6%;
  left: -12%;
  width: 124%;
  height: 112%;
  background: var(--signal);
  transform: translateX(104%);
  display: grid;
  place-items: center;
  will-change: transform;
}

.tr__mark {
  height: clamp(44px, 6vw, 84px);
  color: var(--ink);
}
.tr__mark svg { height: 100%; }

.tr__label {
  position: absolute;
  bottom: clamp(28px, 6vh, 56px);
  left: 0; right: 0;
  text-align: center;
  color: var(--ink);
  opacity: 0.7;   /* 6.78:1 sobre el acento; a 0.55 quedaba en 4.19:1 */
}

/* --------------------------------------------------------------------------
   4. NAVEGACIÓN
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-inline: var(--gutter);
  transition: transform 0.5s var(--ease-out);

  /* La barra ocupa una franja de 68px de ancho completo. Si captura el
     puntero, todo lo que quede debajo de esa franja deja de ser clicable.
     Sólo sus propios controles reciben eventos. */
  pointer-events: none;
}
.nav__brand,
.nav__links,
.nav__toggle { pointer-events: auto; }

/* Velo superior mínimo: sostiene la legibilidad sobre un fotograma claro
   sin pintar una barra. Se disuelve en cuanto la página deja de ser video. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--nav-h) * 2);
  background: linear-gradient(to bottom, rgb(10 10 10 / 0.55), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s linear;
  z-index: -1;
}
.nav.is-scrolled::before { opacity: 0; }

.nav.is-hidden { transform: translateY(-100%); }

.nav__brand {
  height: 20px;
  color: var(--paper);
  flex: 0 0 auto;
}
.nav__brand svg { height: 100%; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-left: auto;
}

.nav__link {
  position: relative;
  color: var(--paper-70);
  transition: color 0.3s var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.nav__link:hover { color: var(--paper); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-current { color: var(--paper); }
.nav__link.is-current::after { transform: scaleX(1); background: var(--signal); }

/* Disparador de menú: rótulo tipográfico puro, sin caja ni icono. */
.nav__toggle {
  display: none;
  margin-left: auto;
  color: var(--paper);
  align-items: center;
  gap: var(--s-2);
}
.nav__toggle span:first-child { transition: transform 0.4s var(--ease-out); }
body.menu-open .nav__toggle span:first-child { transform: rotate(135deg); }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

/* --- Panel de menú --- */

#menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + var(--s-12)) var(--gutter) var(--s-12);
}

.menu__list { display: grid; gap: var(--s-2); align-content: start; }

.menu__item { overflow: hidden; }
.menu__item a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-size: clamp(2.25rem, 12vw, 4.5rem);
  font-weight: 100;
  line-height: 1.05;
  letter-spacing: var(--tr-display);
}
.menu__item a .idx {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-meta-wide);
  color: var(--signal);
  transform: translateY(-0.9em);
}
.menu__item a.is-current { color: var(--paper-52); }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   5. CURSOR
   -------------------------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.cursor__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out),
              margin 0.4s var(--ease-out), background-color 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
}
.cursor__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease-out);
}
.cursor.is-active .cursor__ring {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  background: var(--signal);
  border-color: var(--signal);
}
.cursor.is-active .cursor__label { opacity: 1; transition-delay: 0.1s; }

@media (hover: none) { .cursor { display: none; } }

/* --------------------------------------------------------------------------
   6. PIE
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--hairline);
  padding: var(--s-12) var(--gutter) var(--s-8);
  display: grid;
  gap: var(--s-12);
}

.foot__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-8);
  align-items: end;
}

/* El logotipo secundario lleva el byline "Peak Marketing" dentro del trazo:
   por debajo de unos 48px deja de leerse, asi que aqui va mas grande. */
.foot__brand {
  height: clamp(52px, 6vw, 84px);
  color: var(--paper);
}
.foot__brand svg { height: 100%; }

.foot__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}
.foot__col { display: grid; gap: var(--s-3); align-content: start; }
.foot__col a { color: var(--paper-70); transition: color 0.3s var(--ease-out); }
.foot__col a:hover { color: var(--signal); }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
}

.foot__up {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--paper-70);
  transition: color 0.3s var(--ease-out);
}
.foot__up:hover { color: var(--paper); }
.foot__up svg { width: 10px; height: 10px; }

@media (max-width: 760px) {
  .foot__top { grid-template-columns: 1fr; align-items: start; }
  .foot__cols { gap: var(--s-8); }
}

/* --------------------------------------------------------------------------
   7. SIN JAVASCRIPT
   -------------------------------------------------------------------------- */

.no-gsap #loader,
.no-gsap #transition { display: none !important; }