120 lines
2.0 KiB
CSS
120 lines
2.0 KiB
CSS
/* ===== Container ===== */
|
|
.bg-container {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
animation: bg-fade-in 1.2s ease-out forwards;
|
|
}
|
|
|
|
/* ===== DOT GRID ===== */
|
|
.bg-dots {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
color-mix(in oklch, var(--foreground) 25%, transparent) 1px,
|
|
transparent 0
|
|
);
|
|
|
|
background-size: 35px 35px;
|
|
|
|
-webkit-mask-image: radial-gradient(
|
|
ellipse at center,
|
|
rgba(0,0,0,1) 55%,
|
|
rgba(0,0,0,0) 100%
|
|
);
|
|
|
|
mask-image: radial-gradient(
|
|
ellipse at center,
|
|
rgba(0,0,0,1) 55%,
|
|
rgba(0,0,0,0) 100%
|
|
);
|
|
}
|
|
|
|
/* ===== GLOWS BASE ===== */
|
|
.bg-glow {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(120px);
|
|
opacity: 0;
|
|
transform: scale(0.6);
|
|
|
|
animation: bg-glow-in 1.8s cubic-bezier(.34,1.56,.64,1) forwards,
|
|
bg-glow-pulse 10s ease-in-out infinite;
|
|
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
/* ===== GLOW 1 ===== */
|
|
.bg-glow-1 {
|
|
top: 20%;
|
|
left: 15%;
|
|
width: 500px;
|
|
height: 500px;
|
|
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in oklch, var(--foreground) 18%, transparent) 0%,
|
|
color-mix(in oklch, var(--primary) 9%, transparent) 45%,
|
|
transparent 70%
|
|
);
|
|
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ===== GLOW 2 ===== */
|
|
.bg-glow-2 {
|
|
bottom: 25%;
|
|
right: 20%;
|
|
width: 450px;
|
|
height: 450px;
|
|
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in oklch, var(--foreground) 15%, transparent) 0%,
|
|
color-mix(in oklch, var(--primary) 6%, transparent) 50%,
|
|
transparent 75%
|
|
);
|
|
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* ===== ANIMATIONS ===== */
|
|
|
|
@keyframes bg-fade-in {
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bg-dot-fade {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes bg-glow-in {
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bg-glow-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 0.8;
|
|
}
|
|
} |