refactor: enforce frontend view model boundaries

packages/icons/src/navigation.module.css

@@ -0,0 +1,179 @@
+.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));
+	}
+}