/* ═══════════════════════════════════════════════════════════════
   julisequeira.com — navegación compartida
   Integración de la prueba de navegación 02 (13/09/2026): continuidad
   tarjeta ↔ caso, rótulo del menú y ventana al siguiente proyecto.
   La transición la declara navegacion.js, sólo en listados y casos;
   acá están su ritmo y sus parejas.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --nav-ease: cubic-bezier(.22, .72, .16, 1);
  --nav-transicion: 440ms;
  --nav-rotulo: 270ms;
  --nav-ventana: 300ms;
}

/* ─── CONTINUIDAD TARJETA ↔ CASO ────────────────────────────────── */
::view-transition { pointer-events: none; }
::view-transition-group(*) {
  animation-duration: var(--nav-transicion);
  animation-timing-function: var(--nav-ease);
}
::view-transition-old(root) { animation: nav-sale 160ms ease both; }
::view-transition-new(root) { animation: nav-entra 200ms ease both; }
@keyframes nav-sale  { to   { opacity: 0; } }
@keyframes nav-entra { from { opacity: 0; } }

/* La foto no se estira: cambia el recorte, nunca la proporción. */
::view-transition-old(vt-imagen),
::view-transition-new(vt-imagen) {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Flama tiene las caras contra el borde de arriba: el recorte sale de abajo. */
html[data-vt-caso="flama-squad"]::view-transition-old(vt-imagen),
html[data-vt-caso="flama-squad"]::view-transition-new(vt-imagen) {
  object-position: center top;
}

::view-transition-old(vt-titulo),
::view-transition-new(vt-titulo) {
  width: 100%; height: 100%;
  object-fit: contain; object-position: left bottom;
}

/* El menú queda quieto y por encima mientras pasa la foto. */
::view-transition-group(vt-nav) { animation: none; z-index: 10; }
::view-transition-old(vt-nav) { display: none; }
::view-transition-new(vt-nav) { animation: none; }

/* ─── MENÚ · RÓTULO ─────────────────────────────────────────────────
   La palabra rueda una vez dentro de su renglón y entra una copia
   idéntica. La copia es aria-hidden: el nombre accesible sigue siendo
   el texto del enlace. Alto fijo por debajo de la línea del logo, para
   no cambiar el alto del nav (work.html lo usa en el sticky).
   ─────────────────────────────────────────────────────────────────── */
.nav-links .rotulo {
  display: inline-block; position: relative;
  vertical-align: top; overflow: hidden;
  height: 1.3em; line-height: 1.3;
  white-space: nowrap;   /* una palabra partida quedaría tapada por el alto fijo */
}
.nav-links .rotulo > span { display: block; }
.nav-links .rotulo-copia { position: absolute; top: 100%; left: 0; user-select: none; }
.rotulo-rueda .rotulo > span {
  animation: nav-rotulo var(--nav-rotulo) var(--nav-ease);
}
@keyframes nav-rotulo { to { transform: translateY(-100%); } }

/* ─── MENÚ EN ANCHO MÍNIMO ──────────────────────────────────────────
   A 320 px con barra de scroll clásica de Windows quedan unos 303 px
   útiles y el logo llegaba a tocar «Trabajos». Por debajo de 360 px se
   cierran un poco el aire entre enlaces y el tracking, y el nav reserva
   16 px entre logo y menú. El alto del nav no cambia.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 359.98px) {
  body > nav { column-gap: 16px; }
  body > nav .nav-links { gap: 12px; }
  body > nav .nav-links a { letter-spacing: .08em; }
}

/* ─── SIGUIENTE PROYECTO ────────────────────────────────────────────
   Título grande del próximo caso; al señalarlo o enfocarlo se abre una
   franja de su imagen real. Toma el color de la página que lo contiene.
   ─────────────────────────────────────────────────────────────────── */
.siguiente {
  padding: 72px 52px 96px;
  border-top: 1px solid rgba(128, 128, 128, .22);
}
.siguiente-k {
  font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  opacity: .62; margin-bottom: 22px;
}
.siguiente-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px; align-items: start;
  color: inherit; text-decoration: none;
}
.siguiente-titulo {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(30px, 5.8vw, 88px);
  line-height: 1.04; letter-spacing: -.04em;
  min-width: 0; max-width: 1050px; overflow-wrap: anywhere;
}
.siguiente-flecha {
  font-family: 'Satoshi', sans-serif; font-weight: 400;
  font-size: clamp(28px, 4.6vw, 64px); line-height: 1;
  padding-top: .06em;
  transition: color var(--dur, .25s) var(--ease-out, ease);
}
.siguiente-ventana {
  grid-column: 1 / -1; display: block; position: relative;
  width: 100%; height: clamp(110px, 15vw, 210px);
  margin-top: 10px; overflow: hidden;
}
.siguiente-ventana img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path var(--nav-ventana) var(--nav-ease);
}
.siguiente-link:hover .siguiente-ventana img,
.siguiente-link:focus-visible .siguiente-ventana img { clip-path: inset(0); }
.siguiente-link:hover .siguiente-flecha { color: var(--red); }
.siguiente-link:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }
.siguiente-link[href*="flama-squad"] .siguiente-ventana img { object-position: center 24%; }

@media (max-width: 700px) {
  .siguiente { padding: 45px 22px 80px; }
  .siguiente-titulo { letter-spacing: -.03em; }
  .siguiente-ventana { height: 130px; }
}
/* En pantalla chica, sin hover o con menos movimiento, la ventana ya está
   abierta: no hay nada que descubrir antes de tocar, y el primer toque navega. */
@media (max-width: 600px), (hover: none), (pointer: coarse) {
  .siguiente-ventana img { clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  .siguiente-ventana img { clip-path: inset(0); transition: none; }
  .rotulo-rueda .rotulo > span { animation: none; }
}