/* === Reset & Base === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: #000;
  overflow: hidden;
  font-family: 'Lato', Arial, sans-serif;
  color: #fff;
}

/* === Map Container === */
#map {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: url('../images/map_bg.jpg') 0% 0% / cover no-repeat;
  transform-origin: 0 0;
}

/* === Dot Base === */
.dot {
  display: none;
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}

/* === Dot Type Base (rendered but hidden until JS activates) === */
.dot_customer,
.dot_vendor {
  display: block;
  z-index: 500;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

/* ::before pseudo-element base for outer glow */
.dot_customer::before,
.dot_vendor::before {
  display: block;
  content: "";
  position: absolute;
  border-radius: 50%;
  height: 9px;
  width: 9px;
  background: transparent;
  box-shadow: none;
}

/* === JS-controlled Active States === */

/* Gold active dot */
.dot--gold-active {
  opacity: 1;
  box-shadow: rgb(253, 197, 27) 0px 0px 2px 1px inset;
}

.dot--gold-active::before {
  box-shadow: rgba(253, 197, 22, 0.75) 0px 0px 12px 4px;
}

/* Blue active dot */
.dot--blue-active {
  opacity: 1;
  box-shadow: rgb(27, 117, 253) 0px 0px 2px 1px inset;
}

.dot--blue-active::before {
  box-shadow: rgba(27, 117, 253, 0.75) 0px 0px 12px 4px;
}

/* === Dot Size Scaling — Customer (always active) === */
.dot_scale_c1   { transform: scale(0.8); }
.dot_scale_c2   { transform: scale(1.0); }
.dot_scale_c3   { transform: scale(1.15); }
.dot_scale_c4   { transform: scale(1.3); }
.dot_scale_c5   { transform: scale(1.5); }
.dot_scale_cmax { transform: scale(1.8); }

/* === Dot Size Scaling — Vendor (always active) === */
.dot_scale_v1   { transform: scale(0.8); }
.dot_scale_v2   { transform: scale(1.0); }
.dot_scale_v3   { transform: scale(1.15); }
.dot_scale_v4   { transform: scale(1.3); }
.dot_scale_v5   { transform: scale(1.5); }
.dot_scale_vmax { transform: scale(1.8); }

/* === Pulse Animation (every 12th active dot, reduced for low-end perf) === */
.dot--gold-active:nth-child(12n),
.dot--blue-active:nth-child(12n) {
  -webkit-animation: animated_dot 4s ease-in-out infinite;
  animation: animated_dot 4s ease-in-out infinite;
}

@-webkit-keyframes animated_dot {
  0%, 45% { opacity: 1; }
  50%     { opacity: 0.5; }
  55%, 100% { opacity: 1; }
}

@keyframes animated_dot {
  0%, 45% { opacity: 1; }
  50%     { opacity: 0.5; }
  55%, 100% { opacity: 1; }
}

/* === Legend Badge (bottom-left circle) === */
#legend {
  position: absolute;
  left: 95px;
  bottom: 112px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.75) 0px 12px 18px 0px;
  z-index: 1000;
  overflow: hidden;
  animation: bounceInLeft 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

#legend_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 260px;
  margin: 20px;
  border-radius: 50%;
  background: url('../images/legend_bg.png') 50% 50% no-repeat #333;
  box-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px 0px inset;
  text-align: center;
}

/* Title always gold */
#legend_content h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2px;
  margin-bottom: 14px;
  color: rgb(253, 197, 27);
}

#legend_stats {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 400;
  color: #b2b2b2;
}

#legend_stats > * + * {
  margin-top: 6px;
}

.legend_row {
  display: flex;
  align-items: center;
}

.legend_row > * + * {
  margin-left: 8px;
}

/* Legend dot samples — fixed colors */
.legend_dot_sample {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.legend_dot_gold {
  box-shadow:
    rgb(253, 197, 27) 0px 0px 2px 1px inset,
    rgba(253, 197, 22, 0.75) 0px 0px 12px 4px;
}

.legend_dot_blue {
  box-shadow:
    rgb(27, 117, 253) 0px 0px 2px 1px inset,
    rgba(27, 117, 253, 0.75) 0px 0px 12px 4px;
}

#update_info {
  font-size: 10px;
  color: #666;
  margin-top: 6px;
}

/* === Real Data Badge (top-right) === */
#livedata {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 1000;
  text-align: right;
  animation: pulseGlow 4s ease-in-out infinite;
}

#livedata_title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(253, 197, 27);
}

#livedata_date {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: #888;
  margin-top: 2px;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.3; }
}

/* === HQ Dot (Düsseldorf — JS-controlled color + visibility) === */
.dot_hq {
  display: block;
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  z-index: 600;
  opacity: 0;
  transition: opacity 1s ease-in-out, box-shadow 0.3s ease;
  transform: scale(1.5);
  will-change: opacity, box-shadow;
}

.dot_hq::before {
  display: block;
  content: "";
  position: absolute;
  border-radius: 50%;
  height: 9px;
  width: 9px;
  background: transparent;
  transition: box-shadow 0.3s ease;
  box-shadow: none;
}

.dot_hq--visible {
  opacity: 1;
}

/* HQ Dot — Gold style (vendor phase) */
.dot_hq--gold {
  box-shadow: rgb(253, 197, 27) 0px 0px 2px 1px inset;
}
.dot_hq--gold::before {
  box-shadow: rgba(253, 197, 22, 0.75) 0px 0px 14px 6px;
}

/* HQ Dot — Blue style (subscriber phase) */
.dot_hq--blue {
  box-shadow: rgb(27, 117, 253) 0px 0px 2px 1px inset;
}
.dot_hq--blue::before {
  box-shadow: rgba(27, 117, 253, 0.75) 0px 0px 14px 6px;
}

/* === Connection Lines (shared SVG base) === */
#customer_lines,
#vendor_lines {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 450;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

/* JS-controlled line visibility */
#customer_lines.lines--visible,
#vendor_lines.lines--visible {
  opacity: 1;
}

/* --- Customer Lines (gold) --- */
.customer-line {
  stroke: rgba(253, 197, 27, 0.6);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

/* --- Vendor Lines (blue) --- */
.vendor-line {
  stroke: rgba(27, 117, 253, 0.6);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

/* JS-controlled line animation */
.line--animate {
  -webkit-animation: drawLine 2s ease-in-out forwards;
  animation: drawLine 2s ease-in-out forwards;
}

/* Line animation reset (force stop + rewind via inline style) */
.line--reset {
  animation: none !important;
}

@-webkit-keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* === Entrance Animations === */
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-3000px);
  }
  60% {
    opacity: 1;
    transform: translateX(25px);
  }
  75% {
    transform: translateX(-10px);
  }
  90% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}