fix animate disabling

Author: markrandall

landing.php

@@ -262,7 +262,7 @@ function drawBranchInfo(array $release): void
 
 ob_start();
 ?>
-<div class="landing landing-dark">
+<div id="landing-content" class="landing landing-dark">
     <link rel="stylesheet" href="/styles/landing.css" type="text/css">
 
     <div class="landing-eco-full-container" style="border: 0">
@@ -304,7 +304,7 @@ function drawBranchInfo(array $release): void
     <div class="landing-section">
         <div id="releases" >
             <div class="landing-lrv">
-                <svg style="position: absolute; inset: 0; opacity: 0.5" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="hero-bg">
+                <svg class="landing-lrv-animate" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
                     <defs>
                         <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(210, 203, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
                         <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(133, 109, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
@@ -402,7 +402,7 @@ function drawBranchInfo(array $release): void
                 <div style="margin-top: 2em; margin-bottom: 0.5em; text-align: center; font-size: 90%">The PHP Foundation is grateful for our many sponsors, including:</div>
                 <div id="foundation-sponsor-carousel" data-width="100" style="opacity: 0.7">
                     <?php foreach ($foundationSponsors as $sponsor) { ?>
-                        <img src="<?= safe($sponsor['icon']) ?>" alt="<?= safe($sponsor['name'])?>" style="background: white; border-radius: 1em; padding: 10px; margin: 10px; width: 100px; height: 100px; filter: grayscale(60%)"/>
+                        <img loading="lazy" src="<?= safe($sponsor['icon']) ?>" alt="<?= safe($sponsor['name'])?>" style="background: white; border-radius: 1em; padding: 10px; margin: 10px; width: 100px; height: 100px; filter: grayscale(60%)"/>
                     <?php } ?>
                 </div>
 
@@ -465,14 +465,24 @@ function drawBranchInfo(array $release): void
             </div>
         </div>
     </div>
-
-    <script type="text/javascript">
-        document.addEventListener('DOMContentLoaded', () => {
-            shuffleDOMChildrenWithLimit(document.querySelector('#community-cards'), 3);
-            shuffleDOMChildrenWithLimit(document.querySelector('#conference-cards'), 6);
-        });
-    </script>
 </div>
+
+<script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', () => {
+        shuffleDOMChildrenWithLimit(document.querySelector('#community-cards'), 3);
+        shuffleDOMChildrenWithLimit(document.querySelector('#conference-cards'), 6);
+    });
+
+    (() => {
+        const layout = document.querySelector('#landing-content');
+        const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+        if (isLightMode) {
+            layout.classList.remove('landing-dark');
+            layout.classList.add('landing-light');
+        }
+    })();
+</script>
+
 <?php
     $header = ob_get_clean();
 

styles/landing.css

@@ -1,6 +1,5 @@
 .landing {
     --card-radius: 0.5em;
-
     background-image: url(/images/bg-texture-00.svg);
 }
 
@@ -273,6 +272,18 @@
     border: 1px solid #555555;
 }
 
+.landing-lrv-animate {
+    position: absolute;
+    inset: 0;
+    opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .landing-lrv-animate {
+        display: none;
+    }
+}
+
 .landing-lrv-inner-padding {
     position: relative;
 }
@@ -484,15 +495,3 @@
         transparent 100%
     );
 }
-
-/*
- * HERO EXPERIMENTATION
- */
-
-/*#hero-try-it-now-cover {*/
-/*    background-image: url('/images/landing/background-try-it-now.jpg');*/
-/*}*/
-
-/*#hero-why-use-php-cover {*/
-/*    background-image: url('/images/landing/background-why-use-php.jpg');*/
-/*}*/