.experience-preview { min-height: 585px; }

.gps-message {
  width: 84%;
  min-height: 210px;
  position: absolute;
  right: 0;
  bottom: 78px;
  z-index: 8;
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  gap: 22px;
  padding: 27px 30px 27px 22px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 26px;
  background: rgb(255 255 255 / 91%);
  box-shadow: 0 26px 65px rgb(23 106 167 / 21%);
  backdrop-filter: blur(18px);
  transition: background 600ms, color 600ms, transform 600ms cubic-bezier(.2,.9,.2,1);
}

.gps-orbit {
  width: 108px;
  height: 108px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
}

.orbit-ring {
  position: absolute;
  border: 1px solid rgb(22 143 199 / 22%);
  border-radius: 50%;
}

.ring-one { inset: 34px; }
.ring-two { inset: 20px; }
.ring-three { inset: 5px; }

.gps-core {
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #176aa7, #28c7ce);
  color: white;
  font-size: 22px;
  box-shadow: 0 10px 28px rgb(22 143 199 / 32%);
}

.gps-copy {
  min-width: 0;
}

.gps-copy small {
  color: #168fc7;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 800;
}

.gps-copy h2 {
  margin: 8px 0 7px;
  color: #2c3e49;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.025em;
}

.city-spotlight {
  display: block;
  width: fit-content;
  position: relative;
  margin: 4px 0 2px;
  background: linear-gradient(100deg, #69edf0 0%, #ffffff 42%, #65dce7 72%, #69edf0 100%);
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: clamp(31px, 3.5vw, 47px);
  line-height: .94;
  text-shadow: 0 10px 32px rgb(40 199 206 / 18%);
  animation: city-arrive 800ms cubic-bezier(.2,1.3,.3,1) both, city-shimmer 3.2s 850ms linear infinite;
}

.city-spotlight[hidden] { display: none; }

.gps-copy p {
  margin: 0;
  color: #6f818b;
  font-size: 11px;
  line-height: 1.55;
}

.gps-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #8799a2;
  font-size: 9px;
  font-weight: 700;
}

.gps-meta::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8b7bd;
}

.gps-message.is-locating .gps-core {
  animation: core-breathe 1s ease-in-out infinite alternate;
}

.gps-message.is-locating .ring-one,
.gps-message.is-locating .ring-two,
.gps-message.is-locating .ring-three {
  animation: locate-spin 2.4s linear infinite;
  border-style: dashed;
}

.gps-message.is-live {
  transform: translateY(-4px);
  background: linear-gradient(145deg, rgb(44 62 73 / 97%), rgb(23 106 167 / 96%));
  color: #fff;
}

