/* =========================================================
   carousel.css
   Cinta/carrusel horizontal infinito para "02 · Transformaciones".
   Se carga DESPUÉS de components.css y glass.css.
   La estructura (pista + copias) la crea carousel.js.
   Las tarjetas (.card.transform) conservan su estilo de cristal oscuro.
   ========================================================= */

/* Viewport del carrusel (antes era la rejilla .cards--3) */
.t-carousel.cards {
  display: block;
  overflow: hidden;         /* oculta lo que sale por los lados */
  position: relative;
  padding-block: var(--space-4); /* aire para que no se recorte la sombra */
}

/* Difuminado suave en los bordes (entra/sale sin corte duro).
   Usa el fondo de la sección (section--alt = --bg-alt). */
.t-carousel::before,
.t-carousel::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: clamp(24px, 6vw, 96px);
  z-index: 2; pointer-events: none;
}
.t-carousel::before { left: 0;  background: linear-gradient(90deg, var(--bg-alt), transparent); }
.t-carousel::after  { right: 0; background: linear-gradient(270deg, var(--bg-alt), transparent); }

/* Pista: fila flexible que se desplaza en bucle */
.t-carousel__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  will-change: transform;
  animation: t-scroll var(--t-duration, 30s) linear infinite;
}

/* Pausa al pasar el cursor o al enfocar con teclado */
.t-carousel:hover .t-carousel__track,
.t-carousel:focus-within .t-carousel__track {
  animation-play-state: paused;
}

/* Cada tarjeta ocupa un ancho fijo (ya no la gobierna la rejilla).
   Más anchas para que las fotos antes/después se aprecien mejor. */
.t-carousel .transform {
  flex: 0 0 auto;
  width: clamp(290px, 84vw, 440px);
}

/* translateX(-50%) = exactamente un set (originales); por eso se duplica */
@keyframes t-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Movimiento reducido: sin auto-scroll ----
   Se puede arrastrar/deslizar a mano y se ocultan las copias. */
@media (prefers-reduced-motion: reduce) {
  .t-carousel__track { animation: none; }
  .t-carousel.cards { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .t-carousel .is-clone { display: none; }
}