init elas atelier #1
@@ -1984,23 +1984,31 @@ html.cybersigil body::after {
|
|||||||
background-size: 7px 7px;
|
background-size: 7px 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Slow background growth — one generated sigil (DOM injected by CyberFx),
|
/* Background growth — one generated sigil (DOM injected by CyberFx),
|
||||||
* spreading from its central spine out to both sides, rotating almost
|
* spreading from its central spine out to both sides. Its strokes carve
|
||||||
* imperceptibly. Sits behind the imagery (see image-lift rules below). */
|
* in and wipe out forever (staggered per --i) so the whole figure is
|
||||||
|
* perpetually redrawing itself. Sits behind the imagery. */
|
||||||
.cybersigil .cs-fx-wire {
|
.cybersigil .cs-fx-wire {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 92vmin;
|
width: 92vmin;
|
||||||
height: 92vmin;
|
height: 92vmin;
|
||||||
opacity: 0.14;
|
opacity: 0.14;
|
||||||
animation: cs-wire-spin 120s linear infinite;
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
.cybersigil .cs-fx-wire .cs-sigil {
|
.cybersigil .cs-fx-wire .cs-sigil {
|
||||||
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 35%, transparent));
|
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 35%, transparent));
|
||||||
}
|
}
|
||||||
.cybersigil .cs-fx-wire .cs-sigil path {
|
.cybersigil .cs-fx-wire .cs-sigil path {
|
||||||
animation: cs-carve 2400ms ease-out forwards;
|
animation: cs-redraw 5.5s ease-in-out infinite;
|
||||||
animation-delay: calc(var(--i, 0) * 70ms);
|
/* 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. */
|
/* Random horizontal databend tears — bright displaced bars, mostly absent. */
|
||||||
@@ -3021,10 +3029,6 @@ html.cybersigil body::after {
|
|||||||
0%, 49% { opacity: 1; }
|
0%, 49% { opacity: 1; }
|
||||||
50%, 100% { opacity: 0; }
|
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 {
|
@keyframes cs-flicker {
|
||||||
0%, 8% { opacity: 0.26; }
|
0%, 8% { opacity: 0.26; }
|
||||||
9% { opacity: 0.46; }
|
9% { opacity: 0.46; }
|
||||||
@@ -3057,4 +3061,10 @@ html.cybersigil body::after {
|
|||||||
transition-duration: 0.001ms !important;
|
transition-duration: 0.001ms !important;
|
||||||
scroll-behavior: auto !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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user