better cybersigilism

frontend/src/styles/global.css

@@ -1896,27 +1896,68 @@ input[type="date"] { color-scheme: light; }
  * shifted — atmospheric, not blown out. */
 .cybersigil body::after,
 html.cybersigil body::after {
-  opacity: 0.4;
+  opacity: 0.46;
   background-image:
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.91 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.91 0 0 0 0 1 0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.02' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.32 0 0 0 0 0.38 0 0 0 0.11 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
     repeating-linear-gradient(
       0deg,
       rgba(0, 0, 0, 0) 0,
-      rgba(0, 0, 0, 0) 2px,
+      rgba(0, 0, 0, 0) 3px,
-      rgba(0, 0, 0, 0.34) 3px,
+      rgba(0, 0, 0, 0.18) 4px,
-      rgba(0, 0, 0, 0) 4px
+      rgba(0, 0, 0, 0) 5px
     );
+  background-size: 200px 200px, 760px 760px, auto;
   mix-blend-mode: screen;
 }
 
-/* Glow pools — ice-cyan + bruised magenta, large + faint. Moody, not lit. */
+/* Sigil overgrowth — hand-drawn thorny vine sigils bleeding in from two
+ * corners like ink taking over the page. Not a glow, not a HUD: organic
+ * chaos. ::before = cyan primary, ::after = magenta chromatic ghost on a
+ * different drift phase (modern-breakcore RGB tear on a living form). */
+.cybersigil .salon-atmosphere::before,
+.cybersigil .salon-atmosphere::after {
+  border-radius: 0;
+  -webkit-mask: var(--cs-growth) no-repeat;
+  mask: var(--cs-growth) no-repeat;
+}
 .cybersigil .salon-atmosphere::before {
+  width: 78vmin;
+  height: 78vmin;
+  top: auto;
+  left: auto;
+  right: -16vmin;
+  bottom: -14vmin;
   background: var(--sky);
-  opacity: 0.07;
+  opacity: 0.16;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--sky) 45%, transparent));
+  transform: rotate(2deg);
+  animation: cs-drift-a 34s ease-in-out infinite alternate;
 }
 .cybersigil .salon-atmosphere::after {
+  width: 64vmin;
+  height: 64vmin;
+  top: -18vmin;
+  left: -15vmin;
+  right: auto;
+  bottom: auto;
   background: var(--mauve);
-  opacity: 0.06;
+  opacity: 0.12;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  filter: drop-shadow(0 0 11px color-mix(in srgb, var(--mauve) 42%, transparent));
+  transform: scaleX(-1) rotate(-7deg) translate(3px, -2px);
+  animation: cs-drift-b 41s ease-in-out infinite alternate;
+}
+@keyframes cs-drift-a {
+  from { transform: rotate(2deg)  translate(0, 0)      scale(1); }
+  to   { transform: rotate(-3deg) translate(-2.4vmin, 1.6vmin) scale(1.05); }
+}
+@keyframes cs-drift-b {
+  from { transform: scaleX(-1) rotate(-7deg) translate(3px, -2px)  scale(1); }
+  to   { transform: scaleX(-1) rotate(-1deg) translate(1.8vmin, 1.4vmin) scale(1.07); }
 }
 
 /* Selection — magenta block, bone text, cyan bleed. */
@@ -1993,26 +2034,31 @@ html.cybersigil body::after {
 .cybersigil .plate::after {
   content: "";
   position: absolute;
-  width: 26px;
+  background-color: color-mix(in srgb, var(--sky) 80%, transparent);
-  height: 26px;
+  -webkit-mask: var(--cs-sprout) no-repeat;
-  border: 1.5px solid color-mix(in srgb, var(--sky) 70%, transparent);
+  mask: var(--cs-sprout) no-repeat;
-  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sky) 45%, transparent));
+  -webkit-mask-size: contain;
+  mask-size: contain;
   pointer-events: none;
