fix: animations timing

src/lib/animations/Products/Products.svelte

@@ -131,7 +131,7 @@
 		remaning: Infinity
 	};
 
-	const animScale: Scale = [0.1, 1];
+	const animScale: Scale = [0.075, 1];
 	const productsScales = products.map((_, idx) => {
 		const diff = animScale[1] - animScale[0];
 		const step = diff / products.length;
@@ -192,7 +192,10 @@
 	}}
 >
 	<div class="sticky-wrapper">
-		{#if scrollInfo.percentage < 0.1}
+		<!-- <div class="debug">
+			<pre>{scrollInfo.percentage}</pre>
+		</div> -->
+		{#if scrollInfo.percentage < 0.075}
 			<div
 				class="main-text"
 				out:fly={{ duration: 250, y: -300 }}
@@ -221,7 +224,7 @@
 				class="products"
 				out:fly={{ duration: 250, y: 300 }}
 				in:fly={{ duration: 500, delay: 250, y: 300 }}
-				data-active={scrollInfo.percentage > 0.1 ? '' : undefined}
+				data-active={scrollInfo.percentage > 0.075 ? '' : undefined}
 			>
 				<div class="text" id="pd-{$elId}">
 					<ScrollIndicator percentage={toScale(scrollInfo.percentage, animScale, [0, 1])} />
@@ -346,12 +349,6 @@
 		}
 	}
 
-	// .debug {
-	// 	position: absolute;
-	// 	top: 8rem;
-	// 	left: 0;
-	// }
-
 	.sticky-wrapper {
 		display: flex;
 		flex-direction: column;

src/lib/animations/Products/auth/index.ts

@@ -56,14 +56,14 @@ const execute = async () => {
 	const { update } = state.reset();
 
 	await Promise.all([
-		safeAnimate(box, { x: 310, y: 32, opacity: 0 }, { duration: 0.5 })?.finished,
+		safeAnimate(box, { x: 310, y: 140, opacity: 0 }, { duration: 0.5 })?.finished,
 		safeAnimate(code, { x: 200, y: 460, opacity: 0 }, { duration: 0.5 })?.finished,
 		safeAnimate(phone, { x: 0, y: 0 }, { duration: 0.5 })?.finished,
 		safeAnimate(controls, { x: 420, y: 0, opacity: 0 }, { duration: 0.5 })?.finished
 	]);
 
 	// Start
-	await safeAnimate(box, { y: [48, 32], opacity: 1 }, { duration: 0.25, delay: 0.25 })?.finished;
+	await safeAnimate(box, { y: [48, 140], opacity: 1 }, { duration: 0.25, delay: 0.25 })?.finished;
 
 	await sleep(50);
 
@@ -75,7 +75,7 @@ const execute = async () => {
 
 	await safeAnimate(
 		code,
-		{ x: [300, 300], y: [400 + 16, 400], opacity: [0, 1] },
+		{ x: [200, 200], y: [460 + 16, 460], opacity: [0, 1] },
 		{ duration: 0.25 }
 	)?.finished;
 
@@ -86,7 +86,7 @@ const execute = async () => {
 	await sleep(1000);
 
 	update((p) => ({ ...p, showControls: true }));
-	safeAnimate(controls, { x: [520, 450], y: [16, -80], opacity: 1 }, { duration: 0.5 });
+	safeAnimate(controls, { x: [420, 420], y: [16, 0], opacity: 1 }, { duration: 0.5 });
 };
 
 export const authController = {

src/lib/animations/Products/functions/index.ts

@@ -26,12 +26,12 @@ const execute = async () => {
 		safeAnimate(box, { opacity: 0 }, { duration: 0.5 })?.finished
 	]);
 
-	await sleep(500);
+	await sleep(250);
 
 	await safeAnimate(code, { zIndex: 0 }, { duration: 0 })?.finished;
 	await safeAnimate(code, { y: [200 - 16, 200], opacity: 1 }, { duration: 0.5 })?.finished;
 
-	await sleep(500);
+	await sleep(250);
 
 	update((p) => ({
 		...p,