* {
	margin: 0;
	box-sizing: border-box;
	font-family: "Source Sans 3", sans-serif, system-ui;
}

.progress-animation { margin: 0 calc(0px - var(--pv-space-m) - 2px); }

.container.wdb-ff-path-animation-container {
	padding: 0;
	width: 100%;
	height: 100%;
}

/* FadeIn for container */
.container.wdb-ff-path-animation-container {
	opacity: 0;
	animation: fadeIn 1.5s ease-in 1s forwards;
}
@keyframes fadeIn {
	0% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 1; }
}

.animation-wrapper {
	position: relative;
	width: 100%;
	/* Set aspect ratio to match the SVG's viewBox */
	aspect-ratio: 1440 / 770;
	margin-top: 0;
}

.svg-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; /* Fill the aspect-ratio-defined wrapper */
	background-image: url('Veloweg_Deko.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
html[lang="fr-FR"] .svg-wrapper {
	background-image: url('Veloweg_Deko_FR.svg');
}
.svg-wrapper svg {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0;
}

/* Goal and Progress markers*/
.svg-wrapper .progress,
.svg-wrapper .goal-marker {
	background-image: url('Progress.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}
.svg-wrapper .goal-marker { background-image: none; }
.svg-wrapper .progress.transparent { background-image: url('Progress-t.svg'); }
.svg-wrapper .goal-marker.transparent { display: none; }
.svg-wrapper .progress-label, .svg-wrapper .goal-label {
	text-align: right;
	overflow-wrap: normal;
	letter-spacing: -1px;
}
.svg-wrapper .goal-label { color: rgb(226 144 154); }
.progress-label.success {
	font-size: 48px;
	transform: translate(calc(-50% + 0px), -94px) rotate(90deg);
	color: #00800094 !important;
}

.object {
	color: white;
	width: var(--object-width, 60px); /* scales via JS with container width */
	height: auto;
	clip-path: url(#velo-clip);
	/*background: green;*/
	position: absolute;
	top: 0;
	left: 0;
	/* This path will be replaced by JavaScript, but provides a fallback */
	offset-path: path("M-3.2,186.17c0,0,44.52-55.54,80.7-82.67c44-33,136-80,218.47-89.35c94.09-10.67,129.19,18.4,151.65,30.43 C475.5,59.5,628.63,171.89,631.96,174.35c0,0,81.02,70.61,157.56,73.54c67.98,2.61,241.34-123.59,241.34-123.59");
	transform-origin: 0 0;
    /* Base anchor plus optional perpendicular (normal) offset to the path via CSS variable */
    transform: translate(-50%, -100%) translate(0px, var(--offset-normal, 0px));
    /* Align bottom-centre of box to motion path */
    offset-anchor: unset;
	offset-rotate: auto;
	opacity: 0;
	animation: followpath 15s ease-in-out forwards; /* duration overwritten by js */
}
.repeat .object {
	animation-name: followpath-repeat;
	animation-iteration-count: infinite;
}

@keyframes followpath {
  0% {
    opacity: 0;
    /* Start at mapped start percent, plus per-object shift */
    offset-distance: calc(var(--offset-start-pct, 0%) + var(--distance-shift-pct, 0%));
  }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% {
    opacity: 1;
    /* End at mapped progress percent, minus finish gap, plus per-object shift */
    offset-distance: calc(var(--end-target-pct, 100%) + var(--distance-shift-pct, 0%));
  }
}
@keyframes followpath-repeat {
  0% {
    opacity: 0;
    offset-distance: calc(var(--offset-start-pct, 0%) + var(--distance-shift-pct, 0%));
  }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% {
    opacity: 0;
    offset-distance: calc(var(--end-target-pct, 100%) + var(--distance-shift-pct, 0%));
  }
}


/* DEBUG */
/*.object { display: none; }*/