diff --git a/src/styles/global.css b/src/styles/global.css index b3236ae..f321aa9 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -708,9 +708,23 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va .band-bg::before { content: ""; position: absolute; inset: -45% -30%; 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 */ .has-ambient::before { animation: ambient 36s ease-in-out infinite alternate; } /* 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) */ } @keyframes nebula { /* inert unless applied inside the block above */ - from { transform: translate3d(-8%, -5%, 0) rotate(-6deg) scale(1); } - to { transform: translate3d(8%, 6%, 0) rotate(6deg) scale(1.3); } + from { transform: translate3d(-8%, -5%, 0) rotate(-6deg) scale(1); opacity: 0.75; } + 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 { from { transform: translate3d(-5%, -4%, 0) rotate(-10deg) scale(1); opacity: 0.85; }