/* ── VARIANTE B · Motion.dev — estructura que la animación necesita ──
   Idéntica a la de A a propósito: si el CSS difiere, la comparación
   deja de ser entre librerías y pasa a ser entre hojas de estilo.
   El movimiento lo escribe Motion sobre WAAPI. */

/* Estado inicial del hero. Solo bajo .anim-ready, la clase que pone
   harness.js y que se retira sola a los 3 s: si el script no llega,
   el titular no se queda invisible. */
.anim-ready .hero__eyebrow,
.anim-ready .hero__sub,
.anim-ready .hero__cta { opacity: 0; }

/* Cada palabra sube desde detrás de su propia línea. */
.hero__title .w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero__title .w-in { display: inline-block; will-change: transform; }
.anim-ready .hero__title .w-in { opacity: 0; }

/* E2 — el tilt lo escribe GSAP inline; el :hover del baseline competía
   por la misma propiedad. Se le retira el transform y se le deja el
   borde y la sombra, que son lo que da el resalte de color. */
@media (hover: hover) {
  .dish:hover { transform: none; }
  .dish:hover .dish__media { transform: none; }
}
.dish { transform-style: preserve-3d; }
.dish__media { will-change: transform; }

/* E3 — indicador del nav. Ancho base 100px: GSAP lo estira con scaleX,
   nunca con width, para no disparar layout en cada frame. */
.nav__links { position: relative; }
.nav__indicator {
  position: absolute; left: 0; bottom: -6px;
  width: 100px; height: 2px; transform-origin: left center;
  background: var(--gold, #ffc300); border-radius: 2px;
  opacity: 0; pointer-events: none; will-change: transform;
}
.nav__links a.is-current { color: var(--text, #fff); }

/* E5 — máscara de los títulos. */
.title-mask { display: block; overflow: hidden; padding-bottom: 0.08em; }

/* E6 — píldora del filtro. Misma técnica que el indicador. */
.chips { position: relative; }
.chips__pill {
  position: absolute; left: 0; top: 0;
  width: 100px; transform-origin: left center;
  background: rgba(255, 195, 0, 0.16);
  border: 1px solid var(--gold, #ffc300);
  border-radius: 999px;
  opacity: 0; pointer-events: none; z-index: 0; will-change: transform;
}
.chip { position: relative; z-index: 1; }
/* El fondo activo lo pinta la píldora, no el chip. */
.chip.is-active { background: transparent; }

/* Movimiento reducido: nada oculto, nada moviéndose. */
@media (prefers-reduced-motion: reduce) {
  .anim-ready .hero__eyebrow,
  .anim-ready .hero__sub,
  .anim-ready .hero__cta,
  .anim-ready .hero__title .w-in { opacity: 1; }
  .nav__indicator, .chips__pill { transition: none; }
}