/* ── VARIANTE C · CSS nativo + WAAPI ──
   Aquí sí vive el movimiento: es el planteamiento de la variante.
   Misma estructura de cajas que A y B para que la comparación sea
   entre técnicas y no entre maquetaciones. */

/* ═══ E1 · Hero ═══ */
.anim-ready .hero__eyebrow,
.anim-ready .hero__sub,
.anim-ready .hero__cta { opacity: 0; }

.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; }

@keyframes word-up {
  from { transform: translateY(118%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes rise {
  from { transform: translateY(26px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* --d lo pone el JS por elemento: el escalonado es un dato, no un bucle. */
.hero-go .hero__title .w-in {
  animation: word-up .85s cubic-bezier(.16,1,.3,1) var(--d, 0s) both;
}
.hero-go .hero__eyebrow,
.hero-go .hero__sub,
.hero-go .hero__cta {
  animation: rise .6s cubic-bezier(.16,1,.3,1) var(--d, 0s) both;
}
.hero-instant .hero__title .w-in,
.hero-instant .hero__eyebrow,
.hero-instant .hero__sub,
.hero-instant .hero__cta { opacity: 1; transform: none; animation: none; }

/* ═══ E2 · Tilt ═══
   El JS solo escribe --rx / --ry. La transición hace el resto: el
   navegador interpola sin que corra una línea de JavaScript. */
@media (hover: hover) {
  .dish:hover { transform: none; }
  .dish:hover .dish__media { transform: none; }
}
.dish {
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  /* 90 ms de seguimiento: sin retardo se lee nervioso; con 300 se
     arrastra. La vuelta a reposo es más larga a propósito. */
  transition: transform .52s cubic-bezier(.16,1,.3,1),
              border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.dish.is-tilt {
  --lift: -8px;
  transition: transform .09s linear,
              border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.dish__media { will-change: transform; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.dish.is-tilt .dish__media { transform: scale(1.09); }

/* ═══ E3 · Indicador del nav ═══ */
.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 · Títulos con máscara, atados al scroll ═══
   animation-timeline: view() liga el progreso al recorrido del
   elemento por la ventana. No hay listener, no hay observer, no hay
   JS: lo resuelve el compositor. */
.title-mask { display: block; overflow: hidden; padding-bottom: .08em; }

@keyframes title-reveal {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@supports (animation-timeline: view()) {
  .section__title {
    animation: title-reveal linear both;
    animation-timeline: view();
    /* Empieza al asomar por abajo y termina antes del centro: si
       durase todo el recorrido, el título se leería a medio revelar
       justo cuando alguien está leyéndolo. */
    animation-range: entry 8% cover 34%;
  }
}
/* Sin soporte (Safari y Firefox a día de hoy): clase por
   IntersectionObserver y la misma animación por tiempo. */
.no-view-timeline .section__title { opacity: 0; }
.no-view-timeline .title-mask.is-in .section__title {
  animation: title-reveal .9s cubic-bezier(.16,1,.3,1) both;
}

/* ═══ E6 · Píldora del filtro ═══ */
.chips { position: relative; }
.chips__pill {
  position: absolute; left: 0; top: 0;
  width: 100px; transform-origin: left center;
  background: rgba(255,195,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; }
.chip.is-active { background: transparent; }

/* ═══ Movimiento reducido ═══
   El sitio degrada, no desaparece: se ve el estado final de todo. */
@media (prefers-reduced-motion: reduce) {
  .hero-go .hero__title .w-in,
  .hero-go .hero__eyebrow,
  .hero-go .hero__sub,
  .hero-go .hero__cta { animation: none; opacity: 1; transform: none; }
  .section__title { animation: none !important; opacity: 1; transform: none; }
  .dish, .dish__media, .nav__indicator, .chips__pill { transition: none; }
}