111 lines
2.1 KiB
CSS
111 lines
2.1 KiB
CSS
.ambient {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
opacity: var(--amb-op);
|
|
animation: pipuHue 30s linear infinite;
|
|
}
|
|
|
|
.ambient span {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
will-change: transform;
|
|
scale: var(--music-scale, 1);
|
|
filter: blur(30px) brightness(var(--music-light, 1));
|
|
}
|
|
|
|
.a {
|
|
left: -22vmax;
|
|
top: -28vmax;
|
|
width: 70vmax;
|
|
height: 70vmax;
|
|
background: radial-gradient(circle, rgba(47, 128, 255, 0.75) 0%, transparent 62%);
|
|
animation: pipuDrift1 16s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.b {
|
|
right: -20vmax;
|
|
top: 8vh;
|
|
width: 60vmax;
|
|
height: 60vmax;
|
|
background: radial-gradient(circle, rgba(124, 92, 255, 0.6) 0%, transparent 62%);
|
|
animation: pipuDrift2 21s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.c {
|
|
left: 22vw;
|
|
bottom: -32vmax;
|
|
width: 55vmax;
|
|
height: 55vmax;
|
|
background: radial-gradient(circle, var(--amb-c3, rgba(53, 211, 255, 0.6)) 0%, transparent 62%);
|
|
animation: pipuDrift3 26s ease-in-out infinite alternate;
|
|
transition: background 1.2s;
|
|
}
|
|
|
|
@keyframes pipuDrift1 {
|
|
0% {
|
|
transform: translate(-6%, -4%) scale(1);
|
|
}
|
|
35% {
|
|
transform: translate(45%, 28%) scale(1.2);
|
|
}
|
|
70% {
|
|
transform: translate(15%, 60%) scale(0.9);
|
|
}
|
|
100% {
|
|
transform: translate(60%, -5%) scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes pipuDrift2 {
|
|
0% {
|
|
transform: translate(4%, 0) scale(1.05);
|
|
}
|
|
40% {
|
|
transform: translate(-50%, 40%) scale(0.9);
|
|
}
|
|
75% {
|
|
transform: translate(-20%, -25%) scale(1.2);
|
|
}
|
|
100% {
|
|
transform: translate(-60%, 15%) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pipuDrift3 {
|
|
0% {
|
|
transform: translate(0, 0) scale(0.95);
|
|
}
|
|
30% {
|
|
transform: translate(-40%, -45%) scale(1.15);
|
|
}
|
|
65% {
|
|
transform: translate(45%, -25%) scale(1);
|
|
}
|
|
100% {
|
|
transform: translate(10%, -55%) scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes pipuHue {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
50% {
|
|
filter: hue-rotate(-35deg);
|
|
}
|
|
100% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ambient,
|
|
.ambient span {
|
|
animation: none;
|
|
scale: 1;
|
|
}
|
|
}
|