.cinematic-location-banner {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  gap: 14px;
  max-width: 430px;
  padding:
    10px 10px
    10px 10px;
  border-radius:
    0 0 22px 0;
  background:
    rgba(15,15,15,.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right:
    1px solid rgba(255,255,255,.05);
  border-bottom:
    1px solid rgba(255,255,255,.05);
  z-index: 999999;
  opacity: 0;
  transform:
    translateX(-45px);
  transition:
    opacity .45s ease,
    transform .45s ease;
  pointer-events: none;
}

.cinematic-location-banner.show {
  opacity: 1;
  transform:
    translateX(0px);
}

.location-banner-line {
  width: 3px;
  border-radius: 999px;
  background:
    rgba(255,255,255,.82);
  flex-shrink: 0;
}

.location-banner-content {
  display: flex;
  flex-direction: column;
}

.location-banner-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.location-banner-description {
  color:
    rgba(255,255,255,.74);
  font-size: 14px;
}

#cinematic-blocker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  pointer-events: all;
  background: rgba(0,0,0,0);
  transition:
    background .5s ease;
}

#cinematic-blocker.active {
  display: block;
}

#cinematic-blocker.fade-dark {
  background: rgba(0,0,0,.92);
}

@media (max-width: 768px) {
  .cinematic-location-banner {
    left: 16px;
    right: 16px;
    max-width: unset;
    padding: 16px 18px;
  }

  .location-banner-title {
    font-size: 22px;
  }

}