From d5cae0bbcd9ab8f4a9162292f95f63a450b4d00e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Orzech?= <pawel@pawelorzech.pl>
Date: Sat, 28 Jun 2025 03:03:21 +0200
Subject: [PATCH] Update index.html

new shooting star
---
 index.html | 39 +++++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 266a470..b80587e 100644
--- a/index.html
+++ b/index.html
@@ -125,28 +125,55 @@
         /* Shooting star animation */
         @keyframes shoot {
             0% {
-                transform: translate(0, 0) scale(0.5);
+                transform: translate(0, 0);
                 opacity: 0;
             }
             10% {
                 opacity: 1;
             }
             100% {
-                transform: translate(200px, 200px) scale(1);
+                transform: translate(200px, 200px);
                 opacity: 0;
             }
         }
 
         .shooting-star {
             position: absolute;
-            width: 4px;
+            width: 4px; /* Small, round head */
             height: 4px;
-            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
+            background-color: #FFD700; /* Gold-like color for the core */
             border-radius: 50%;
-            filter: blur(1px);
+            filter: blur(0.5px); /* Slight blur for softness */
             animation: shoot 2s linear forwards;
             pointer-events: none;
-            transform-origin: 0% 0%;
+            transform-origin: 0% 0%; /* Important for animation */
+            z-index: 2; /* Ensure head is above tail */
+            box-shadow: 0 0 8px 4px rgba(255, 165, 0, 0.7); /* Fiery glow around head */
+        }
+
+        .shooting-star::after {
+            content: '';
+            position: absolute;
+            /* Position relative to the head, extending backwards */
+            top: 0;
+            left: 0;
+            width: 60px; /* Length of the trail */
+            height: 4px; /* Thickness of the trail */
+            background: linear-gradient(to right, rgba(255, 69, 0, 0), rgba(255, 165, 0, 0.8) 20%, rgba(255, 215, 0, 0.5) 60%, rgba(150, 150, 150, 0.1) 90%, rgba(0, 0, 0, 0)); /* Fiery gradient with subtle smoke */
+            filter: blur(1px);
+            border-radius: 50%; /* To make the end of the trail rounded */
+            z-index: 1; /* Ensure tail is behind head */
+            /* Rotate and translate to position the tail correctly behind the head */
+            transform: rotate(-45deg) translate(-100%, 0); /* Rotate for diagonal movement, translate to position behind */
+            transform-origin: 100% 50%; /* Rotate around the right end of the tail */
+            opacity: 1; /* Start fully opaque */
+            animation: trail-fade 2s linear forwards; /* Fade out the trail */
+        }
+
+        /* New keyframes for the trail fade */
+        @keyframes trail-fade {
+            0% { opacity: 1; }
+            100% { opacity: 0; }
         }