/* ==========================================================================
   bb2026 — PORTADA / KEN BURNS.

   Zoom y paneo muy lentos sobre la fotografia, para dar profundidad. Se
   usa en DOS sitios: el carrusel del hero (1) y la tira lateral (6). Vive
   en hoja propia porque es un recurso COMPARTIDO: si estuviera duplicado
   en home-hero.css y en home-blocks.css, cualquier ajuste habria que
   hacerlo dos veces y las dos aritmeticas se separarian.

   La tira NO lleva revelado en persiana (ahi las fotos se quedan quietas
   y solo se desplazan en lateral); si lleva Ken Burns. Son dos recursos
   independientes: la persiana es clip-path sobre el MARCO y el Ken Burns
   es transform sobre la IMAGEN, o sea que nunca se pelean por la misma
   propiedad ni por el mismo elemento.

   --------------------------------------------------------------------
   ARITMETICA (por que el paneo no descubre borde)

   La imagen llena su marco al 100% con object-fit: cover. Al escalarla
   un factor s, sobresale (s - 1) / 2 por CADA lado:

     s = 1,07  ->  sobresale 3,5% por lado (en los dos ejes)

   El paneo desplaza como maximo 1,2%, o sea que consume 1,2 de los 3,5
   disponibles: quedan 2,3 puntos de margen. Y como las dos cosas van en
   los MISMOS dos fotogramas, ambas avanzan a la vez: en el instante f el
   margen es 3,5 x f y el desplazamiento 1,2 x f, luego

     1,2 x f  <=  3,5 x f   para todo f entre 0 y 1

   se cumple SIEMPRE, tambien al principio (donde escala 1 y no hay
   margen, pero tampoco hay desplazamiento). Cero riesgo de borde
   descubierto en cualquier fotograma.

   Duracion 12s por pasada y direccion 'alternate' (24s de ciclo): tiene
   que respirar, no marear. 'alternate' ademas evita el salto: al llegar
   al final vuelve interpolando, nunca corta a cero.
   -------------------------------------------------------------------- */

@keyframes bb-ken {
  /* translate ANTES de scale: asi el % del desplazamiento se mide sobre
     el espacio del padre y la aritmetica de arriba es directa. */
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-1.2%, 1.2%) scale(1.07); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Curva simetrica: el cambio de sentido de 'alternate' no se nota. */
  .bb-hhero__img,
  .bb-hstrip__img {
    animation: bb-ken 12s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  }

  /* HERO: solo se mueve la foto del slide activo. Al dejar de ser activo
     la animacion se CONGELA (no se retira), asi que no hay salto: el
     slide saliente se queda exactamente donde estaba mientras el entrante
     lo cubre, y cuando le vuelve el turno sigue desde ese punto. */
  .bb-hhero__slide:not(.swiper-slide-active) .bb-hhero__img {
    animation-play-state: paused;
  }

  /* TIRA: retardo negativo para que las diez fotos no respiren al unisono
     (entran ya empezadas, cada una en un punto distinto del ciclo). */
  .bb-hstrip__item:nth-child(2) .bb-hstrip__img { animation-delay: -2.4s; }
  .bb-hstrip__item:nth-child(3) .bb-hstrip__img { animation-delay: -4.8s; }
  .bb-hstrip__item:nth-child(4) .bb-hstrip__img { animation-delay: -7.2s; }
  .bb-hstrip__item:nth-child(5) .bb-hstrip__img { animation-delay: -9.6s; }
  .bb-hstrip__item:nth-child(6) .bb-hstrip__img { animation-delay: -1.2s; }
  .bb-hstrip__item:nth-child(7) .bb-hstrip__img { animation-delay: -3.6s; }
  .bb-hstrip__item:nth-child(8) .bb-hstrip__img { animation-delay: -6s; }
  .bb-hstrip__item:nth-child(9) .bb-hstrip__img { animation-delay: -8.4s; }
  .bb-hstrip__item:nth-child(10) .bb-hstrip__img { animation-delay: -10.8s; }
}