2cd6f70b99
- Migrated main site, blog, CV, and music sections to Astro - Component-based architecture with layouts - JSON-based blog posts - Static site generation - Preserved original styling and functionality
32 lines
2.7 KiB
CSS
32 lines
2.7 KiB
CSS
/* ===== Glitch Bard Animations ===== */
|
|
@keyframes glitch-5 {
|
|
0.00%, 33.33%, 43.33%, 66.67%, 76.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
|
|
33.43%, 43.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1)); }
|
|
66.77%, 76.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1)); }
|
|
}
|
|
@keyframes glitch-6 {
|
|
0.00%, 33.33%, 41.67%, 66.67%, 75.00%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
|
|
33.43%, 41.57% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1)); }
|
|
66.77%, 74.90% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1)); }
|
|
}
|
|
@keyframes glitch-7 {
|
|
0.00%, 33.33%, 40.48%, 66.67%, 73.81%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
|
|
33.43%, 40.38% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1)); }
|
|
66.77%, 73.71% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1)); }
|
|
}
|
|
@keyframes glitch-8 {
|
|
0.00%, 33.33%, 39.58%, 66.67%, 72.92%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
|
|
33.43%, 39.48% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1)); }
|
|
66.77%, 72.82% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1)); }
|
|
}
|
|
@keyframes glitch-9 {
|
|
0.00%, 33.33%, 38.89%, 66.67%, 72.22%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
|
|
33.43%, 38.79% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1)); }
|
|
66.77%, 72.12% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1)); }
|
|
}
|
|
@keyframes glitch-10 {
|
|
0.00%, 33.33%, 38.33%, 66.67%, 71.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
|
|
33.43%, 38.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1)); }
|
|
66.77%, 71.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1)); }
|
|
}
|