/*
 * Phone mockup used on the landing page.
 *
 *   <div class="phone" style="--w: 300px">
 *     <div class="phone__screen">
 *       <div class="phone__status">…</div>
 *       <div class="phone__view"><img …></div>
 *     </div>
 *   </div>
 *
 * Screenshots are 390×797 (an iPhone viewport minus its status bar), so the
 * status bar is drawn here and long screenshots can scroll underneath it.
 * Everything inside the screen scales off its width (container query units).
 */
.phone {
  --w: 300px;
  --status-bg: #0f1014; /* the app's top bar */
  --frame: #1b1b1f;
  position: relative;
  flex-shrink: 0;
  width: var(--w);
  padding: calc(var(--w) * 0.036);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(155deg, #54545b 0%, #1d1d21 14%, #0d0d0f 50%, #1d1d21 86%, #45454b 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 0 0 calc(var(--w) * 0.011) #050506,
    0 calc(var(--w) * 0.12) calc(var(--w) * 0.24) calc(var(--w) * -0.08) rgb(0 0 0 / 0.8),
    0 calc(var(--w) * 0.03) calc(var(--w) * 0.06) rgb(0 0 0 / 0.35);
}

/* Side buttons: volume on the left, power on the right. */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  width: calc(var(--w) * 0.012);
  border-radius: 2px;
  background: linear-gradient(90deg, #2c2c31, #48484e);
}

.phone::before {
  left: calc(var(--w) * -0.009);
  top: 21%;
  height: 7.5%;
  box-shadow: 0 calc(var(--w) * 0.2) 0 #36363b;
}

.phone::after {
  right: calc(var(--w) * -0.009);
  top: 28%;
  height: 12%;
}

.phone__screen {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.135);
  background: var(--status-bg);
  container-type: inline-size;
  isolation: isolate;
  transform: translateZ(0); /* clip the scrolling image to the rounded corners in Safari */
}

.phone__status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(100cqw * 47 / 390);
  padding: calc(100cqw * 0.012) calc(100cqw * 0.075) 0 calc(100cqw * 0.12);
  background: var(--status-bg);
  color: #fff;
  font: 600 calc(100cqw * 0.041) / 1 -apple-system, 'SF Pro Text', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.phone__icons {
  display: flex;
  align-items: center;
  gap: calc(100cqw * 0.015);
}

.phone__icons svg {
  display: block;
  height: calc(100cqw * 0.03);
  width: auto;
}

.phone__island {
  position: absolute;
  z-index: 3;
  top: calc(100cqw * 0.028);
  left: 50%;
  width: calc(100cqw * 0.31);
  height: calc(100cqw * 0.088);
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}

.phone__view {
  position: absolute;
  inset: calc(100cqw * 47 / 390) 0 0;
  overflow: hidden;
  background: #0f1014;
}

.phone__view img,
.phone__view video {
  display: block;
  width: 100%;
  height: auto;
}

/* Home indicator. */
.phone__screen::after {
  content: '';
  position: absolute;
  z-index: 3;
  bottom: calc(100cqw * 0.02);
  left: 50%;
  width: 36%;
  height: calc(100cqw * 0.013);
  translate: -50% 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.82);
}

/* A scrolled-into-the-page shot sits under the glass section-chip bar, a shade darker. */
.phone--scrolled {
  --status-bg: #0b0d10;
}