feat: ✨ Small effect of appearing at the logo of x(not the twitter) o…

…f the evening of the year

src/icons/la-velada.astro

@@ -9,7 +9,54 @@
 	aria-label="Isotipo de La Velada 4"
 >
 	<path
+	 id="logo"
 		fill="currentColor"
 		d="m205.996 0-29.003 13.283c-6.286 2.882-12.285 6.252-17.825 10.017-12.453 8.47-23.597 20.593-32.23 35.072l-14.222 24.136-9.711-14.732-9.71 14.732-14.223-24.136v-.01C70.434 43.892 59.29 31.771 46.842 23.3c-5.54-3.765-11.534-7.136-17.825-10.017L.004 0l73.84 112L.004 224l29.003-13.283c6.29-2.881 12.285-6.252 17.825-10.017 12.453-8.471 23.597-20.593 32.23-35.072l14.222-24.136 9.711 14.732 9.711-14.732 14.227 24.146c8.633 14.469 19.777 26.591 32.225 35.062 5.54 3.765 11.534 7.136 17.825 10.017L205.986 224l-73.839-112L205.996 0Zm-75.653 60.393c8.337-13.975 19.075-25.667 31.054-33.811 5.357-3.642 11.158-6.904 17.247-9.696L195.08 9.36l-65.296 99.042-14.642-22.208 15.206-25.8h-.005ZM27.357 16.886c6.088 2.787 11.89 6.049 17.246 9.696 11.974 8.144 22.713 19.836 31.05 33.806l15.205 25.806-14.642 22.208L10.92 9.36l16.437 7.526ZM103 149.024l-7.472-11.332 7.472-12.68 7.472 12.68L103 149.024Zm75.639 58.09a118.37 118.37 0 0 1-17.247-9.691c-11.974-8.144-22.712-19.836-31.044-33.806l-15.839-26.874-11.514-19.534-11.514 19.534-15.834 26.864c-8.336 13.975-19.075 25.667-31.049 33.811-5.356 3.642-11.158 6.904-17.246 9.691l-16.437 7.526 66.951-101.553 16.975-25.751 8.154-12.365 8.154 12.365 16.975 25.751 66.951 101.553-16.436-7.526v.005Z"
 	></path>
 </svg>
+
+<style>
+		@supports (animation-timeline: view()) {
+		#logo {
+		animation-timeline: view();
+		animation-name: dash;
+		animation-timing-function: linear;
+		fill-opacity: 0;
+		stroke-dasharray: 1300;
+		stroke-dashoffset: 1300;
+		animation: dash 5s ease-in forwards;
+	}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg {
+			animation-name: none;
+		}
+	}
+
+	@keyframes dash {
+		70% {
+			fill-opacity: 0;
+		}
+
+		100% {
+			fill-opacity: 100%;
+			stroke-dashoffset: 0;
+			stroke-width: 1;
+		}
+	}
+
+
+</style>
+
+<script>
+// Escuchar el evento de scroll
+window.addEventListener('scroll', function() {
+// Verificar si el usuario ha scrollado en la página
+if (window.pageYOffset > 0) {
+// Iniciar la animación
+document.querySelector('#logo').classList.add('animate');
+}
+});
+</script>
+