.gps-message.is-live .gps-copy h2 { color: #fff; }
.gps-message.is-live .gps-copy small { color: #83e3e7; }
.gps-message.is-live .gps-copy p { color: #c8e5eb; }
.gps-message.is-live .gps-meta { color: #a9d7e1; }
.gps-message.is-live .gps-meta::before { background: #49d8dc; box-shadow: 0 0 0 5px rgb(73 216 220 / 14%); }
.gps-message.is-live .orbit-ring { border-color: rgb(91 224 228 / 55%); }

.gps-message.is-live .ring-one { animation: location-wave 1.8s 0s ease-out infinite; }
.gps-message.is-live .ring-two { animation: location-wave 1.8s .45s ease-out infinite; }
.gps-message.is-live .ring-three { animation: location-wave 1.8s .9s ease-out infinite; }
.gps-message.is-live .gps-core { animation: core-arrive 700ms cubic-bezier(.2,1.4,.4,1) both; }
.gps-message.is-live + * { animation: none; }

.gps-message.motion-theme-1 {
  background: linear-gradient(135deg, rgb(92 25 145 / 98%), rgb(236 56 139 / 96%));
  box-shadow: 0 28px 78px rgb(196 39 130 / 42%);
}

.gps-message.motion-theme-1 .gps-core {
  background: linear-gradient(135deg, #ffb72e, #ff3f95);
  box-shadow: 0 10px 34px rgb(255 74 151 / 55%);
}

.gps-message.motion-theme-1 .city-spotlight {
  background-image: linear-gradient(100deg, #ffe35f, #fff 40%, #ff9e37 72%, #ffe35f);
}

.gps-message.motion-theme-2 {
  background: linear-gradient(135deg, rgb(5 102 94 / 98%), rgb(64 202 113 / 96%));
  box-shadow: 0 28px 78px rgb(32 166 103 / 42%);
}

.gps-message.motion-theme-2 .gps-core {
  background: linear-gradient(135deg, #fff44f, #15d6a0);
  color: #145147;
  box-shadow: 0 10px 34px rgb(87 236 147 / 54%);
}

.gps-message.motion-theme-2 .city-spotlight {
  background-image: linear-gradient(100deg, #f8ff7a, #fff 40%, #85ffb7 72%, #f8ff7a);
}

.gps-message.motion-theme-3 {
  background: linear-gradient(135deg, rgb(230 67 26 / 98%), rgb(255 166 32 / 97%));
  box-shadow: 0 28px 78px rgb(238 98 26 / 44%);
}

.gps-message.motion-theme-3 .gps-core {
  background: linear-gradient(135deg, #6c2cff, #ff3f72);
  box-shadow: 0 10px 34px rgb(119 42 220 / 52%);
}

.gps-message.motion-theme-3 .city-spotlight {
  background-image: linear-gradient(100deg, #fff, #fff9aa 40%, #ffd4e9 72%, #fff);
}

.gps-message.is-changing {
  animation: experience-swap 850ms cubic-bezier(.2,1.2,.3,1) both;
}

.gps-message.is-changing .gps-copy {
  animation: copy-swap 700ms 120ms cubic-bezier(.2,.9,.3,1) both;
}

.movement-readout {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 18px;
  width: 84%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
  border: 1px solid #d4e5eb;
  border-radius: 13px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 12px 30px rgb(44 62 73 / 10%);
  color: #617681;
  backdrop-filter: blur(12px);
}

.movement-readout > span:not(.movement-status) {
  display: grid;
  gap: 1px;
}

.movement-readout small {
  color: #98a9b1;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 6px;
  font-weight: 800;
}

.movement-readout b,
.movement-readout strong {
  color: #344b57;
  font-size: 9px;
  font-weight: 800;
}

.movement-status {
  display: flex;
  align-items: center;
  gap: 7px;
}

.movement-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8b7bd;
  box-shadow: 0 0 0 4px rgb(168 183 189 / 15%);
}

.movement-readout.has-moved .movement-status i {
  background: #ec388b;
  box-shadow: 0 0 0 5px rgb(236 56 139 / 14%);
  animation: telemetry-flash 700ms ease-out both;
}

.movement-readout em {
  color: #9aabb3;
  font-size: 7px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .1em;
}

@keyframes location-wave {
  0% { transform: scale(.55); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes core-arrive {
  0% { opacity: 0; transform: scale(.25); }
  70% { transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes core-breathe {
  from { transform: scale(.9); box-shadow: 0 8px 22px rgb(22 143 199 / 25%); }
  to { transform: scale(1.05); box-shadow: 0 12px 34px rgb(22 143 199 / 45%); }
}

@keyframes locate-spin { to { transform: rotate(360deg); } }

@keyframes city-arrive {
  from { opacity: 0; transform: translateY(9px) scale(.92); letter-spacing: -.08em; }
  to { opacity: 1; transform: translateY(0) scale(1); letter-spacing: -.025em; }
}

@keyframes city-shimmer {
  to { background-position: -220% center; }
}

@keyframes experience-swap {
  0% { opacity: .35; transform: translateY(10px) scale(.94) rotate(-1deg); filter: saturate(.5); }
  60% { transform: translateY(-8px) scale(1.035) rotate(.5deg); }
  100% { opacity: 1; transform: translateY(-4px) scale(1) rotate(0); filter: saturate(1); }
}

@keyframes copy-swap {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes telemetry-flash {
  0% { transform: scale(.5); }
  60% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

@media (max-width: 600px) {
  .experience-preview { min-height: 615px; }

  .gps-message {
    width: 96%;
    min-height: 232px;
    right: -4px;
    bottom: 96px;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 22px 18px 22px 14px;
    border-radius: 22px;
  }

  .gps-orbit { width: 88px; height: 88px; }
  .gps-core { width: 43px; height: 43px; }
  .gps-copy h2 { font-size: 22px; }
  .city-spotlight { font-size: clamp(29px, 9vw, 39px); }

  .movement-readout {
    width: 96%;
    right: -4px;
    bottom: 18px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 9px 11px;
  }

  .movement-readout em { display: none; }
  .movement-readout > span:nth-child(4) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gps-message,
  .gps-message * { animation: none !important; transition: none !important; }
}