This commit is contained in:
@@ -443,35 +443,41 @@ audio.hidden-audio {
|
||||
animation: pulseGlow 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pulse-tentacles {
|
||||
.pulse-rays {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
inset: -5%;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 95%, 72%, 0.35) 0%, transparent 40%),
|
||||
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 68%, 0.25) 0%, transparent 55%),
|
||||
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 85%, 65%, 0.2) 0%, transparent 68%),
|
||||
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 80%, 60%, 0.16) 0%, transparent 80%),
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 30%);
|
||||
opacity: calc(0.18 + var(--ray, 0) * 0.65);
|
||||
filter: blur(calc(10px - var(--ray, 0) * 4px));
|
||||
transform: scale(calc(0.85 + var(--ray, 0) * 0.9));
|
||||
transition: opacity 0.12s ease-out, transform 0.12s ease-out, filter 0.12s ease-out;
|
||||
mix-blend-mode: screen;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pulse-tentacles .tentacle {
|
||||
.pulse-rays::before,
|
||||
.pulse-rays::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: calc(50px + var(--level, 0) * 180px);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
hsla(var(--ray-hue, 200), 90%, 70%, 0.55) 40%,
|
||||
hsla(var(--ray-hue, 200), 95%, 75%, 0.85) 100%
|
||||
);
|
||||
border-radius: 999px;
|
||||
filter: blur(calc(2px - var(--level, 0) * 0.8));
|
||||
opacity: calc(0.2 + var(--level, 0) * 0.85);
|
||||
transform-origin: 50% 100%;
|
||||
transform:
|
||||
translateY(calc(-30px - var(--level, 0) * 30px))
|
||||
rotate(calc(var(--index) * 36deg))
|
||||
scaleX(calc(0.6 + var(--level, 0) * 0.6));
|
||||
transition: height 0.08s ease-out, opacity 0.08s ease-out, transform 0.08s ease-out, filter 0.08s ease-out;
|
||||
mix-blend-mode: screen;
|
||||
inset: 8%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid hsla(var(--ray-hue, 200), 90%, 70%, 0.25);
|
||||
opacity: calc(0.1 + var(--ray, 0) * 0.6);
|
||||
transform: scale(calc(0.7 + var(--ray, 0) * 0.9));
|
||||
filter: blur(calc(2px + var(--ray, 0) * 2px));
|
||||
}
|
||||
|
||||
.pulse-rays::after {
|
||||
inset: 20%;
|
||||
border-width: 3px;
|
||||
opacity: calc(0.08 + var(--ray, 0) * 0.55);
|
||||
transform: scale(calc(0.8 + var(--ray, 0) * 1.1));
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user