/* Location map — staging SVG + scroll-scaled radial reveal */

.map {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #3c4142;
  line-height: 0;
}

.map__svg {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * Staging .radiaal-animation
 * IX2 a-13: scale 1 → 100 while scrolling through map (reveals SVG)
 * Starts as a small spotlight; expands until map is fully visible.
 */
.map__vignette {
  z-index: 2;
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  max-width: 100%;
  background-image: radial-gradient(circle, #0000, #000000f2 5%);
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* After scroll reveal completes, allow vignette to stay large */
.map__vignette.is-revealed {
  transform: scale(100);
}

/* Tablet: staging swaps to alternate map as CSS background, hides SVG */
@media screen and (max-width: 991px) {
  .map {
    background-color: #3c4142;
    background-image: url("../assets/clean/map-mobile.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 660px;
  }

  .map__svg {
    height: 660px;
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .map {
    height: 460px;
  }
}

@media screen and (max-width: 479px) {
  .map {
    height: 360px;
  }

  .map__svg {
    height: 100%;
  }
}