/* The device chrome sits outside the original, uncropped app screenshots. */
.phone-frame {
  --phone-screen-radius: 25px;
  --phone-shadow: #102f4640;
  --phone-edge: #59798d;
  padding: 18px 6px 14px;
  border: 2px solid var(--phone-edge);
  border-radius: 38px;
  overflow: visible;
  background:
    linear-gradient(#050b10, #050b10) center 7px / 34px 3px no-repeat,
    radial-gradient(circle, #476780 0 22%, #03080d 30% 65%, transparent 70%) calc(50% + 24px) 6px /
      5px 5px no-repeat,
    linear-gradient(125deg, #243c4e 0%, #08131c 36%, #071018 72%, #203b4c 100%);
  box-shadow:
    inset 1px 0 0 #d1e8f56b,
    inset -1px 0 0 #020b14,
    1px 0 0 #b4cbd8,
    3px 1px 0 #526c7e,
    5px 2px 0 #233d50,
    6px 3px 0 #6a899d,
    8px 8px 12px #0a22331a,
    20px 30px 52px var(--phone-shadow);
}

/* Physical controls are decorative and never overlap the display. */
.phone-frame::before,
.phone-frame::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #142d3e, #8ca9bc 50%, #314d60);
  pointer-events: none;
}
.phone-frame::before {
  top: 17%;
  left: -5px;
  height: 22px;
  box-shadow:
    0 38px 0 #476376,
    0 68px 0 #476376;
}
.phone-frame::after {
  top: 27%;
  right: -5px;
  height: 50px;
}
.phone-frame.hero-phone,
.phone-frame.story-phone {
  aspect-ratio: auto;
}
.phone-frame .hero-screen {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 360 / 778;
  border-radius: var(--phone-screen-radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px #030b12;
}
.phone-frame .hero-screen > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.phone-frame > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 778;
  object-fit: contain;
  border-radius: var(--phone-screen-radius);
  box-shadow: 0 0 0 1px #030b12;
}
.phone-frame.hero-phone {
  transform: perspective(1200px) rotateX(var(--phone-tilt-x, 2deg))
    rotateY(var(--phone-tilt-y, -8deg));
  transform-origin: center;
  transition: transform 450ms var(--ease);
}
.phone-frame.story-phone {
  transform: perspective(1400px) rotateY(-6deg);
}
.phone-frame.feature-phone {
  --phone-screen-radius: 22px;
  border-radius: 34px;
  transform: perspective(1200px) rotateY(-5deg);
}
.feature-reverse .phone-frame.feature-phone {
  transform: perspective(1200px) rotateY(5deg);
}
@media (prefers-color-scheme: dark) {
  .phone-frame {
    --phone-edge: #7ba0b8;
    --phone-shadow: #0008;
  }
}
@media (max-width: 767px) {
  .phone-frame {
    --phone-screen-radius: 23px;
    padding: 18px 6px 14px;
    border-radius: 36px;
    box-shadow:
      inset 1px 0 0 #d1e8f56b,
      inset -1px 0 0 #020b14,
      1px 0 0 #b4cbd8,
      3px 1px 0 #526c7e,
      4px 2px 0 #233d50,
      5px 3px 0 #6a899d,
      8px 14px 20px #0a22331a,
      12px 22px 36px var(--phone-shadow);
  }
  .phone-frame.hero-phone,
  .phone-frame.story-phone,
  .phone-frame.feature-phone,
  .feature-reverse .phone-frame.feature-phone {
    transform: none;
  }
  .phone-frame.feature-phone {
    --phone-screen-radius: 20px;
    border-radius: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .phone-frame.hero-phone,
  .phone-frame.story-phone,
  .phone-frame.feature-phone,
  .feature-reverse .phone-frame.feature-phone {
    transform: none;
    transition: none;
  }
}