/* chen! | micro-interacciones globales (entradas, salidas y hovers).
   Todo se ajusta aquí. Complementa a las animaciones propias de la portada. */
:root { --mx-ease: cubic-bezier(.22, 1, .36, 1); }

@keyframes mx-up   { from { opacity: 0; translate: 0 14px; } }
@keyframes mx-down { from { opacity: 0; translate: 0 -10px; } }
@keyframes mx-fade { from { opacity: 0; } }
@keyframes mx-card-out { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- ENTRADA: cabecera, switch y firma ---------- */
.nav_logo  { animation: mx-down 800ms var(--mx-ease) 120ms backwards; }
.nav_links { animation: mx-down 800ms var(--mx-ease) 220ms backwards; }
.mode-switch { animation: mx-up 800ms var(--mx-ease) 700ms backwards; }
.hero-signature { animation: mx-fade 1000ms ease 500ms backwards; }

/* fichas de proyecto: el póster se funde al cargar */
.player-poster { animation: mx-fade 900ms ease 200ms backwards; }

/* páginas legales: el contenido entra al hacer scroll (lo activa motion.js) */
.mx-reveal { opacity: 0; translate: 0 14px;
  transition: opacity 700ms var(--mx-ease), translate 700ms var(--mx-ease); }
.mx-reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- SALIDA ---------- */
/* al cambiar de página, la actual se funde (motion.js añade la clase) */
html.mx-leaving body { opacity: 0; transition: opacity 220ms ease; }
html.mx-leaving { pointer-events: none; }
/* al cambiar de filtro, las tarjetas salen antes de que entren las nuevas */
.grid-list .w-dyn-item.mo-leave { animation: mx-card-out 200ms ease both !important; animation-delay: 0ms !important; }

/* ---------- HOVERS sutiles ---------- */
/* logo: pequeño giro y zoom, sin bajar la opacidad */
.nav_logo.has-img:hover { opacity: 1; }
.nav_logo-img { transition: transform 500ms var(--mx-ease); transform-origin: 30% 60%; }
.nav_logo:hover .nav_logo-img, .nav_logo:focus-visible .nav_logo-img { transform: rotate(-3deg) scale(1.05); }

/* enlaces: subrayado que se dibuja de izquierda a derecha, SOLO bajo el texto (no ocupan toda la fila) */
.nav_link, .text-link, .legal_link, .nav_lang a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size 400ms var(--mx-ease), color 250ms ease, opacity 300ms ease;
}
.nav_link:hover, .text-link:hover, .legal_link:hover, .nav_lang a:hover,
.nav_link:focus-visible, .text-link:focus-visible, .legal_link:focus-visible, .nav_lang a:focus-visible { background-size: 100% 1px; }
.nav_link { padding-bottom: 2px; }
.text-link { width: fit-content; }
.text-link .arr { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; display: inline-block; transition: transform 400ms var(--mx-ease); }
.text-link:hover .arr, .text-link:focus-visible .arr { transform: translate(2px, -2px); }

/* "← All work" / "Info →": la flecha se adelanta */
.project-nav a { display: inline-block; }
.project-nav a:first-child:hover { transform: translateX(-4px); }
.project-nav a:last-child:hover  { transform: translateX(4px); }
.project-nav a { transition: transform 400ms var(--mx-ease), background-size 400ms var(--mx-ease), opacity 300ms ease; }

/* ficha de proyecto: zoom lento del póster y [ PLAY ] que se abre */
.player-trigger { overflow: hidden; }
.player-poster { transition: transform 1200ms var(--mx-ease), opacity 400ms ease; }
.player-trigger:hover .player-poster, .player-trigger:focus-visible .player-poster { transform: scale(1.025); }
.player-play { transition: letter-spacing 500ms var(--mx-ease); }
.player-trigger:hover .player-play, .player-trigger:focus-visible .player-play { letter-spacing: .14em; }

/* grid: feedback al pulsar una tarjeta */
.grid-card_media { transition: transform 300ms var(--mx-ease); }
.grid-card:active .grid-card_media { transform: scale(.985); }

/* selector EN / ES de las páginas legales */
.legal_lang { transition: opacity 250ms ease, transform 250ms var(--mx-ease); }
.legal_lang:hover { transform: translateY(-1px); }

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav_logo, .nav_links, .mode-switch, .hero-signature, .player-poster { animation: none !important; }
  .mx-reveal { opacity: 1; translate: none; transition: none; }
  html.mx-leaving body { opacity: 1; transition: none; }
  .nav_logo-img, .player-poster, .player-play, .project-nav a { transition: none !important; transform: none !important; }
}

/* ---------- Selector de idioma EN / ES ---------- */
.nav_lang { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font--mono);
  font-size: var(--text--meta); text-transform: uppercase; margin-right: 6px; }
.nav_lang a { color: var(--color--text); text-decoration: none; opacity: .5; padding-bottom: 2px; background-color: #00000080; }
.nav_lang a.is-current { opacity: 1; }
.nav_lang a:hover { opacity: 1; }
.nav_lang > span { opacity: .35; }
.nav_lang { animation: mx-down 800ms var(--mx-ease) 170ms backwards; }
@media (prefers-reduced-motion: reduce) { .nav_lang { animation: none !important; } }

/* ---------- Proyectos "en camino" (SOON) ---------- */
.grid-soon { cursor: default; }
.grid-soon .grid-card_media { position: relative; background: #141414; }
.grid-soon .grid-card_img { filter: grayscale(1) brightness(.4) contrast(.95); }
.grid-soon:hover .grid-card_img { transform: none !important; }
.grid-soon:hover .grid-card_info { transform: none !important; }
.grid-soon .text-block-2, .grid-soon .text-block-3, .grid-soon .text-block-4, .grid-soon .grid-card_cat { opacity: .5; }
.soon-tag { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font--mono);
  font-size: var(--text--meta); letter-spacing: .22em; text-transform: uppercase; color: #fff;
  animation: mx-soon 3.6s ease-in-out infinite; }
@keyframes mx-soon { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .soon-tag { animation: none; opacity: .7; } }

/* transición de idioma: la página se funde al cambiar EN/ES */
html.mx-lang-out .page { opacity: 0; filter: blur(6px); transform: translateY(6px); transition: opacity 280ms var(--mx-ease), filter 280ms var(--mx-ease), transform 280ms var(--mx-ease); }
html.mx-lang-in .page { animation: mx-lang-in 520ms var(--mx-ease) both; }
@keyframes mx-lang-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.mx-lang-out .page, html.mx-lang-in .page { animation: none; transition: none; filter: none; transform: none; } }
/* créditos del reproductor */
.fp-credits { color: var(--fp-muted); opacity: .7; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92em; }
.fp-credits:empty { display: none; }
.fp.is-ui-off .fp-credits { opacity: 0; visibility: hidden; }

/* About: que todo quepa sin scroll en pantallas de escritorio */
@media (min-width: 768px) {
  .info-drawer { padding-top: clamp(84px, 12vh, 120px); padding-bottom: 24px; }
  .info-grid { row-gap: clamp(24px, 5vh, 64px); padding-bottom: 0; }
  .info-drawer .meta.copyright { margin-top: 0; margin-bottom: 0; }
}