.software-preview-carousel {
  --preview-control-size: 42px;
  --preview-control-offset: 14px;
  --preview-aspect-ratio: 1586 / 992;
  position: relative;
}

.software-preview-carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--preview-aspect-ratio);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: clamp(22px, 2.5vw, 34px);
  background: #d5e7f0;
  box-shadow: 0 26px 56px rgba(103, 71, 30, 0.2);
  touch-action: pan-y;
  cursor: grab;
  line-height: 0;
}

.software-preview-carousel__viewport:active {
  cursor: grabbing;
}

.software-preview-carousel__viewport:focus-visible {
  outline: 3px solid rgba(255, 133, 26, 0.42);
  outline-offset: 4px;
}

.software-preview-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  transition: transform 480ms ease;
  will-change: transform;
}

.software-preview-carousel__slide {
  display: block;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  backface-visibility: hidden;
}

.software-preview-carousel__slide--clone {
  pointer-events: none;
}

.software-preview-carousel__slide .software-showcase__preview {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

.software-preview-carousel__control {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--preview-control-size);
  height: var(--preview-control-size);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  color: #a95a1b;
  background: rgba(255, 250, 242, 0.9);
  box-shadow: 0 8px 18px rgba(102, 70, 29, 0.16);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.software-preview-carousel__control::before {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(135deg);
}

.software-preview-carousel__control--previous {
  left: var(--preview-control-offset);
}

.software-preview-carousel__control--next {
  right: var(--preview-control-offset);
}

.software-preview-carousel__control--next::before {
  transform: rotate(-45deg);
}

.software-preview-carousel:hover .software-preview-carousel__control,
.software-preview-carousel:focus-within .software-preview-carousel__control {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.software-preview-carousel__control:hover {
  background: #fffdf9;
}

.software-preview-carousel__control:focus-visible {
  outline: 2px solid #ff851a;
  outline-offset: 3px;
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.software-preview-manual-download {
  position: absolute;
  right: clamp(20px, calc(1.8vw - 6px), 42px);
  bottom: clamp(72px, 7vw, 108px);
  z-index: 5;
  display: block;
  width: clamp(116px, 12vw, 190px);
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 8px 16px rgba(104, 61, 17, 0.16));
  transition: filter 180ms ease, transform 180ms ease;
}

.software-preview-manual-download img {
  display: block;
  width: 100%;
  height: auto;
}

.software-preview-manual-download:hover {
  filter: drop-shadow(0 12px 20px rgba(104, 61, 17, 0.24));
  transform: translateY(-2px);
}

.software-preview-manual-download:focus-visible {
  outline: 3px solid #ff851a;
  outline-offset: 4px;
}

.software-preview-carousel__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  gap: 5px;
  margin-top: 12px;
}

.software-preview-carousel__indicator {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.software-preview-carousel__indicator::before,
.software-preview-carousel__indicator::after {
  position: absolute;
  inset: 0;
  margin: auto;
  content: "";
}

.software-preview-carousel__indicator::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(90, 51, 15, 0.32);
  transition: opacity 180ms ease;
}

.software-preview-carousel__indicator::after {
  width: 20px;
  height: 20px;
  background: url("./assets/paw-print.svg") center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(255, 133, 26, 0.22));
  opacity: 0;
  transition: opacity 180ms ease;
}

.software-preview-carousel__indicator.is-active::before {
  opacity: 0;
}

.software-preview-carousel__indicator.is-active::after {
  opacity: 1;
}

.software-preview-carousel__indicator:focus-visible {
  outline: 2px solid rgba(255, 133, 26, 0.58);
  outline-offset: 1px;
}

.software-preview-carousel.is-single .software-preview-carousel__control,
.software-preview-carousel.is-single .software-preview-carousel__indicators {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .software-preview-carousel__track {
    transition-duration: 120ms;
  }
}

@media (max-width: 820px) {
  .software-preview-carousel {
    --preview-control-size: 36px;
    --preview-control-offset: 10px;
  }

  .software-preview-carousel__indicators {
    margin-top: 9px;
  }

  .software-preview-manual-download {
    width: clamp(96px, 26vw, 138px);
  }
}