/* The national and state maps remain separate crawlable documents, but move
 * through one visual stage in browsers that support MPA view transitions. */
@view-transition {
  navigation: auto;
}

header.site {
  view-transition-name: sf-app-header;
}

[data-map-transition-stage] {
  view-transition-name: sf-map-stage;
}

::view-transition-group(sf-app-header) {
  animation-duration: 240ms;
}

::view-transition-group(sf-map-stage) {
  animation-duration: 680ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(sf-map-stage) {
  animation: sf-map-stage-out 680ms cubic-bezier(.22, 1, .36, 1) both;
}

::view-transition-new(sf-map-stage) {
  animation: sf-map-stage-in 680ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sf-map-stage-out {
  to { opacity: 0; transform: scale(1.035); filter: saturate(.8); }
}

@keyframes sf-map-stage-in {
  from { opacity: .24; transform: scale(.975); filter: saturate(.7); }
  to { opacity: 1; transform: scale(1); filter: saturate(1); }
}

.state-map-arrival {
  position: absolute;
  z-index: 500;
  inset: 0 0 1.75rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 56% 42%, var(--sel), transparent 38%),
    linear-gradient(145deg, var(--card), var(--paper-deep));
  opacity: 1;
  visibility: visible;
  transition: opacity 380ms ease, visibility 0s linear 380ms;
}

.state-map-arrival::after {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  border: 1px solid var(--sel);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem color-mix(in srgb, var(--sel) 36%, transparent);
  animation: sf-map-pulse 1.6s ease-in-out infinite alternate;
}

.state-map-arrival svg {
  position: relative;
  z-index: 1;
  width: min(72%, 30rem);
  height: min(70%, 26rem);
  overflow: visible;
  filter: drop-shadow(0 16px 24px var(--haze));
}

.state-map-arrival path {
  fill: var(--accent);
  stroke: color-mix(in srgb, var(--card) 86%, var(--line));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.state-map-arrival span {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  padding: .42rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-size: .72rem;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.state-map-canvas {
  opacity: .28;
  transition: opacity 420ms ease;
}

.state-map-column.is-map-ready .state-map-arrival {
  opacity: 0;
  visibility: hidden;
}

.state-map-column.is-map-ready .state-map-canvas {
  opacity: 1;
}

.state-explorer.is-national-entry .state-explorer-controls,
.state-explorer.is-national-entry .state-results-panel {
  animation: sf-map-supporting-content 480ms 160ms cubic-bezier(.22, 1, .36, 1) both;
}

.state-explorer.is-national-entry .state-results-panel {
  animation-delay: 230ms;
}

.state-explorer[data-map-departing="true"] .state-region:not(.is-transitioning) {
  opacity: .16;
}

.state-explorer[data-map-departing="true"] .state-region.is-transitioning > path:first-of-type {
  fill: var(--spark);
  filter: drop-shadow(0 10px 18px var(--haze));
}

@keyframes sf-map-pulse {
  from { opacity: .42; transform: scale(.92); }
  to { opacity: .8; transform: scale(1.06); }
}

@keyframes sf-map-supporting-content {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 47.99rem) {
  ::view-transition-group(sf-map-stage) {
    animation-duration: 620ms;
  }

  .state-map-arrival svg {
    width: 78%;
    height: 68%;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(sf-map-stage),
  ::view-transition-old(sf-map-stage),
  ::view-transition-new(sf-map-stage) {
    animation-duration: 1ms !important;
  }

  .state-map-arrival::after,
  .state-explorer.is-national-entry .state-explorer-controls,
  .state-explorer.is-national-entry .state-results-panel {
    animation: none !important;
  }

  .state-map-arrival,
  .state-map-canvas {
    transition-duration: 1ms !important;
  }
}