-  transition: border-color 0.18s ease, filter 0.18s ease;
+  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sky) 40%, transparent));
+  transition: background-color 0.22s ease, filter 0.22s ease, transform 0.22s ease;
+  z-index: 1;
 }
 .cybersigil .plate::before {
-  top: -1px;
+  width: 78px;
-  left: -1px;
+  height: 78px;
-  border-right: 0;
+  top: -10px;
-  border-bottom: 0;
+  left: -10px;
-  clip-path: polygon(0 0, 100% 0, 100% 20%, 32% 20%, 32% 100%, 0 100%);
+  transform-origin: top left;
 }
 .cybersigil .plate::after {
-  right: -1px;
+  width: 52px;
-  bottom: -1px;
+  height: 52px;
-  border-left: 0;
+  right: -8px;
-  border-top: 0;
+  bottom: -8px;
-  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%, 68% 80%, 68% 0);
+  transform: scale(-1);
+  transform-origin: bottom right;
+  opacity: 0.7;
 }
 .cybersigil .plate:hover {
   transform: translateY(-3px);
@@ -2022,10 +2068,15 @@ html.cybersigil body::after {
     0 32px 60px -28px rgba(200, 50, 122, 0.42),
     0 0 34px -8px color-mix(in srgb, var(--mauve) 48%, transparent);
 }
-.cybersigil .plate:hover::before,
+.cybersigil .plate:hover::before {
+  background-color: var(--mauve);
+  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mauve) 60%, transparent));
+  transform: scale(1.14) rotate(-3deg);
+}
 .cybersigil .plate:hover::after {
-  border-color: var(--mauve);
+  background-color: var(--mauve);
-  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mauve) 60%, transparent));
+  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mauve) 55%, transparent));
+  transform: scale(-1.12) rotate(2deg);
 }
 .cybersigil .plate:focus-visible {
   box-shadow:
@@ -2080,7 +2131,18 @@ html.cybersigil body::after {
     linear-gradient(135deg, color-mix(in srgb, var(--sky) 40%, var(--surface2)), color-mix(in srgb, var(--mauve) 40%, var(--surface1))) border-box;
 }
 
-/* Section rule — masked barbed sigil glyph between cyan→magenta filaments. */
+/* Hand-authored cybersigil artwork — thorny asymmetric vine sigils (flowing
+ * spine strokes + tapered filled barbs). Used as page overgrowth, card
+ * sprouts, and the barbed divider line. Painted white; tinted per-surface
+ * via mask + background-color. */
+.cybersigil {
+  --cs-growth: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><path d='M30,285 C70,250 55,215 100,188 C150,158 120,120 175,96 C225,74 205,46 250,28 M100,188 C95,160 110,150 140,138 C160,130 168,116 170,98 M175,96 C190,108 210,104 232,112' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/><path d='M100,188 C78,176 60,170 44,150 C66,168 84,176 102,192 Z M175,96 C196,84 214,84 236,72 C214,90 196,98 177,100 Z M140,138 C128,118 124,100 122,78 C136,98 146,116 152,134 Z M250,28 C262,44 280,46 296,40 C280,54 264,52 250,42 Z M64,238 C46,228 36,214 26,196 C42,216 54,230 70,244 Z M205,46 C220,34 238,32 256,22 C238,40 222,46 207,50 Z' fill='%23fff'/></svg>");
+  --cs-sprout: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M4,4 C24,14 30,30 34,52 C36,66 44,78 60,90' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/><path d='M30,30 C18,22 12,12 8,2 C20,12 30,20 36,34 Z M34,52 C50,46 60,46 74,40 C58,54 46,58 34,60 Z M48,76 C40,62 38,52 38,40 C48,54 54,64 56,74 Z' fill='%23fff'/></svg>");
+  --cs-barbline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'><path d='M0,8 C20,8 26,7 40,8 L48,2 L52,8 C70,9 78,8 96,8 L92,13 L102,8 C120,7 134,9 150,8 L158,3 L162,8 C182,8 196,7 210,8 L206,12 L214,8 C226,8 232,8 240,8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/></svg>");
+}
+
+/* Section rule — barbed sigil filament (organic, irregular) flanking a mono
+ * label. The ornament is a single sharp mark, not an icon. */
 .cybersigil .section-rule {
   color: var(--sky);
   font-family: var(--font-mono);
@@ -2091,27 +2153,20 @@ html.cybersigil body::after {
 }
 .cybersigil .section-rule::before,
 .cybersigil .section-rule::after {
-  height: 1px;
+  height: 14px;
-  opacity: 0.9;
+  background: transparent;
-  background: linear-gradient(
+  background-color: color-mix(in srgb, var(--sky) 78%, var(--mauve) 22%);
-    to right,
+  -webkit-mask: var(--cs-barbline) repeat-x center / 220px 100%;
-    transparent,
+  mask: var(--cs-barbline) repeat-x center / 220px 100%;
-    color-mix(in srgb, var(--sky) 75%, transparent) 45%,
+  opacity: 0.75;
-    color-mix(in srgb, var(--mauve) 75%, transparent) 55%,
-    transparent
-  );
 }
 .cybersigil .section-rule .ornament {
   color: transparent;
-  width: 1.1em;
+  width: 0.5em;
-  height: 1.1em;
+  height: 0.5em;
   background-color: var(--sky);
-  -webkit-mask: var(--cs-sigil) center / contain no-repeat;
+  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
-  mask: var(--cs-sigil) center / contain no-repeat;
+  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sky) 65%, transparent));
-  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sky) 60%, transparent));
-}
-.cybersigil {
-  --cs-sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'><path d='M12 1 L12 23 M12 1 L9 4 M12 1 L15 4 M12 7 L7 10 M12 7 L17 10 M12 13 L8.5 16 M12 13 L15.5 16'/></svg>");
 }
 
 /* Readability — lift dim-on-near-black copy spots to the subtext ramp. */
