fix: hide animations on safari only

Author: innocenzi

src/Web/Homepage/x-aurora.view.php

@@ -1,5 +1,5 @@
 <x-component name="x-aurora">
-  <div class="absolute inset-0 overflow-hidden pointer-events-none z-[-1]" :class="$class">
+  <div class="absolute inset-0 overflow-hidden pointer-events-none z-[-1] safari-hide" :class="$class">
     <div class=" 
           [--color-white-gradient:repeating-linear-gradient(100deg,white_0%,white_7%,transparent_10%,transparent_12%,white_16%)]
           [--color-aurora-gradient:repeating-linear-gradient(100deg,var(--color-aurora-1)_10%,var(--color-aurora-2)_15%,var(--color-aurora-3)_20%,var(--color-aurora-4)_25%,var(--color-aurora-5)_30%)]

src/Web/Homepage/x-falling-leaves.view.php

@@ -1,6 +1,6 @@
 <x-component name="x-falling-leaves">
   <!-- Leaves container -->
-  <div class="absolute inset-0 overflow-hidden pointer-events-none motion-reduce:hidden" id="leaves-container"></div>
+  <div class="absolute inset-0 overflow-hidden pointer-events-none motion-reduce:hidden safari-hide" id="leaves-container"></div>
   <!-- Leaves templates -->
   <template id="leaf-template-1">
     <div class="leaf absolute pointer-events-none origin-center">

src/Web/Homepage/x-rain.view.php

@@ -1,4 +1,4 @@
 <x-component name="x-rain">
   <!-- Rain container -->
-  <div class="motion-reduce:hidden absolute inset-0 overflow-hidden pointer-events-none dark:opacity-100 opacity-0 duration-500 z-[-1]" id="rain-container"></div>
+  <div class="motion-reduce:hidden absolute inset-0 overflow-hidden pointer-events-none dark:opacity-100 opacity-0 duration-500 z-[-1] safari-hide" id="rain-container"></div>
 </x-component>

src/Web/main.entrypoint.css

@@ -192,3 +192,13 @@ button:focus:has(svg) {
 pre {
 	line-height: 1.65em;
 }
+
+/*
+|--------------------------------------------------------------------------
+| Safari
+|--------------------------------------------------------------------------
+*/
+
+_::-webkit-full-page-media, _:future, :root .safari-hide {
+  display: none !important;
+}