@@ -515,6 +515,41 @@ body {
515515 animation : snowing-far 12s linear infinite;
516516}
517517
518+ @keyframes snowing-layer4 {
519+ 0% { background-position : 0 0 ; }
520+ 100% { background-position : 40px 200px ; }
521+ }
522+
523+ @keyframes snowing-layer5 {
524+ 0% { background-position : 0 0 ; }
525+ 100% { background-position : -80px 240px ; }
526+ }
527+
528+ .animate-snowing-secondary {
529+ /* Layer 4: Micro (Tiny & Slow, high density) */
530+ background-image :
531+ radial-gradient (1.5px 1.5px at 10% 10% , rgba (34 , 211 , 238 , 0.2 ) 50% , transparent 50% ),
532+ radial-gradient (1.5px 1.5px at 30% 50% , rgba (34 , 211 , 238 , 0.2 ) 50% , transparent 50% ),
533+ radial-gradient (1.5px 1.5px at 50% 30% , rgba (34 , 211 , 238 , 0.2 ) 50% , transparent 50% ),
534+ radial-gradient (1.5px 1.5px at 70% 80% , rgba (34 , 211 , 238 , 0.2 ) 50% , transparent 50% ),
535+ radial-gradient (1.5px 1.5px at 90% 20% , rgba (34 , 211 , 238 , 0.2 ) 50% , transparent 50% );
536+ background-size : 200px 200px ;
537+ animation : snowing-layer4 15s linear infinite;
538+ }
539+
540+ .animate-snowing-secondary ::before {
541+ content : '' ;
542+ position : absolute;
543+ inset : 0 ;
544+ /* Layer 5: Gust (Medium & Fast with drift) */
545+ background-image :
546+ radial-gradient (3px 3px at 15% 75% , rgba (34 , 211 , 238 , 0.25 ) 50% , transparent 50% ),
547+ radial-gradient (4px 4px at 45% 25% , rgba (34 , 211 , 238 , 0.25 ) 50% , transparent 50% ),
548+ radial-gradient (3px 3px at 85% 65% , rgba (34 , 211 , 238 , 0.25 ) 50% , transparent 50% );
549+ background-size : 160px 160px ;
550+ animation : snowing-layer5 7s linear infinite;
551+ }
552+
518553/* Marquee effect for table rows - direct background animation */
519554.animate-marquee-row {
520555 background-color : rgba (0 , 120 , 212 , 0.08 );
0 commit comments