/* OE – US Map
 *
 * Sits on a navy hero (e.g. oe-section-primary), so it has no background of
 * its own. Zoom state lives on the SVG as data-level="1|2|3" (Nation, State,
 * Metro); script.js sets it and tweens the viewBox. Everything else here is
 * a CSS transition keyed off that attribute.
 */

.oe-block-us-map {
  --oe-us-map-dot: var(--oe-color-secondary-8);
  --oe-us-map-light: var(--oe-color-secondary-9-300);
  --oe-us-map-accent: var(--oe-color-primary);
  --oe-us-map-pin: var(--oe-color-primary-4);
  --oe-us-map-text: var(--oe-color-primary-4);
  --oe-us-map-text-soft: color-mix(in srgb, var(--oe-color-primary-4) 80%, transparent);
  --oe-us-map-line: color-mix(in srgb, var(--oe-color-primary-4) 28%, transparent);
  --oe-us-map-track: color-mix(in srgb, var(--oe-color-primary-4) 14%, transparent);
  container: oe-us-map / inline-size;
  position: relative;
  color: var(--oe-us-map-text);
}

.oe-block-us-map *,
.oe-block-us-map *::before,
.oe-block-us-map *::after {
  box-sizing: border-box;
}

.oe-block-us-map__map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 657 / 360;
  overflow: hidden;
  /* Soft edges so the map blends into the section instead of sitting in a frame */
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent), linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent), linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  mask-composite: intersect;
}

/* ---------- Nation: US dot grid fades in, metro pins pulse ---------- */

.oe-block-us-map__us {
  transition: opacity .9s ease;
}

.oe-block-us-map__us circle {
  fill: var(--oe-us-map-dot);
  opacity: 0;
  animation: oe-us-map-dot-in .5s ease forwards;
  animation-delay: calc(var(--i) * .9s);
  transition: fill .6s;
}

/* Wait until the map is in view (script.js adds .is-js at once, .is-visible on scroll) */
.oe-block-us-map.is-js:not(.is-visible) .oe-block-us-map__us circle {
  animation-play-state: paused;
}

.oe-block-us-map__metros {
  transition: opacity .5s;
}

.oe-block-us-map__metro-pin,
.oe-block-us-map__city-pin {
  fill: var(--oe-us-map-pin);
}

.oe-block-us-map__metro-ring,
.oe-block-us-map__city-ring {
  fill: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.oe-block-us-map__metro-ring {
  stroke: var(--oe-us-map-accent);
  stroke-width: 2;
}

.oe-block-us-map__city-ring {
  stroke: var(--oe-us-map-pin);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Rings pulse twice each time their level is shown, then stop (WCAG 2.2.2: under 5s) */
.oe-block-us-map.is-visible [data-level="1"] .oe-block-us-map__metro-ring,
.oe-block-us-map.is-visible [data-level="2"] .oe-block-us-map__city-ring,
.oe-block-us-map.is-visible [data-level="3"] .oe-block-us-map__city--focus .oe-block-us-map__city-ring {
  animation: oe-us-map-ring 2.4s ease-out 2 forwards;
}

/* ---------- State: Ohio outline, fine grid and city pins ---------- */

.oe-block-us-map__ohio {
  fill: none;
  stroke: var(--oe-us-map-light);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity .8s;
}

.oe-block-us-map__fine {
  fill: var(--oe-us-map-light);
  opacity: 0;
  transition: opacity .9s;
}

.oe-block-us-map__fine circle {
  transition: fill .7s, r .7s;
}

.oe-block-us-map__cities {
  opacity: 0;
  transition: opacity .6s;
}

.oe-block-us-map__city {
  transition: opacity .5s;
}

[data-level="2"] .oe-block-us-map__ohio-dot {
  fill: var(--oe-us-map-light);
}

[data-level="2"] .oe-block-us-map__us {
  opacity: .06;
}

[data-level="3"] .oe-block-us-map__us,
[data-level="2"] .oe-block-us-map__metros,
[data-level="3"] .oe-block-us-map__metros {
  opacity: 0;
}

[data-level="2"] .oe-block-us-map__ohio,
[data-level="3"] .oe-block-us-map__ohio,
[data-level="2"] .oe-block-us-map__fine,
[data-level="3"] .oe-block-us-map__fine,
[data-level="2"] .oe-block-us-map__cities,
[data-level="3"] .oe-block-us-map__cities {
  opacity: 1;
}

/* ---------- Metro: grid dims, Columbus metro cells light up ---------- */

[data-level="3"] .oe-block-us-map__fine circle {
  fill: var(--oe-us-map-dot);
  r: .4px;
}

[data-level="3"] .oe-block-us-map__fine .oe-block-us-map__msa {
  fill: var(--oe-us-map-accent);
  r: .48px;
}

[data-level="3"] .oe-block-us-map__city:not(.oe-block-us-map__city--focus) {
  opacity: 0;
}

/* ---------- Below the map: readout (left) and zoom buttons (right) ---------- */

.oe-block-us-map__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--oe-spacing-base) var(--oe-spacing-medium);
  margin-top: var(--oe-spacing-base);
}

