diff --git a/Web_Backgrounds/luminous-theme.css b/Web_Backgrounds/luminous-theme.css index 4fc6b96..f55addc 100644 --- a/Web_Backgrounds/luminous-theme.css +++ b/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; + } +}