/* One physical handheld, two screens. Homepage and case hero share this exact
   geometry; navigation only swaps the iframe content. */
:root {
  /* The source hand already contains the phone aperture. Keep it at the
     reference scale and align its left edge to the viewport; the old 23%
     offset pushed the aperture right and made the copy look cropped. */
  --amap-hand-width: min(1800px, 98vw, calc(100svh * 1.98));
  --amap-hand-left: clamp(0px, .6vw, 10px);
  --amap-hand-top: 50svh;
  --amap-hand-shift-y: -42%;
}

html:has(.amap-case-device),
body:has(.amap-case-device) {
  overflow-x: hidden;
}

.amap-cover-device,
.amap-case-device {
  left: var(--amap-hand-left) !important;
  top: var(--amap-hand-top) !important;
  bottom: auto !important;
  width: var(--amap-hand-width) !important;
  aspect-ratio: 1624 / 968;
  transform: translateY(var(--amap-hand-shift-y)) !important;
  transform-origin: 52% 58%;
}

@media (min-width: 901px) {
  body:has(.amap-case-device) .hero.section {
    height: calc(100svh - 82px) !important;
    min-height: 680px !important;
  }
}

/* Short laptop/tablet viewports need a little more air between the copy and
   the shared phone. Keep the same device, but move the artwork right instead
   of letting its aperture sit behind the headline. */
@media (min-width: 901px) and (max-width: 1200px) {
  :root {
    --amap-hand-width: min(1080px, calc(100svh * 1.78));
    --amap-hand-left: clamp(150px, 18vw, 210px);
  }
}

.amap-cover-screen,
.amap-case-live-screen {
  left: 39.37% !important;
  top: 7.55% !important;
  width: 21.1% !important;
  height: 71% !important;
  border-radius: 12.7% / 6.2% !important;
  clip-path: inset(0 round 12.7% / 6.2%) !important;
}

@media (min-width: 901px) {
  .amap-main-case.is-amap-active .amap-cover-device {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  :root {
    --amap-hand-width: min(1180px, calc(102svh * 1.678));
    --amap-hand-left: 50%;
    --amap-hand-top: calc(61svh + 106px);
    --amap-hand-shift-y: -48%;
  }

  .amap-cover-device,
  .amap-case-device {
    transform: translate(-49.92%, var(--amap-hand-shift-y)) !important;
  }

  /* The case hero follows the 62px mobile header while the homepage cover is
     viewport-aligned. Remove that known host offset so the physical handheld
     stays on the same viewport coordinates across navigation. */
  .amap-case-device {
    top: calc(var(--amap-hand-top) - 62px) !important;
  }

  .amap-cover-art {
    inset: 0 !important;
    height: 100% !important;
  }

  .amap-main-case.is-amap-active .amap-cover-device {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  :root {
    --amap-hand-width: min(1080px, calc(100svh * 1.678));
    --amap-hand-top: calc(64svh + 106px);
  }
}