#level-1 > path,
#level-2 > path{
    fill: transparent;
  }

:root{
	--arrow: #FFA200;
	--arrow2: #ec1117;
	--timeline: 20s; 
	--ease: ease-in-out;
}

#Europe_blank_laea_location_map{
	stroke: rgba(255,255,255,.3);
	stroke-width: 2;
}

#eu-mapa{
	overflow: hidden;
}

#eu-mapa svg{
	margin-top: -150px !important;
	margin-bottom: -50px !important;
    display: block;
    margin-left: -100px;
    width: calc(100% + 200px);
}

@keyframes line1 {
  0%, 4% { fill: transparent; }
  14%    { fill: var(--arrow); }
  18%    { fill: var(--arrow); }
  28%    { fill: transparent; }
  100%   { fill: transparent; }
}

/* Line-2: S=12%, E=26% */
@keyframes line2 {
  0%, 12% { fill: transparent; }
  22%     { fill: var(--arrow); }
  26%     { fill: var(--arrow); }
  36%     { fill: transparent; }
  100%    { fill: transparent; }
}

/* Line-3: S=22%, E=36% */
@keyframes line3 {
  0%, 22% { fill: transparent; }
  32%     { fill: var(--arrow); }
  36%     { fill: var(--arrow); }
  46%     { fill: transparent; }
  100%    { fill: transparent; }
}

/* Line-4: S=32%, E=48% */
@keyframes line4 {
  0%, 32% { fill: transparent; }
  42%     { fill: var(--arrow); }
  48%     { fill: var(--arrow); }
  58%     { fill: transparent; }
  100%    { fill: transparent; }
}

/* Line-5: S=44%, E=60% */
@keyframes line5 {
  0%, 44% { fill: transparent; }
  54%     { fill: var(--arrow); }
  60%     { fill: var(--arrow); }
  70%     { fill: transparent; }
  100%    { fill: transparent; }
}

/* Line-6: S=56%, E=70% */
@keyframes line6 {
  0%, 56% { fill: transparent; }
  66%     { fill: var(--arrow); }
  70%     { fill: var(--arrow); }
  80%     { fill: transparent; }
  100%    { fill: transparent; }
}

/* Line-7: S=66%, E=80% */
@keyframes line7 {
  0%, 66% { fill: transparent; }
  76%     { fill: var(--arrow); }
  80%     { fill: var(--arrow); }
  90%     { fill: transparent; }
  100%    { fill: transparent; }
}

/* Line-8: S=76%, E=88% */
@keyframes line8 {
  0%, 76% { fill: transparent; }
  86%     { fill: var(--arrow); }
  88%     { fill: var(--arrow); }
  98%     { fill: transparent; }
  100%    { fill: transparent; }
}

  /* Přiřazení animací – všechny běží na stejné „časové ose“,
     ale každá má jiné „okno“ viditelnosti zapsané v keyframes. */
#level-2 #Line-1 { animation: line1 var(--timeline) var(--ease) infinite; }
#level-2 #Line-2 { animation: line2 var(--timeline) var(--ease) infinite; }
#level-2 #Line-3 { animation: line3 var(--timeline) var(--ease) infinite; }
#level-2 #Line-4 { animation: line4 var(--timeline) var(--ease) infinite; }
#level-2 #Line-5 { animation: line5 var(--timeline) var(--ease) infinite; }
#level-2 #Line-6 { animation: line6 var(--timeline) var(--ease) infinite; }
#level-2 #Line-7 { animation: line7 var(--timeline) var(--ease) infinite; }
#level-2 #Line-8 { animation: line8 var(--timeline) var(--ease) infinite; }
#level-2 #Line-9 { animation: line1 var(--timeline) var(--ease) infinite; }
#level-2 #Line-10 { animation: line2 var(--timeline) var(--ease) infinite; }
#level-2 #Line-11 { animation: line3 var(--timeline) var(--ease) infinite; }
#level-2 #Line-12 { animation: line4 var(--timeline) var(--ease) infinite; }
#level-2 #Line-13 { animation: line5 var(--timeline) var(--ease) infinite; }
#level-2 #Line-14 { animation: line6 var(--timeline) var(--ease) infinite; }
#level-2 #Line-15 { animation: line7 var(--timeline) var(--ease) infinite; }


@keyframes line11 {
  0%, 4% { fill: transparent; }
  14%    { fill: var(--arrow2); }
  18%    { fill: var(--arrow2); }
  28%    { fill: transparent; }
  100%   { fill: transparent; }
}

/* Line-2: S=12%, E=26% */
@keyframes line12 {
  0%, 12% { fill: transparent; }
  22%     { fill: var(--arrow2); }
  26%     { fill: var(--arrow2); }
  36%     { fill: transparent; }
  100%    { fill: transparent; }
}

/* Line-3: S=22%, E=36% */
@keyframes line13 {
  0%, 22% { fill: transparent; }
  32%     { fill: var(--arrow2); }
  36%     { fill: var(--arrow2); }
  46%     { fill: transparent; }
  100%    { fill: transparent; }
}

#level-1 #Line-1 { animation: line11 var(--timeline) var(--ease) infinite; }
#level-1 #Line-2 { animation: line12 var(--timeline) var(--ease) infinite; }
#level-1 #Line-3 { animation: line13 var(--timeline) var(--ease) infinite; }
#level-1 #Line-4 { animation: line11 var(--timeline) var(--ease) infinite; }
#level-1 #Line-5 { animation: line12 var(--timeline) var(--ease) infinite; }
#level-1 #Line-6 { animation: line13 var(--timeline) var(--ease) infinite; }