/* Shared mobile project proof for the three homepage languages. */
.device-stage,
.project-image.project-device {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(34rem, 55vw, 50rem);
  padding: clamp(2.5rem, 5vw, 5rem) 1.5rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(51, 239, 196, .12), transparent 36%),
    linear-gradient(145deg, rgba(7, 25, 21, .96), rgba(2, 9, 7, .99));
}

.device-stage::before,
.project-image.project-device::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(51, 239, 196, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 239, 196, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent);
}

.project-image.project-device {
  width: 100%;
  aspect-ratio: auto !important;
}

.project-image.project-device::after {
  display: none;
}

.phone-preview {
  position: relative;
  z-index: 1;
  width: min(100%, 19.25rem);
  aspect-ratio: 453 / 912;
  overflow: hidden;
  isolation: isolate;
  border-radius: 21% / 10.4%;
  background: #1e1e1e;
  box-shadow:
    0 2.2rem 5rem rgba(0, 0, 0, .52),
    0 0 0 1px rgba(205, 225, 219, .14),
    0 0 3.5rem rgba(51, 239, 196, .08);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), box-shadow .65s ease;
}

.phone-preview-clean {
  transform: rotate(-1.2deg);
}

.phone-preview-karpatia {
  transform: rotate(1.2deg);
}

.phone-preview-frame,
.phone-preview-screen {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  filter: none !important;
  transition: none !important;
}

.phone-preview-frame {
  inset: 0 !important;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  transform: none !important;
}

/* The atlas capture includes a few pale source pixels at its viewport edge. */
.phone-preview-karpatia .phone-preview-screen {
  left: 5.3% !important;
  top: 2% !important;
  width: 89.4% !important;
  height: 96% !important;
  border-radius: 14.5% / 6.6% !important;
  transform: translateY(1.4%) scale(1.075) !important;
}

.phone-preview-screen {
  left: 5.95% !important;
  top: 2.85% !important;
  z-index: 2;
  width: 88.1% !important;
  height: 94.3% !important;
  object-fit: cover !important;
  border-radius: 17.7% / 8.2% !important;
  transform: none !important;
}

.phone-preview-island {
  position: absolute;
  left: 50%;
  top: 4.55%;
  z-index: 3;
  width: 28%;
  height: 4.15%;
  border-radius: 999px;
  background: #030303;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .5);
}

.phone-preview-island::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 50%;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #1e4558, #071016 48%, #020303 70%);
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04);
}

.work-device:hover .phone-preview,
.project-feature:hover .phone-preview {
  transform: translateY(-.65rem) rotate(0);
  box-shadow:
    0 2.8rem 6rem rgba(0, 0, 0, .58),
    0 0 0 1px rgba(205, 225, 219, .2),
    0 0 4.5rem rgba(51, 239, 196, .12);
}

.work-device:hover .phone-preview img,
.project-feature:hover .phone-preview img {
  filter: none !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .device-stage,
  .project-image.project-device {
    min-height: 34rem;
    padding-block: 2.75rem;
  }

  .phone-preview {
    width: min(100%, 17.5rem);
  }
}

@media (max-width: 600px) {
  .device-stage,
  .project-image.project-device {
    min-height: 31rem;
    padding: 2.25rem 1rem;
  }

  .phone-preview {
    width: min(72vw, 18rem);
  }

  .work-device:hover .phone-preview,
  .project-feature:hover .phone-preview {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-preview {
    transition: none;
  }
}