diff --git a/assets/css/main.css b/assets/css/main.css index d631066..590ef98 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -573,7 +573,7 @@ 94% { transform: translate(0); clip-path: none; } } -.logo-glitch:hover { +a:hover .logo-glitch { animation: glitch-clip 2.5s steps(1) infinite; } @@ -630,13 +630,39 @@ footer nav a.label:hover svg { transform-box: fill-box; transform-origin: 50% 50%; } -.logo-bloom:not(.logo-static) .logo-r1 { animation: logo-cw 30s linear infinite; } -.logo-bloom:not(.logo-static) .logo-r2 { animation: logo-ccw 20s linear infinite; } -.logo-bloom:not(.logo-static) .logo-r3 { animation: logo-cw 12s linear infinite; } -.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s; } -.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s; } -.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s; } +/* Rotation — use standalone `rotate` so `scale` can animate independently */ +.logo-bloom:not(.logo-static) .logo-r1 { + animation: logo-cw 30s linear infinite, logo-bloom-r1 6s ease-in-out 2s infinite; +} +.logo-bloom:not(.logo-static) .logo-r2 { + animation: logo-ccw 20s linear infinite, logo-bloom-r2 6s ease-in-out 1s infinite; +} +.logo-bloom:not(.logo-static) .logo-r3 { + animation: logo-cw 12s linear infinite, logo-bloom-r3 6s ease-in-out 0s infinite; +} -@keyframes logo-cw { to { transform: rotate(360deg); } } -@keyframes logo-ccw { to { transform: rotate(-360deg); } } +/* Speed up rotation on hover */ +.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s, 6s; } +.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s, 6s; } +.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s, 6s; } + +@keyframes logo-cw { to { rotate: 360deg; } } +@keyframes logo-ccw { to { rotate: -360deg; } } + +/* Bloom pulse — inner first, ripples outward */ +@keyframes logo-bloom-r3 { + 0%, 100% { scale: 1; } + 40% { scale: 1.06; } + 60% { scale: 1.06; } +} +@keyframes logo-bloom-r2 { + 0%, 100% { scale: 1; } + 40% { scale: 1.05; } + 60% { scale: 1.05; } +} +@keyframes logo-bloom-r1 { + 0%, 100% { scale: 1; } + 40% { scale: 1.04; } + 60% { scale: 1.04; } +} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index c240035..30c2745 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -12,7 +12,7 @@
- + {{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto logo-static") -}}

{{ .Site.Params.description }}

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 57bd1c2..dcb4e7c 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -10,9 +10,9 @@ :class="$store.nav.open || scrolled ? 'bg-ink/95 backdrop-blur-md shadow-[0_1px_0_var(--color-zinc)]' : ''" > - + {{- partial "logo.html" (dict "id" "nav" "class" "h-10 w-auto flex-shrink-0") -}} - + {{- .Site.Params.logoText -}}