frontend/packages/icons/src/navigation.module.css

.rubles {
	pointer-events: none;
	color: var(--mantine-color-green-8);
	stroke: currentColor;

	& path {
		opacity: 0;
		--flight-x: -7px;
		--flight-rotation: -20deg;
		--flight-delay: 0ms;
	}

	& path:nth-child(2) {
		--flight-x: 0px;
		--flight-rotation: 8deg;
		--flight-delay: 120ms;
	}

	& path:nth-child(3) {
		--flight-x: 7px;
		--flight-rotation: 24deg;
		--flight-delay: 240ms;
	}
}

.portfolioRuble {
	stroke: var(--mantine-color-green-8);
	opacity: 0;
}

.stockArrow {
	transform-origin: 21px 5px;
}

.topSlider,
.bottomSlider {
	fill: var(--mantine-color-body);
}

@media (prefers-reduced-motion: no-preference) {
	.drawStroke,
	.couponLines path {
		stroke-dasharray: 1;
	}

	.topSlider {
		--slider-offset: 3px;
		--slider-delay: 0ms;
	}

	.bottomSlider {
		--slider-offset: -3px;
		--slider-delay: 160ms;
	}

	.couponLines path:nth-child(2) {
		--line-delay: 140ms;
	}

	.couponLines path:nth-child(3) {
		--line-delay: 280ms;
	}

	svg[data-icon-animating] {
		.rubles path {
			animation: ruble-fly 800ms ease-out var(--flight-delay) both;
		}
		.portfolioHandle {
			animation: handle-lift 1200ms ease-in-out;
		}
		.portfolioLid {
			animation: lid-open 1200ms ease-in-out;
		}
		.portfolioRuble {
			animation: portfolio-ruble-reveal 1200ms ease-in-out;
		}
		.stockArrow {
			animation: arrow-pop 300ms ease-out 400ms both;
		}
		.couponLines path {
			animation: stroke-draw 300ms ease-out var(--line-delay, 0ms) both;
		}
		.drawStroke {
			animation: stroke-draw 450ms ease-out;
		}
		:is(.topSlider, .bottomSlider) {
			animation: slider-slide 650ms ease-in-out var(--slider-delay) both;
		}
	}
}

@keyframes ruble-fly {
	0% {
		opacity: 0;
		transform: translate(0, 4px);
	}
	20%,
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(var(--flight-x), -10px) rotate(var(--flight-rotation));
	}
}

@keyframes handle-lift {
	0%,
	100% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-3px);
	}
	40%,
	75% {
		transform: translateY(-3px);
	}
}

@keyframes lid-open {
	0%,
	15%,
	100% {
		transform: translateY(0);
	}
	40%,
	75% {
		transform: translateY(-3px);
	}
}

@keyframes portfolio-ruble-reveal {
	0%,
	25%,
	100% {
		opacity: 0;
		transform: translateY(2px);
	}
	40%,
	75% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes arrow-pop {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}
	60% {
		opacity: 1;
		transform: scale(1.2);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes stroke-draw {
	0% {
		stroke-dashoffset: 1;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes slider-slide {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(var(--slider-offset));
	}
}