/*
  Signature KB Technologies animated map layer
  Scope: hero wallpaper only
  Undo:
    1. Remove this stylesheet from index.html
    2. Remove <div id="worldMapWallpaper">
    3. Remove amCharts/world-map script tags from index.html
    4. Delete this file and /assets/js/world-map.js
*/

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.world-map-wallpaper {
  --map-wallpaper-opacity: 0.62;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 118vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  filter: saturate(1.15);
  animation: signkb-map-fade-in 4.5s ease-out 0.4s forwards;
}

@keyframes signkb-map-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: var(--map-wallpaper-opacity);
  }
}

.world-map-wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 32%, rgba(45, 255, 210, 0.12), transparent 24%),
    radial-gradient(circle at 28% 45%, rgba(120, 104, 255, 0.14), transparent 30%),
    linear-gradient(90deg, rgba(9, 24, 35, 0.26), rgba(9, 24, 35, 0.08) 42%, rgba(9, 24, 35, 0.28));
}

.world-map-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 24, 35, 0.88) 0%, rgba(9, 24, 35, 0.38) 34%, rgba(9, 24, 35, 0.26) 72%, rgba(9, 24, 35, 0.84) 100%),
    linear-gradient(180deg, rgba(9, 24, 35, 0.58) 0%, rgba(9, 24, 35, 0.08) 42%, rgba(9, 24, 35, 0.72) 100%);
}

#worldMapWallpaper {
  width: 100%;
  height: 100%;
  min-height: 560px;
}

.hero > *:not(.world-map-wallpaper) {
  position: relative;
  z-index: 5;
}

@media (max-width: 860px) {
  .world-map-wallpaper {
    --map-wallpaper-opacity: 0.36;
    width: 132vw;
  }

  #worldMapWallpaper {
    min-height: 520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-map-wallpaper {
    --map-wallpaper-opacity: 0.42;
    opacity: var(--map-wallpaper-opacity);
    animation: none;
  }
}