.swfcar{ width:100%; position:relative; --swfcar-preview-shift: 0px; --swfcar-preview-progress: 0; }
.swfcar *{ box-sizing:border-box; }

/* IMPORTANT: lo stage mantiene la sua altezza anche quando il pin diventa fixed */
.swfcar-stage{
  width:100%;
  position:relative;
  height: var(--swfcar-stage-h, auto);
}

/* pin in flow (non sticky): diventa fixed solo quando “pinnato” */
.swfcar-pin{
  width:100%;
  height: 100vh;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding: 24px;
}

/* allineamento */
.swfcar[data-align="center"] .swfcar-pin{ align-items:center; }

/* deck */
.swfcar-stack{
  width:100%;
  height: calc(100vh - (24px * 2));
  position:relative;
  overflow:hidden;
  transform: translate3d(0, calc(var(--swfcar-preview-shift) * -1 * var(--swfcar-preview-progress)), 0);
  transition: transform 120ms linear;
}

.swfcar.is-pinned .swfcar-stack{
  transform: translate3d(0,0,0);
}

.swfcar.is-prepin .swfcar-stack{
  will-change: transform;
}

.swfcar-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  will-change: opacity;
}
.swfcar-slide.is-active{ opacity:1; pointer-events:auto; }

/* spacer: SOLO scrollLen */
.swfcar-spacer{
  width:100%;
  height: var(--swfcar-spacer-h, 0px);
}

/* stato pinned */
.swfcar.is-pinned .swfcar-pin{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 9999;
}

/* util */
.swfcar-empty,
.swfcar-missing{
  padding: 16px;
  border: 1px dashed rgba(0,0,0,.2);
  background: rgba(0,0,0,.03);
}