/* Single-phone screenshot stack: one elegant frame, screens swap inside.
   Desktop: pin + scroll scrub. Mobile: swipe on the phone / tap dots. */

.pin {
  position: relative
}

.stack-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--phone-w);
  max-width: 100%
}

.phone > .stack {
  display: grid;
  place-items: stretch;
  /* size comes from .phone > .stack rules in phone-frame.css */
}

.phone > .stack img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
  opacity: 0;
  transform: translateX(10%);
  pointer-events: none;
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
  z-index: 0
}

.phone > .stack img.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 1
}

.phone > .stack img.is-exit {
  opacity: 0;
  transform: translateX(-10%);
  z-index: 0
}

.stack-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px; /* clear phone drop-shadow */
  position: relative;
  z-index: 1
}

.stack-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(127, 127, 127, .45);
  cursor: pointer;
  transition: background .2s, transform .2s
}

.stack-dots button.on {
  background: #C95456;
  transform: scale(1.35)
}

.pin .phone {
  animation: none !important;
  /* keep one clear phone silhouette; no half-half rail */
  touch-action: pan-y
}

@media (prefers-reduced-motion: reduce) {
  .phone > .stack img {
    transition: none;
    transform: none
  }
}