/* Calm, reversible movement across each city link's full hit area. */
.areas-content .area-city-entry {
  --city-shift: 0px;
  --arrow-x: 0px;
  --arrow-y: 0px;
  transition: border-color 480ms ease;
}

.areas-content .area-city-entry > span:first-child {
  transform: translate3d(var(--city-shift), 0, 0);
  transition: transform 560ms cubic-bezier(.22,.61,.36,1);
}

.areas-content .area-city-entry .area-arrow {
  flex: none;
  transform: translate3d(var(--arrow-x), var(--arrow-y), 0);
  transition: transform 560ms cubic-bezier(.22,.61,.36,1), color 480ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .areas-content .area-city-entry:hover {
    --city-shift: 8px;
    --arrow-x: 6px;
    --arrow-y: -6px;
    border-bottom-color: var(--brand-accent);
  }
  .areas-content .area-city-entry:hover .area-arrow {
    color: var(--brand-accent);
  }
}

.areas-content .area-city-entry:focus-visible {
  --city-shift: 8px;
  --arrow-x: 6px;
  --arrow-y: -6px;
  border-bottom-color: var(--brand-accent);
}

.areas-content .area-city-entry:focus-visible .area-arrow {
  color: var(--brand-accent);
}

@media (hover: none) {
  .areas-content .area-city-entry:active {
    --city-shift: 4px;
    --arrow-x: 3px;
    --arrow-y: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .areas-content .area-city-entry > span:first-child,
  .areas-content .area-city-entry .area-arrow {
    transform: none;
    transition: none;
  }
}