| 1 |
/* No-JS and reduced-motion visitors always receive visible content. */ |
| 2 |
[data-bkbg-float]{animation:bkbg-floating var(--bkbg-float-duration,6s) ease-in-out var(--bkbg-float-delay,0s) infinite} |
| 3 |
@keyframes bkbg-floating{0%,100%{translate:0 0}50%{translate:var(--bkbg-float-x,0px) var(--bkbg-float-y,-20px)}} |
| 4 |
.bkbg-motion-ready[data-bkbg-entrance]{transition:opacity var(--bkbg-enter-duration,.8s) ease var(--bkbg-enter-delay,0s),translate var(--bkbg-enter-duration,.8s) ease var(--bkbg-enter-delay,0s),scale var(--bkbg-enter-duration,.8s) ease var(--bkbg-enter-delay,0s)} |
| 5 |
.bkbg-motion-ready.bkbg-motion-pending{opacity:0} |
| 6 |
.bkbg-motion-pending[data-bkbg-entrance="fadeInUp"]{translate:0 40px} |
| 7 |
.bkbg-motion-pending[data-bkbg-entrance="fadeInDown"]{translate:0 -40px} |
| 8 |
.bkbg-motion-pending[data-bkbg-entrance="fadeInLeft"]{translate:-40px 0} |
| 9 |
.bkbg-motion-pending[data-bkbg-entrance="fadeInRight"]{translate:40px 0} |
| 10 |
.bkbg-motion-pending[data-bkbg-entrance="zoomIn"]{scale:.85} |
| 11 |
@media(prefers-reduced-motion:reduce){[data-bkbg-float]{animation:none!important}.bkbg-motion-ready[data-bkbg-entrance]{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}} |
| 12 |
|
| 13 |
[data-bkbg-rotate]{animation:bkbg-rotation var(--bkbg-rotate-duration,8s) linear var(--bkbg-rotate-delay,0s) infinite} |
| 14 |
[data-bkbg-rotate][data-bkbg-float]{animation:bkbg-rotation var(--bkbg-rotate-duration,8s) linear var(--bkbg-rotate-delay,0s) infinite,bkbg-floating var(--bkbg-float-duration,6s) ease-in-out var(--bkbg-float-delay,0s) infinite} |
| 15 |
@keyframes bkbg-rotation{to{rotate:360deg}} |
| 16 |
@media(prefers-reduced-motion:reduce){[data-bkbg-rotate]{animation:none!important}} |
| 17 |
|
