diff --git a/frontend/src/components/CyberFx.astro b/frontend/src/components/CyberFx.astro index e0fb789..4a62525 100644 --- a/frontend/src/components/CyberFx.astro +++ b/frontend/src/components/CyberFx.astro @@ -42,6 +42,13 @@ }); } + /* ─── One slow-spinning sigil filling the background ─── */ + const wire = document.querySelector('.cs-fx-wire'); + if (wire && !wire.classList.contains('cs-fx-wire--sig')) { + wire.innerHTML = buildCybersigil({ count: 9 }); + wire.classList.add('cs-fx-wire--sig'); + } + /* ─── Scroll-entry databend on images ─── */ if (!reduced && 'IntersectionObserver' in window) { const targets = document.querySelectorAll( diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 69e5341..dce642e 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -1935,7 +1935,7 @@ input[type="date"] { color-scheme: light; } /* Corrupted-tube grain: cold static + tight scanlines, blue-shifted. */ .cybersigil body::after, html.cybersigil body::after { - opacity: 0.42; + opacity: 0.24; background-image: url("data:image/svg+xml;utf8,"), repeating-linear-gradient( @@ -1984,17 +1984,23 @@ html.cybersigil body::after { background-size: 7px 7px; } -/* Slow wireframe mesh drift — a derelict orbital, almost subliminal. */ +/* Slow background growth — one generated sigil (DOM injected by CyberFx), + * spreading from its central spine out to both sides, rotating almost + * imperceptibly. Sits behind the imagery (see image-lift rules below). */ .cybersigil .cs-fx-wire { top: 50%; left: 50%; - width: 78vmin; - height: 78vmin; - opacity: 0.07; - mix-blend-mode: screen; - background: center / contain no-repeat - url("data:image/svg+xml;utf8,"); - animation: cs-wire-spin 96s linear infinite; + width: 92vmin; + height: 92vmin; + opacity: 0.14; + animation: cs-wire-spin 120s linear infinite; +} +.cybersigil .cs-fx-wire .cs-sigil { + filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 35%, transparent)); +} +.cybersigil .cs-fx-wire .cs-sigil path { + animation: cs-carve 2400ms ease-out forwards; + animation-delay: calc(var(--i, 0) * 70ms); } /* Random horizontal databend tears — bright displaced bars, mostly absent. */ @@ -2224,7 +2230,18 @@ html.cybersigil body::after { .cybersigil .plate:hover .plate-caption-title { text-shadow: -1px 0 0 var(--sky), 1px 0 0 var(--mauve); } -.cybersigil .plate-image { background: var(--mantle); } +/* Lift the imagery clear of the ambient FX/grain so photos read solid — + * only the hover sigil (cs-plate-sig, z-index above this) sits over them. */ +.cybersigil .plate-image { + background: var(--mantle); + position: relative; + z-index: 12; +} +/* Drop the salon hang-tilt under cybersigil: the rigid terminal look wants + * square tiles, and removing the inline transform frees images from its + * stacking context so the z-index lift actually beats the fixed FX. */ +.cybersigil a.plate { transform: none !important; } +.cybersigil .plate:hover { transform: translateY(-3px) !important; } .cybersigil .plate:hover .plate-image img { filter: drop-shadow(-3px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent)) @@ -2272,7 +2289,7 @@ html.cybersigil body::after { width: 46%; height: 118%; transform: translateX(-50%); - z-index: 2; + z-index: 14; pointer-events: none; opacity: 0; mix-blend-mode: screen; @@ -2317,6 +2334,8 @@ html.cybersigil body::after { background: linear-gradient(var(--surface0), var(--surface0)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--sky) 40%, var(--surface2)), color-mix(in srgb, var(--mauve) 40%, var(--surface1))) border-box; + position: relative; + z-index: 12; } /* Section rule — terminal divider `// ……… [sigil] ……… //`. */