diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 511f46e..9e76047 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -1984,23 +1984,31 @@ html.cybersigil body::after { background-size: 7px 7px; } -/* 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). */ +/* Background growth — one generated sigil (DOM injected by CyberFx), + * spreading from its central spine out to both sides. Its strokes carve + * in and wipe out forever (staggered per --i) so the whole figure is + * perpetually redrawing itself. Sits behind the imagery. */ .cybersigil .cs-fx-wire { top: 50%; left: 50%; width: 92vmin; height: 92vmin; opacity: 0.14; - animation: cs-wire-spin 120s linear infinite; + transform: translate(-50%, -50%); } .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); + animation: cs-redraw 5.5s ease-in-out infinite; + /* negative, per-stroke offset: the field is always mid-carve, never blank */ + animation-delay: calc(var(--i, 0) * -0.34s); +} +@keyframes cs-redraw { + 0% { stroke-dashoffset: 1; } + 35% { stroke-dashoffset: 0; } + 60% { stroke-dashoffset: 0; } + 100% { stroke-dashoffset: -1; } } /* Random horizontal databend tears — bright displaced bars, mostly absent. */ @@ -3021,10 +3029,6 @@ html.cybersigil body::after { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } -@keyframes cs-wire-spin { - from { transform: translate(-50%, -50%) rotate(0deg); } - to { transform: translate(-50%, -50%) rotate(360deg); } -} @keyframes cs-flicker { 0%, 8% { opacity: 0.26; } 9% { opacity: 0.46; } @@ -3057,4 +3061,10 @@ html.cybersigil body::after { transition-duration: 0.001ms !important; scroll-behavior: auto !important; } + /* The looping background sigil would otherwise collapse to its hidden + * end-state — pin it fully drawn instead so it stays visible, just still. */ + .cybersigil .cs-fx-wire .cs-sigil path { + animation: none !important; + stroke-dashoffset: 0 !important; + } }