/* ── Container ──────────────────────────────────────────────────────────────
   No background, no border — just a sized, clipping box.
   Set a height that suits your layout. */
.screenshot-animation-container {
  position: relative;
  width: 100%;
  height: 420px;       /* adjust to taste */
  overflow: hidden;
  background: transparent;
}

/* ── Canvas (fills container, no transform needed anymore) ──────────────── */
.screenshot-animation-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.screenshot-card {
  position: absolute;
  opacity: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition:
    opacity  0.5s ease,
    left     0.7s cubic-bezier(0.4, 0, 0.2, 1),
    top      0.7s cubic-bezier(0.4, 0, 0.2, 1),
    width    0.7s cubic-bezier(0.4, 0, 0.2, 1),
    height   0.7s cubic-bezier(0.4, 0, 0.2, 1);
  background: #1a1f2e;
  will-change: left, top, width, height, opacity;
}

.screenshot-card.visible {
  opacity: 1;
}

.screenshot-card img {
  width: 100%;
  height: calc(100% - 26px);
  object-fit: cover;
  object-position: top;
  display: block;
  user-select: none;
  pointer-events: none;
  opacity: 0.75;
  filter: brightness(1.25) contrast(0.8) saturate(0.9);
}

.card-label {
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #7a8faa;
  background: #111520;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

/* ── SVG connector overlay ──────────────────────────────────────────────── */
.connector-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.connector-lines line {
  stroke: #facc15;
  stroke-width: 3;
  stroke-dasharray: 7 4;
  opacity: 0;
  transition: opacity 0.45s ease;
  filter: drop-shadow(0 0 4px #facc15aa);
}

.connector-lines line.visible {
  opacity: 1;
}

.node-dot {
  fill: #fde047;
  opacity: 0;
  transition: opacity 0.45s ease;
  filter: drop-shadow(0 0 5px #facc15);
}

.node-dot.visible {
  opacity: 1;
}