/* ==========================================================================
   GS01 — LANDING Y PIEZAS COMUNES
   Home (logo + nombre), main buttons y W.I.P.
   Valores en css/variables.css, sección 10. Las medidas son píxeles del
   diseño a 1920 multiplicados por --u (ver variables.css).
   ========================================================================== */


/* --------------------------------------------------------------------------
   HOME — logo + nombre, arriba a la izquierda.
   El botón es solo el logo: en hover y con el teclado crece desde su borde
   izquierdo. El nombre no es enlace y se queda quieto.
   -------------------------------------------------------------------------- */
.home {
  position: fixed;
  z-index: 2;
  top: calc(var(--home-margin-top) * var(--u));
  left: calc(var(--home-margin-left) * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(var(--home-gap) * var(--u));
}

.home-link {
  position: relative;
  display: block;
  transform-origin: left center;
  transition: transform var(--home-duration) ease-out;
}

/* Zona de toque más grande que el dibujo (en móvil el logo es pequeño) */
.home-link::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.home-logo {
  --icon-color: var(--home-logo-color);
  display: block;
  width: calc(var(--home-logo-size) * var(--u));
}

.home-name {
  color: var(--home-name-color);
  font: var(--font-primary) calc(var(--home-name-size) * var(--u)) / 1 var(--font-family);
  /* Sube el nombre para que la parte alta de la «t» quede algo por encima
     del logo, como en el diseño (calibrado con la fuente) */
  margin-top: -0.262em;
}

.home-link:hover,
.home-link:focus-visible {
  transform: scale(var(--home-hover-scale));
}


/* --------------------------------------------------------------------------
   MAIN BUTTONS — [SELECTED WORKS] y [CONTACT], alineados a la derecha.
   Hover y teclado: color más oscuro y crecen desde la derecha (así no se
   desplazan hacia la izquierda).
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  z-index: 2;
  right: calc(var(--nav-margin-right) * var(--u));
  top: calc(var(--nav-y) * 1%);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.nav a {
  display: block;
  color: var(--nav-color-rest);
  font: var(--font-primary) calc(var(--nav-size) * var(--u)) / calc(var(--nav-leading) * var(--u)) var(--font-family);
  white-space: nowrap;
  text-decoration: none;
  transform-origin: right center;
  transition: color var(--nav-duration) ease-out, transform var(--nav-duration) ease-out;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--nav-color-hover);
  transform: scale(var(--nav-hover-scale));
}


/* --------------------------------------------------------------------------
   W.I.P — texto y tuerca, abajo a la derecha.
   «W.I.P» son las iniciales de «Website.In.Progress»: el resto de letras
   está entre ellas, plegado a ancho 0, y se despliega en hover (ratón),
   con el teclado o al tocar (táctil, js/site.js). El texto crece hacia la
   izquierda; la tuerca y el borde derecho no se mueven.
   -------------------------------------------------------------------------- */
.wip {
  position: fixed;
  z-index: 2;
  right: calc(var(--wip-margin-right) * var(--u));
  bottom: calc(var(--wip-margin-bottom) * var(--u));
  display: flex;
  align-items: flex-end; /* la tuerca marca el margen inferior */
  gap: calc(var(--wip-gap) * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wip-color);
  font: var(--font-primary) calc(var(--wip-text-size) * var(--u)) / 1.3 var(--font-family);
}

/* Zona de toque más grande que el dibujo, sin moverlo */
.wip::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.wip-text {
  display: inline-flex;
  white-space: nowrap;
  /* Baja el texto para que su línea base quede donde en el diseño, con
     las mayúsculas centradas en la tuerca (calibrado con la fuente) */
  margin-bottom: -0.06em;
}

.wip-fill {
  max-width: 0;
  overflow: hidden;
  transition: max-width var(--wip-duration) ease-out;
}

/* js/site.js mide cada tramo y lo guarda en --w */
.wip:focus-visible .wip-fill,
.wip[data-open] .wip-fill {
  max-width: var(--w);
}

@media (hover: hover) {
  .wip:hover .wip-fill { max-width: var(--w); }
}

.wip:focus-visible { outline: none; }

.wip-nut {
  flex: none;
  height: calc(var(--wip-nut-size) * var(--u));
  aspect-ratio: 434.3 / 501.4;
  background-color: currentColor;
  -webkit-mask: url("../assets/web-assets/elements/wip/derived/tuerca.svg") center / 100% 100% no-repeat;
          mask: url("../assets/web-assets/elements/wip/derived/tuerca.svg") center / 100% 100% no-repeat;
}


/* --------------------------------------------------------------------------
   El foco del teclado se marca con el mismo cambio que el hover
   -------------------------------------------------------------------------- */
.home-link:focus-visible,
.nav a:focus-visible {
  outline: none;
}


/* --------------------------------------------------------------------------
   Movimiento reducido: sin escalas ni expansión animada; el color se queda
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-link:hover, .home-link:focus-visible,
  .nav a:hover, .nav a:focus-visible {
    transform: none;
  }
  .wip-fill { transition: none; }
}