@@ -2213,9 +2268,6 @@ html.cybersigil body::after {
 
 /* Back-link → sigil-marked neon return tab. */
 .cybersigil .back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
   font-family: var(--font-mono);
   font-style: normal;
   font-size: 0.7rem;
@@ -2228,16 +2280,6 @@ html.cybersigil body::after {
   box-shadow: 3px 3px 0 0 var(--mauve);
   text-shadow: 0 0 6px color-mix(in srgb, var(--sky) 50%, transparent);
 }
-.cybersigil .back-link::before {
-  content: "";
-  width: 0.95em;
-  height: 0.95em;
-  flex: none;
-  background-color: currentColor;
-  -webkit-mask: var(--cs-sigil) center / contain no-repeat;
-  mask: var(--cs-sigil) center / contain no-repeat;
-  transform: rotate(-90deg);
-}
 .cybersigil .back-link:hover,
 .cybersigil .back-link:focus-visible {
   color: var(--crust);
@@ -2333,18 +2375,23 @@ html.cybersigil body::after {
   padding: 0.5rem 0 0.5rem 1.4rem;
 }
 .cybersigil .prose hr {
-  height: 3px;
+  height: 16px;
-  opacity: 0.9;
+  border: 0;
-  background: repeating-linear-gradient(
+  opacity: 0.85;
+  background: linear-gradient(
     90deg,
-    var(--sky) 0 12px,
+    transparent,
-    var(--mauve) 12px 24px
+    var(--sky) 22%,
+    var(--mauve) 78%,
+    transparent
   );
-  box-shadow: 0 0 12px color-mix(in srgb, var(--sky) 42%, transparent);
+  -webkit-mask: var(--cs-barbline) repeat-x center / 220px 100%;
+  mask: var(--cs-barbline) repeat-x center / 220px 100%;
+  box-shadow: none;
+  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 40%, transparent));
 }
 .cybersigil .prose hr::before {
-  background: var(--sky);
+  display: none;
-  box-shadow: 0 0 8px var(--sky);
 }
 .cybersigil .prose h3 { color: var(--pink); }
 .cybersigil .prose h4 { color: var(--teal); }