|
3 | 3 | <div class=" |
4 | 4 | [--color-white-gradient:repeating-linear-gradient(100deg,white_0%,white_7%,transparent_10%,transparent_12%,white_16%)] |
5 | 5 | [--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%)] |
6 | | - [background-image:var(--color-aurora-gradient)] |
7 | | - ___motion-reduce:[background-image:var(--color-aurora-gradient)] |
8 | | - ___motion-safe:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)] |
| 6 | + motion-reduce:[background-image:var(--color-aurora-gradient)] |
| 7 | + not-motion-reduce:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)] |
9 | 8 | [background-size:300%,_200%] |
10 | | - motion-safe:[background-position:50%_50%,50%_50%] |
11 | | - [background-position:50%_50%,50%_50%] |
| 9 | + not-motion-reduce:[background-position:50%_50%,50%_50%] |
12 | 10 | filter |
13 | 11 | blur-[10px] |
14 | 12 | invert |
15 | 13 | after:content-[''] |
16 | 14 | after:absolute |
17 | 15 | after:inset-0 |
18 | | - ___motion-reduce:after:[background-image:var(--color-aurora-gradient)] |
19 | | - ___motion-safe:after:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)] |
20 | | - after:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)] |
| 16 | + motion-reduce:after:[background-image:var(--color-aurora-gradient)] |
| 17 | + not-motion-reduce:after:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)] |
21 | 18 | after:[background-size:200%,_100%] |
22 | | - ___motion-safe:after:animate-aurora |
23 | | - after:animate-aurora |
| 19 | + not-motion-reduce:after:animate-aurora |
24 | 20 | after:[background-attachment:fixed] |
25 | 21 | after:mix-blend-difference |
26 | 22 | pointer-events-none |
|
0 commit comments