Harmonize transition durations

src/styles/_color.scss

@@ -56,10 +56,6 @@ $main-track:		$flashy;
 $off-track:			#0000ff;
 $hitchhiking:		#ff7814;
 
-//Tracks
-$track-start:		$main-track;
-$track-end:			$hitchhiking;
-
 //Loader
 $loader: 			$default-bg;
 $loader-bg:			$default;

src/styles/_common.scss

@@ -2,6 +2,20 @@
 @use "@styles/color";
 @use "sass:color" as sass-color;
 
+/* Variables transferred to JS */
+
+:root {
+	--space: #{color.$space};
+	--horizon: #{color.$horizon};
+	--track-main: #{color.$main-track};
+	--track-off-track: #{color.$off-track};
+	--track-hitchhiking: #{color.$hitchhiking};
+	--track-width: 4px;
+	--button-width: 36px;
+	--trans-quick: #{var.$trans-quick};
+	--trans-slow: #{var.$trans-slow};
+}
+
 /* Animations */
 
 @-webkit-keyframes fadeIn {

src/styles/_lightbox.scss

@@ -160,7 +160,7 @@ body.lb-disable-scrolling {
 					position: absolute;
 					top: 50%;
 					transform: translateY(-50%);
-					transition: opacity 0.3s, color 0.3s;
+					transition: opacity var.$trans-quick, color var.$trans-quick;
 					opacity: 0;
 					outline: none;
 					font-size: 2em;

src/styles/_mobile.scss

@@ -6,13 +6,15 @@
 	$panel-width-max: $panel-width;
 	$panel-actual-width: $panel-width;
 
+	:root {
+		--button-width: 51px;
+	}
+
 	.desktop {
 		display: none !important;
 	}
 
 	.projects {
-		--button-width: 51px;
-
 		.panel-control-elem {
 			font-size: 2em;
 		}

src/styles/_page.project.map.scss

@@ -19,6 +19,18 @@ $thumbnail-max-size: 60px;
 		pointer-events: none;
 	}
 
+	.maplibregl-marker {
+		.spot-icon-stack:is(.media, .message) {
+			display: inline-block;
+			transform-origin: center bottom;
+			transition: transform var.$trans-quick;
+		}
+
+		&:hover .spot-icon-stack:is(.media, .message) {
+			transform: scale(1.15);
+		}
+	}
+
 	.maplibregl-popup {
 		max-width: 300px;
 	}
@@ -84,7 +96,7 @@ $thumbnail-max-size: 60px;
 					width: auto;
 					height: auto;
 					image-orientation: from-image;
-					transition: All 0.2s;
+					transition: All var.$trans-quick;
 					border-radius: var.$block-radius;
 				}
 
@@ -147,7 +159,7 @@ $thumbnail-max-size: 60px;
 
 	.maplibregl-ctrl-bottom-right {
 		margin: var.$block-spacing;
-		transition: transform 0.5s;
+		transition: transform var.$trans-slow;
 		@extend .panel-control;
 		
 		.maplibregl-ctrl {

src/styles/_page.project.panel.feed.scss

@@ -106,7 +106,7 @@
 					line-height: normal;
 					box-sizing: border-box;
 					border-radius: 0 0 var.$block-radius var.$block-radius;
-					transition: opacity 0.3s;
+					transition: opacity var.$trans-quick;
 					cursor: auto;
 					font-size: 0.9em;
 

src/styles/_page.project.panel.scss

@@ -55,7 +55,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 		user-select: none;
 		width: #{$panel-width};
 		max-width: calc(#{$panel-width-max});
-		transition: transform 0.5s;
+		transition: transform var.$trans-slow;
 		
 		&.moving {
 			cursor: grabbing;

src/styles/_page.project.panel.settings.scss

@@ -168,7 +168,7 @@
 	#title {
 		left: calc(100% + var(--button-width) + 2 * var.$block-spacing);
 		max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
-		transition: max-width 0.5s;
+		transition: max-width var.$trans-slow;
 
 		.panel-control-elem {
 			height: var(--button-width);

src/styles/_page.project.scss

@@ -8,14 +8,6 @@
 @use '@styles/page.project.map' as map;
 
 .projects {
-	--space: #{color.$space};
-	--horizon: #{color.$horizon};
-	--track-main: #{color.$main-track};
-	--track-off-track: #{color.$off-track};
-	--track-hitchhiking: #{color.$hitchhiking};
-	--track-width: 4px;
-	--button-width: 36px;
-
 	overflow: hidden;
 	position: absolute;
 	top: 0;
@@ -40,7 +32,7 @@
 		top: 0;
 		bottom: 0;
 		right: 0;
-		transition: transform 0.5s;
+		transition: transform var.$trans-slow;
 
 		.loader {
 			position: absolute;
@@ -74,7 +66,7 @@
 			}
 			
 			.spot-icon {
-				transition: color 0.3s, text-shadow 0.3s;
+				transition: color var.$trans-quick, text-shadow var.$trans-quick;
 			}
 		}
 	}
@@ -104,14 +96,5 @@
 				color: color.$media;
 			}
 		}
-
-		&.track {
-			.track-start {
-				color: color.$track-start;
-			}
-			.track-end {
-				color: color.$track-end;
-			}
-		}
 	}
 }

src/styles/_var.scss

@@ -9,4 +9,8 @@ $block-shadow: 3px;
 
 //Common elements
 $map-shadow: 2px 2px $block-shadow 0px color.$over-img-shadow;
-$elem-shadow: 0px 1px 1px color.$over-img-shadow;
+$elem-shadow: 0px 1px 1px color.$over-img-shadow;
+
+//Transitions
+$trans-quick: 200ms;
+$trans-slow: 500ms;

src/styles/_vue.scss

@@ -1,6 +1,8 @@
+@use '@styles/var';
+
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity var.$trans-quick ease;
 }
 
 .fade-enter-from,