.oe-block-us-map__readout {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--oe-spacing-xsmall);
}

.oe-block-us-map__number {
  font-size: clamp(var(--oe-font-size-xlarge), 7cqi, var(--oe-font-size-2xlarge));
  line-height: var(--oe-line-height-medium);
  font-variant-numeric: tabular-nums;
  color: var(--oe-us-map-text);
}

.oe-block-us-map__unit {
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-us-map-text-soft);
}

.oe-block-us-map__place {
  grid-column: 1 / -1;
  margin-top: var(--oe-spacing-2xsmall);
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-us-map-light);
}

/* Visually hidden live region; two classes so the theme's <p> margins lose */
.oe-block-us-map .oe-block-us-map__live {
  position: absolute;
  width: var(--oe-spacing-5xsmall);
  height: var(--oe-spacing-5xsmall);
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.oe-block-us-map__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oe-spacing-xsmall);
}

.oe-block-us-map .oe-block-us-map__level,
.oe-block-us-map .oe-block-us-map__replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--oe-sizing-xlarge);
  margin: 0;
  padding: 0 var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-us-map-line);
  border-radius: var(--oe-border-radius-small);
  background: transparent;
  color: var(--oe-us-map-text-soft);
  font-family: inherit;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.oe-block-us-map .oe-block-us-map__level:hover,
.oe-block-us-map .oe-block-us-map__replay:hover {
  background: var(--oe-color-trans-light-10);
  color: var(--oe-us-map-text);
}

.oe-block-us-map .oe-block-us-map__level[aria-pressed="true"] {
  border-color: var(--oe-us-map-pin);
  background: var(--oe-us-map-pin);
  color: var(--oe-color-heritage-blue);
}

.oe-block-us-map .oe-block-us-map__level:focus-visible,
.oe-block-us-map .oe-block-us-map__replay:focus-visible {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-us-map-accent);
  outline-offset: var(--oe-spacing-3xsmall);
}

/* Icon-only, so square */
.oe-block-us-map .oe-block-us-map__replay {
  width: var(--oe-sizing-xlarge);
  padding: 0;
}

.oe-block-us-map__progress {
  position: relative;
  display: block;
  height: var(--oe-spacing-3xsmall);
  margin-top: var(--oe-spacing-base);
  overflow: hidden;
  border-radius: var(--oe-border-radius-xsmall);
  background: var(--oe-us-map-track);
}

.oe-block-us-map__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--oe-us-map-accent);
  transition: width .6s ease;
}

/* ---------- Editor and reduced motion: no fade-in, no pulses ---------- */

@keyframes oe-us-map-dot-in {
  to { opacity: 1; }
}

@keyframes oe-us-map-ring {
  0% { transform: scale(.5); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

.oe-block-us-map--static .oe-block-us-map__us circle {
  animation: none;
  opacity: 1;
}

.oe-block-us-map--static .oe-block-us-map__metro-ring,
.oe-block-us-map--static .oe-block-us-map__city-ring {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .oe-block-us-map .oe-block-us-map__us circle {
    animation: none;
    opacity: 1;
  }

  .oe-block-us-map .oe-block-us-map__metro-ring,
  .oe-block-us-map .oe-block-us-map__city-ring {
    animation: none !important;
  }

  .oe-block-us-map *,
  .oe-block-us-map *::before,
  .oe-block-us-map *::after {
    transition-duration: 0s !important;
  }
}