diff --git a/src/styles/global.css b/src/styles/global.css index f321aa9..8ce3afa 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -55,15 +55,17 @@ /* Nebula glow (BRAND D.5) — auth band, static AND animated. Alphas are contrast ceilings (DESIGN.md): Cherenkov ≤.38 / Azure ≤.35; cores sit in opposite corners — cores never meet. */ + /* Lava-lamp rule (research): motion reads only on DEFINED shapes — blobs are + ~30% wide with visible falloff edges, high alpha, and travel far. Cherenkov + core stays pinned to the right half (text zone lives left of ~52%). */ --nebula: - radial-gradient(52% 58% at 78% 76%, rgba(0, 228, 216, 0.38), transparent 66%), - radial-gradient(46% 52% at 12% 18%, rgba(0, 122, 255, 0.33), transparent 64%), + radial-gradient(34% 40% at 76% 74%, rgba(0, 228, 216, 0.55), transparent 62%), + radial-gradient(30% 36% at 14% 18%, rgba(0, 122, 255, 0.45), transparent 60%), radial-gradient(75% 85% at 40% 55%, rgba(0, 0, 156, 0.8), transparent 72%); - /* Photo-hero variant: no indigo depth blob over photography, Cherenkov ≤.30 - with its core pinned ≥80% band width (only ~.15 fringe reaches text). */ + /* Photo-hero variant: no indigo depth blob over photography. */ --nebula-glow: - radial-gradient(52% 58% at 82% 80%, rgba(0, 228, 216, 0.3), transparent 66%), - radial-gradient(46% 52% at 10% 15%, rgba(0, 122, 255, 0.28), transparent 64%); + radial-gradient(30% 42% at 80% 72%, rgba(0, 228, 216, 0.6), transparent 60%), + radial-gradient(26% 36% at 14% 20%, rgba(0, 122, 255, 0.5), transparent 60%); /* Hero scrim over the photo — worst-case AA computed in DESIGN.md: small text lives left of 52% band width (α ≥ .76 there). */ --hero-scrim: linear-gradient(to right, @@ -723,7 +725,8 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va .hero-band .band-bg::after { content: ""; position: absolute; inset: -45% -30%; background: var(--nebula-glow); - animation: glowdrift 12s ease-in-out infinite alternate; + mix-blend-mode: screen; /* blobs GLOW over the photo instead of tinting it */ + animation: glowdrift 9s ease-in-out infinite alternate; } /* Whole-page wash — slow drift, clearly alive */ .has-ambient::before { animation: ambient 36s ease-in-out infinite alternate; } @@ -747,8 +750,8 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va 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; } + from { transform: translate3d(-13%, -9%, 0) rotate(-6deg) scale(1); opacity: 0.5; } + to { transform: translate3d(13%, 10%, 0) rotate(6deg) scale(1.3); opacity: 1; } } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); }