.aph-showreel-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1776px;
  aspect-ratio: 1776 / 655;
  margin: 84px auto 0;
  overflow: visible;
}

.aph-showreel-stage > .aph-showreel-card {
  position: absolute !important;
  top: 50%;
  left: var(--slot-x, 50%) !important;
  width: var(--slot-width, 37%) !important;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.23);
  z-index: var(--slot-z, 1);
  transform: translate(-50%, -50%);
  transition: left 520ms ease, width 520ms ease, box-shadow 520ms ease;
  cursor: pointer;
}

.aph-showreel-stage > .aph-showreel-card.is-jumping {
  transition: none;
}

.aph-showreel-stage > .aph-showreel-card:nth-child(1),
.aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="-2"] {
  --slot-x: 10.2%;
  --slot-width: 21%;
  --slot-z: 1;
}

.aph-showreel-stage > .aph-showreel-card:nth-child(2),
.aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="-1"] {
  --slot-x: 26%;
  --slot-width: 29.8%;
  --slot-z: 2;
}

.aph-showreel-stage > .aph-showreel-card:nth-child(3),
.aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="0"] {
  --slot-x: 50%;
  --slot-width: 37%;
  --slot-z: 5;
}

.aph-showreel-stage > .aph-showreel-card:nth-child(4),
.aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="1"] {
  --slot-x: 74%;
  --slot-width: 29.8%;
  --slot-z: 2;
}

.aph-showreel-stage > .aph-showreel-card:nth-child(5),
.aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="2"] {
  --slot-x: 89.8%;
  --slot-width: 21%;
  --slot-z: 1;
}

.aph-showreel-stage > .aph-showreel-card .elementor-widget-image,
.aph-showreel-stage > .aph-showreel-card .elementor-widget-container {
  width: 100%;
  height: 100%;
}

.aph-showreel-stage > .aph-showreel-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.aph-showreel-pagination {
  position: absolute;
  top: calc(100% + 50px);
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
}

.aph-showreel-pagination button,
.aph-showreel-pagination span {
  display: block;
  width: 9px;
  height: 9px;
  min-width: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
}

.aph-showreel-pagination button {
  cursor: pointer;
}

.aph-showreel-pagination button:hover,
.aph-showreel-pagination button:focus-visible {
  background: #887852;
  outline: 2px solid #887852;
  outline-offset: 3px;
}

.aph-showreel-pagination span {
  background: #bfa374;
}

@media (max-width: 767px) {
  body:has(.aph-figma-page) {
    overflow-x: hidden;
  }

  .aph-showreel-stage {
    height: auto;
    aspect-ratio: 1.240695;
    margin-top: 10px;
    touch-action: pan-y;
  }

  .aph-showreel-stage > .aph-showreel-card {
    left: 50% !important;
    width: 80.6% !important;
    border-radius: 26px;
    opacity: 0;
    pointer-events: none;
    transform: translate(calc(-50% + var(--mobile-slide-offset, 120%)), -50%);
    transition: transform 350ms ease, opacity 350ms ease;
  }

  .aph-showreel-stage > .aph-showreel-card:nth-child(3),
  .aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="0"] {
    --mobile-slide-offset: 0%;
    opacity: 1;
    pointer-events: auto;
  }

  .aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="-1"],
  .aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="-2"] {
    --mobile-slide-offset: -120%;
  }

  .aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="1"],
  .aph-showreel-stage.is-ready > .aph-showreel-card[data-slot="2"] {
    --mobile-slide-offset: 120%;
  }

  .aph-showreel-stage.is-ready > .aph-showreel-card:not([data-slot="0"]) {
    opacity: 0;
    pointer-events: none;
  }

  .aph-showreel-pagination {
    top: calc(100% + 17px);
    gap: 5.38px;
  }

  .aph-showreel-pagination button,
  .aph-showreel-pagination span {
    width: 5.38px;
    height: 5.38px;
    min-width: 5.38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aph-showreel-stage > .aph-showreel-card {
    transition: none;
  }
}

.aph-mobile-pagination {
  display: none;
}

@media (max-width: 767px) {
  .aph-figma-page {
    max-width: 100%;
    overflow-x: clip;
  }

  .aph-mobile-pagination {
    position: absolute;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translateX(-50%);
  }

  #services > .aph-mobile-pagination {
    bottom: 50px;
  }

  #about > .aph-mobile-pagination {
    bottom: 79px;
  }

  .aph-mobile-pagination button,
  .aph-mobile-pagination span {
    width: 6px;
    height: 6px;
    min-width: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d4d4d4;
  }

  .aph-mobile-pagination button {
    position: relative;
    cursor: pointer;
  }

  .aph-mobile-pagination button::before {
    position: absolute;
    inset: -9px;
    content: "";
  }

  .aph-mobile-pagination span,
  .aph-mobile-pagination button[aria-current="true"] {
    background: #bfa374;
  }

  .aph-mobile-pagination button:focus-visible {
    outline: 2px solid #243453;
    outline-offset: 4px;
  }
}