| 1 |
/* ───────────────────────────────────────────────────────────────── |
| 2 |
Gradient Blob — bkgb |
| 3 |
───────────────────────────────────────────────────────────────── */ |
| 4 |
|
| 5 |
@keyframes bkgb-morph { |
| 6 |
0% { |
| 7 |
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; |
| 8 |
transform: translate(0, 0) scale(1); |
| 9 |
} |
| 10 |
25% { |
| 11 |
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; |
| 12 |
transform: translate(3%, -4%) scale(1.05); |
| 13 |
} |
| 14 |
50% { |
| 15 |
border-radius: 50% 60% 30% 60% / 40% 50% 60% 50%; |
| 16 |
transform: translate(-3%, 5%) scale(0.96); |
| 17 |
} |
| 18 |
75% { |
| 19 |
border-radius: 70% 30% 50% 40% / 30% 70% 40% 60%; |
| 20 |
transform: translate(2%, 3%) scale(1.03); |
| 21 |
} |
| 22 |
100% { |
| 23 |
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; |
| 24 |
transform: translate(0, 0) scale(1); |
| 25 |
} |
| 26 |
} |
| 27 |
|
| 28 |
.bkgb-section { |
| 29 |
box-sizing: border-box; |
| 30 |
width: 100%; |
| 31 |
} |
| 32 |
|
| 33 |
/* Blob base style — picks up CSS custom properties from inline style */ |
| 34 |
.bkgb-blob { |
| 35 |
position: absolute; |
| 36 |
width: var(--bkgb-size, 60%); |
| 37 |
height: var(--bkgb-size, 60%); |
| 38 |
background: var(--bkgb-c, #c084fc); |
| 39 |
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; |
| 40 |
opacity: var(--bkgb-opacity, 0.6); |
| 41 |
filter: blur(var(--bkgb-blur, 80px)); |
| 42 |
will-change: transform, border-radius; |
| 43 |
pointer-events: none; |
| 44 |
animation: bkgb-morph var(--bkgb-speed, 10s) var(--bkgb-delay, 0s) ease-in-out infinite; |
| 45 |
transform-origin: center; |
| 46 |
} |
| 47 |
|
| 48 |
/* Per-blob offset animation so they don't sync */ |
| 49 |
.bkgb-blob-1 { animation-delay: 0s; } |
| 50 |
.bkgb-blob-2 { animation-delay: -4s; } |
| 51 |
.bkgb-blob-3 { animation-delay: -7s; } |
| 52 |
.bkgb-blob-4 { animation-delay: -2s; } |
| 53 |
.bkgb-blob-5 { animation-delay: -9s; } |
| 54 |
|
| 55 |
/* Paused state */ |
| 56 |
.bkgb-section[data-paused="true"] .bkgb-blob { |
| 57 |
animation-play-state: paused; |
| 58 |
} |
| 59 |
|
| 60 |
/* Inner content */ |
| 61 |
.bkgb-inner { |
| 62 |
position: relative; |
| 63 |
z-index: 1; |
| 64 |
box-sizing: border-box; |
| 65 |
} |
| 66 |
|
| 67 |
/* Reduced motion */ |
| 68 |
@media (prefers-reduced-motion: reduce) { |
| 69 |
.bkgb-blob { |
| 70 |
animation: none; |
| 71 |
} |
| 72 |
} |
| 73 |
|
