ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hero motion clearly perceptible — Ken Burns on the photo layer, glow opacity pulse, faster cycles (12s/26s)

Browse Source
This commit is contained in:
ctao
2026-07-25 14:21:47 +02:00
parent 97d1a0aa43
commit 4082be0c37
1 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+26 -4
View File
@@ -708,9 +708,23 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va
.band-bg::before { .band-bg::before {
content: ""; position: absolute; inset: -45% -30%; content: ""; position: absolute; inset: -45% -30%;
background: var(--nebula); background: var(--nebula);
animation: nebula 16s ease-in-out infinite alternate; animation: nebula 12s ease-in-out infinite alternate;
}
/* Photo hero, animated path: the photo itself moves (slow Ken Burns zoom —
the unmistakable "alive" signal) and carries its scrim so the AA zones
travel with it (≤ ~4% shift at scale 1.1 — left text zone stays ≥.76α).
The Cherenkov glow drifts AND breathes (opacity pulse) above the photo. */
.hero-band { background: var(--galaxy); }
.hero-band .band-bg::before {
inset: -6%;
background: var(--hero-scrim), url("/brand/hero.jpg") center / cover;
animation: kenburns 26s ease-in-out infinite alternate;
}
.hero-band .band-bg::after {
content: ""; position: absolute; inset: -45% -30%;
background: var(--nebula-glow);
animation: glowdrift 12s ease-in-out infinite alternate;
} }
.hero-band .band-bg::before { background: var(--nebula-glow); }
/* Whole-page wash — slow drift, clearly alive */ /* Whole-page wash — slow drift, clearly alive */
.has-ambient::before { animation: ambient 36s ease-in-out infinite alternate; } .has-ambient::before { animation: ambient 36s ease-in-out infinite alternate; }
/* Hero content rises in once, gently staggered */ /* Hero content rises in once, gently staggered */
@@ -729,8 +743,16 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va
.card:hover, .search-results li:hover { transform: translateY(-2px); } /* the one elevate gesture (no cover zoom) */ .card:hover, .search-results li:hover { transform: translateY(-2px); } /* the one elevate gesture (no cover zoom) */
} }
@keyframes nebula { /* inert unless applied inside the block above */ @keyframes nebula { /* inert unless applied inside the block above */
from { transform: translate3d(-8%, -5%, 0) rotate(-6deg) scale(1); } from { transform: translate3d(-8%, -5%, 0) rotate(-6deg) scale(1); opacity: 0.75; }
to { transform: translate3d(8%, 6%, 0) rotate(6deg) scale(1.3); } to { transform: translate3d(8%, 6%, 0) rotate(6deg) scale(1.3); opacity: 1; }
}
@keyframes glowdrift {
from { transform: translate3d(-6%, -4%, 0) rotate(-5deg) scale(1); opacity: 0.55; }
to { transform: translate3d(7%, 5%, 0) rotate(5deg) scale(1.25); opacity: 1; }
}
@keyframes kenburns {
from { transform: scale(1) translate3d(0, 0, 0); }
to { transform: scale(1.1) translate3d(2%, -1.5%, 0); }
} }
@keyframes ambient { @keyframes ambient {
from { transform: translate3d(-5%, -4%, 0) rotate(-10deg) scale(1); opacity: 0.85; } from { transform: translate3d(-5%, -4%, 0) rotate(-10deg) scale(1); opacity: 0.85; }