Luminous theme (PATCH)

Web_Backgrounds/luminous-theme.css

@@ -2,14 +2,6 @@
 
 /* ── Animations ─────────────────────────────────────────── */
 
-@keyframes orb-drift {
-  0%   { transform: translate(0,0) scale(1); }
-  25%  { transform: translate(3%,-2%) scale(1.03); }
-  50%  { transform: translate(-2%,3%) scale(0.97); }
-  75%  { transform: translate(2%,2%) scale(1.02); }
-  100% { transform: translate(0,0) scale(1); }
-}
-
 @keyframes ring-spin-cw {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
@@ -53,12 +45,6 @@
   100% { background-position: 300% center; }
 }
 
-@keyframes orbit-elliptical {
-  0%   { transform: rotate(0deg) scaleX(1); }
-  50%  { transform: rotate(180deg) scaleX(0.7); }
-  100% { transform: rotate(360deg) scaleX(1); }
-}
-
 /* ── CSS Variables ─────────────────────────────────────── */
 
 .dark.theme-luminous {
@@ -152,6 +138,7 @@
   position: fixed;
   z-index: -7;
   pointer-events: none;
+  will-change: transform;
   top: 50%; left: 50%;
   width: 820px; height: 820px;
   margin: -410px 0 0 -410px;
@@ -280,6 +267,7 @@
   position: fixed;
   z-index: -5;
   pointer-events: none;
+  will-change: transform;
   top: 50%; left: 50%;
   width: 920px; height: 920px;
   margin: -460px 0 0 -460px;
@@ -300,6 +288,7 @@
   position: fixed;
   z-index: -4;
   pointer-events: none;
+  will-change: transform;
   top: 50%; left: 50%;
   width: 480px; height: 480px;
   margin: -240px 0 0 -240px;
@@ -394,8 +383,9 @@
   position: fixed;
   z-index: -1;
   pointer-events: none;
+  will-change: transform;
   top: 0; left: 0;
-  width: 2px; height: 2px;
+  width: 1.5px; height: 1.5px;
   border-radius: 50%;
   background: hsla(210, 70%, 80%, 0.2);
   box-shadow:
@@ -438,8 +428,9 @@
   position: fixed;
   z-index: -1;
   pointer-events: none;
+  will-change: transform;
   top: 0; left: 0;
-  width: 1px; height: 1px;
+  width: 1.5px; height: 1.5px;
   border-radius: 50%;
   background: hsla(185, 80%, 75%, 0.12);
   box-shadow:
@@ -495,6 +486,7 @@
   position: fixed;
   z-index: -7;
   pointer-events: none;
+  will-change: transform;
   top: 50%; left: 50%;
   width: 820px; height: 820px;
   margin: -410px 0 0 -410px;
@@ -614,11 +606,16 @@
     radial-gradient(ellipse 20% 18% at 85% 20%, hsla(210, 50%, 78%, 0.025) 0%, transparent 45%);
 }
 
+.light.theme-luminous .min-h-screen.bg-background {
+  position: relative;
+}
+
 .light.theme-luminous .min-h-screen.bg-background::after {
   content: "";
   position: fixed;
   z-index: -5;
   pointer-events: none;
+  will-change: transform;
   top: 50%; left: 50%;
   width: 920px; height: 920px;
   margin: -460px 0 0 -460px;
@@ -637,6 +634,7 @@
   position: fixed;
   z-index: -4;
   pointer-events: none;
+  will-change: transform;
   top: 50%; left: 50%;
   width: 480px; height: 480px;
   margin: -240px 0 0 -240px;
@@ -731,8 +729,9 @@
   position: fixed;
   z-index: -1;
   pointer-events: none;
+  will-change: transform;
   top: 0; left: 0;
-  width: 2px; height: 2px;
+  width: 1.5px; height: 1.5px;
   border-radius: 50%;
   background: hsla(0, 0%, 100%, 0.15);
   box-shadow:
@@ -775,8 +774,9 @@
   position: fixed;
   z-index: -1;
   pointer-events: none;
+  will-change: transform;
   top: 0; left: 0;
-  width: 1px; height: 1px;
+  width: 1.5px; height: 1.5px;
   border-radius: 50%;
   background: hsla(0, 0%, 100%, 0.1);
   box-shadow:
@@ -1508,3 +1508,41 @@
   backdrop-filter: blur(3px) !important;
   -webkit-backdrop-filter: blur(3px) !important;
 }
+
+/* ═══ ACCESSIBILITY — Reduced Motion ═════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dark.theme-luminous body::after,
+  .dark.theme-luminous .min-h-screen.bg-background::after,
+  .dark.theme-luminous .min-h-screen > .flex.h-full::before,
+  .dark.theme-luminous header + main::before,
+  .dark.theme-luminous nav + main::before,
+  .dark.theme-luminous .min-h-screen > .flex.h-full::after,
+  .dark.theme-luminous header + *::before,
+  .dark.theme-luminous nav + *::before,
+  .dark.theme-luminous .fixed + main::before,
+  .dark.theme-luminous .min-h-screen > .flex > .flex-1::before,
+  .dark.theme-luminous .fixed.inset-0.z-\[-1\]::before,
+  .dark.theme-luminous .fixed.inset-0.z-\[-1\]::after,
+  .light.theme-luminous body::after,
+  .light.theme-luminous .min-h-screen.bg-background::after,
+  .light.theme-luminous .min-h-screen > .flex.h-full::before,
+  .light.theme-luminous header + main::before,
+  .light.theme-luminous nav + main::before,
+  .light.theme-luminous .min-h-screen > .flex.h-full::after,
+  .light.theme-luminous header + *::before,
+  .light.theme-luminous nav + *::before,
+  .light.theme-luminous .fixed + main::before,
+  .light.theme-luminous .min-h-screen > .flex > .flex-1::before,
+  .light.theme-luminous .fixed.inset-0.z-\[-1\]::before,
+  .light.theme-luminous .fixed.inset-0.z-\[-1\]::after {
+    animation: none !important;
+  }
+
+  .light.theme-luminous .bg-card:hover::before,
+  .light.theme-luminous .bg-popover:hover::before,
+  .dark.theme-luminous .bg-card:hover::before,
+  .dark.theme-luminous .bg-popover:hover::before {
+    animation: none !important;
+  }
+}