/* Front-facing 3D phone for the athlete-record section. */
.record-device.record-phone-host {
  width: 100%;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.record-device.record-phone-host::after {
  display: none;
}

.record-phone-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(590px, 60vw, 790px);
  isolation: isolate;
  overflow: visible;
  touch-action: pan-y;
}

.record-phone-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 7%;
  width: min(62%, 430px);
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(20px);
  opacity: var(--record-shadow-opacity, 0.48);
  transform: translateX(calc(-50% + var(--record-shadow-x, 0px))) scaleX(var(--record-shadow-scale, 1));
  transition: opacity 220ms ease-out;
}

.record-phone-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.record-phone-fallback {
  display: block;
  width: min(53%, 410px);
  height: auto;
  border-radius: 36px;
  opacity: 0.72;
  transform: translateY(1.5%);
  transition: opacity 360ms ease-out;
}

.record-phone-status {
  position: absolute;
  bottom: 3%;
  left: 50%;
  margin: 0;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 240ms ease-out;
}

.record-phone-shell.is-ready .record-phone-fallback,
.record-phone-shell.is-ready .record-phone-status {
  opacity: 0;
  pointer-events: none;
}

.record-phone-shell.has-error .record-phone-fallback {
  opacity: 0.92;
}

.record-phone-shell.has-error .record-phone-status {
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .record-phone-shell {
    cursor: crosshair;
  }
}

@media (max-width: 980px) {
  .record-device.record-phone-host {
    width: min(720px, 100%);
  }

  .record-phone-shell {
    min-height: clamp(570px, 82vw, 760px);
  }
}

@media (max-width: 560px) {
  .record-device.record-phone-host {
    max-height: none;
    padding: 0;
  }

  .record-phone-shell {
    min-height: min(670px, 138vw);
  }

  .record-phone-fallback {
    width: min(66%, 330px);
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .record-phone-shell::before,
  .record-phone-fallback,
  .record-phone-status {
    transition: none;
  }
}