/* The app screen, rebuilt from the two phone shots in the skit:
   paper map with a faint street grid, mint blocks, magenta fist pins,
   a locate button, and the pink Request card pinned to the bottom. */

.phone {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

.phone--framed {
  min-height: 0;
  aspect-ratio: 9 / 19;
  border-radius: 38px;
  box-shadow: 0 24px 60px rgba(20, 16, 15, 0.22);
}

/* --- the map ---------------------------------------------------- */

.map {
  position: absolute;
  inset: 0;
  background: var(--paper);
}

/* Streets. Two grids at different weights so the block sizes vary the
   way they do on the phone in the skit. */
.map__grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(to right, var(--hairline) 1.4px, transparent 1.4px),
    linear-gradient(to bottom, var(--hairline) 1.4px, transparent 1.4px),
    linear-gradient(to right, rgba(20, 16, 15, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 16, 15, 0.028) 1px, transparent 1px);
  background-size: 118px 148px, 118px 148px, 29.5px 37px, 29.5px 37px;
  transform: rotate(-1.4deg);
}

.map__blocks {
  position: absolute;
  inset: 0;
}

.block {
  position: absolute;
  background: var(--mint);
  border-radius: 3px;
}

.map__pins {
  position: absolute;
  inset: 0;
}

.pin {
  position: absolute;
  width: 34px;
  height: 34px;
  color: var(--pink);
  transform: translate(-50%, -50%);
  animation: pin-bob 3.6s ease-in-out infinite;
}

.pin .fist {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(20, 16, 15, 0.18));
}

.pin--gone {
  animation: pin-leave 0.5s ease forwards;
}

@keyframes pin-bob {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% - 5px));
  }
}

@keyframes pin-leave {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

/* The user, as a dot with a heading arrow. */
.puck {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
}

.puck__dot {
  width: 18px;
  height: 18px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(240, 33, 155, 0.1);
}

.puck__arrow {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--pink);
}

/* Radar sweep. This is the one piece of motion the app really owns:
   it fires out of the puck when you press Request. */
.sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border: 3px solid var(--pink);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.is-searching .sweep {
  animation: sweep-out 1.9s ease-out infinite;
}

.is-searching .sweep:nth-of-type(2) {
  animation-delay: 0.63s;
}

.is-searching .sweep:nth-of-type(3) {
  animation-delay: 1.26s;
}

@keyframes sweep-out {
  0% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(22);
  }
}

/* --- chrome on top of the map ----------------------------------- */

.app-head {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 3;
  --lockup-size: 20px;
}

.locate {
  position: absolute;
  right: 20px;
  bottom: 196px;
  z-index: 3;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(20, 16, 15, 0.16);
  transition: transform 0.15s ease;
}

.locate:active {
  transform: scale(0.93);
}

.locate svg {
  width: 22px;
  height: 22px;
  color: var(--ink);
}

.dock {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom));
}

.request {
  display: block;
  width: 100%;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 20px 24px 22px;
  color: #fff;
  text-align: left;
  background: var(--pink);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 26px rgba(240, 33, 155, 0.34);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.request:active {
  transform: translateY(2px) scale(0.99);
  box-shadow: 0 5px 16px rgba(240, 33, 155, 0.3);
}

.request__verb {
  display: block;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.request .lockup {
  --lockup-size: 34px;
  margin-top: 4px;
}

.request[disabled] {
  opacity: 0.55;
  cursor: default;
}

.smallprint {
  margin: 12px 6px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}

/* --- searching sheet -------------------------------------------- */

.sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  padding: 24px 26px calc(28px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -8px 30px rgba(20, 16, 15, 0.16);
  transform: translateY(101%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.sheet[data-open='true'] {
  transform: translateY(0);
}

.sheet__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sheet__line {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.sheet__bar {
  height: 5px;
  margin-top: 18px;
  overflow: hidden;
  background: rgba(240, 33, 155, 0.16);
  border-radius: 99px;
}

.sheet__bar i {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--pink);
  border-radius: 99px;
  animation: bar-slide 1.25s ease-in-out infinite;
}

@keyframes bar-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

.sheet__cancel {
  display: block;
  width: 100%;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- the REQUESTED! screen -------------------------------------- */

.confirm {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  padding: 32px 28px calc(32px + env(safe-area-inset-bottom));
  align-content: center;
  justify-items: start;
  text-align: left;
  background: var(--pink-glow);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}

.confirm[data-open='true'] {
  opacity: 1;
  visibility: visible;
}

/* Once a full screen sits on top there is nothing to see underneath, so the
   map stops painting. It also stops the pin animations from being promoted
   to their own layers, which is what made them punch through the overlay. */
.is-covered .map,
.is-covered .app-head,
.is-covered .locate,
.is-covered .dock {
  visibility: hidden;
}

.confirm .lockup {
  --lockup-size: clamp(38px, 13vw, 54px);
  animation: stamp 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.confirm__word {
  margin: 10px 0 0;
  font-size: clamp(40px, 14vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #fff;
  /* The screen keeps the exact pink the camera saw, so white on it measures
     2.42:1 and no shade of white will fix that. A hard outline in the deep
     pink does the work the ratio cannot, and the word stays readable. */
  text-shadow:
    0 3px 0 var(--pink-deep),
    1px 0 0 var(--pink-deep),
    -1px 0 0 var(--pink-deep),
    0 1px 0 var(--pink-deep),
    0 -1px 0 var(--pink-deep);
  animation: stamp 0.42s 0.09s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: scale(1.45) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.confirm__eta {
  margin: 26px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  animation: fade-up 0.4s 0.75s ease both;
}

.confirm__truth {
  max-width: 30ch;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  animation: fade-up 0.4s 1.7s ease both;
}

.confirm__next {
  margin-top: 26px;
  padding: 15px 26px;
  font-size: 16px;
  font-weight: 800;
  color: var(--pink);
  background: #fff;
  border-radius: 99px;
  opacity: 0;
  animation: fade-up 0.4s 2.3s ease both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- waitlist screen -------------------------------------------- */

.signup {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  padding: 34px 28px calc(30px + env(safe-area-inset-bottom));
  align-content: center;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s;
}

.signup[data-open='true'] {
  opacity: 1;
  visibility: visible;
}

.signup h2 {
  margin: 0;
  font-size: clamp(28px, 9vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.signup p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.signup__back {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}