update login

keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css

@@ -223,7 +223,7 @@ body.drill-login::before {
   align-items: stretch;
 }
 
-.drill-login__rig,
+.drill-login__signal-flow,
 .drill-login__signal-list {
   position: relative;
   overflow: hidden;
@@ -235,55 +235,98 @@ body.drill-login::before {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
-.drill-login__rig {
+.drill-login__signal-flow {
   min-height: 224px;
+  display: grid;
+  align-items: stretch;
 }
 
-.drill-login__rig::before {
+.drill-login__signal-flow::before {
   content: "";
   position: absolute;
-  inset: auto 24px 28px;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(215, 161, 95, 0.7), transparent);
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 18% 24%, rgba(52, 211, 153, 0.12), transparent 28%),
+    linear-gradient(90deg, rgba(215, 161, 95, 0.08), transparent 38%, rgba(52, 211, 153, 0.08));
 }
 
-.drill-login__rig-mast,
-.drill-login__rig-leg,
-.drill-login__rig-floor {
+.drill-login__signal-flow svg {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 224px;
+  padding: 16px;
+}
+
+.drill-login__signal-path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.drill-login__signal-path--base {
+  stroke: rgba(148, 163, 184, 0.24);
+  stroke-width: 2;
+}
+
+.drill-login__signal-path--pulse {
+  stroke: url("#signalLine");
+  stroke-width: 3;
+  stroke-dasharray: 42 280;
+  animation: drillSignalFlow 3.2s linear infinite;
+  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.42));
+}
+
+.drill-login__signal-path--two {
+  animation-delay: -1s;
+}
+
+.drill-login__signal-path--three {
+  animation-delay: -2s;
+}
+
+.drill-login__signal-nodes circle {
+  fill: #0b1220;
+  stroke: rgba(215, 161, 95, 0.68);
+  stroke-width: 2;
+  filter: drop-shadow(0 0 8px rgba(215, 161, 95, 0.22));
+  animation: drillSignalNodePulse 2.8s ease-in-out infinite;
+}
+
+.drill-login__signal-nodes circle:nth-child(3n) {
+  stroke: rgba(52, 211, 153, 0.78);
+  animation-delay: -1.4s;
+}
+
+.drill-login__signal-flow-label {
   position: absolute;
-  left: 50%;
-  display: block;
-  background: rgba(215, 161, 95, 0.84);
-  box-shadow: 0 0 18px rgba(215, 161, 95, 0.16);
+  left: 14px;
+  right: 14px;
+  bottom: 12px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(148, 163, 184, 0.12);
 }
 
-.drill-login__rig-mast {
-  bottom: 48px;
-  width: 4px;
-  height: 132px;
-  transform: translateX(-50%);
+.drill-login__signal-flow-label strong {
+  color: #f8fafc;
+  font-size: 0.86rem;
 }
 
-.drill-login__rig-leg {
-  bottom: 48px;
-  width: 3px;
-  height: 134px;
-  transform-origin: bottom;
-}
-
-.drill-login__rig-leg--left {
-  transform: translateX(-50%) rotate(18deg);
-}
-
-.drill-login__rig-leg--right {
-  transform: translateX(-50%) rotate(-18deg);
-}
-
-.drill-login__rig-floor {
-  bottom: 42px;
-  width: 120px;
-  height: 5px;
-  transform: translateX(-50%);
+.drill-login__signal-flow-label span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--drill-muted);
+  font-size: 0.74rem;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .drill-login__signal-list {
@@ -534,6 +577,27 @@ body.drill-login::before {
   font-size: 0.78rem;
 }
 
+@keyframes drillSignalFlow {
+  from {
+    stroke-dashoffset: 320;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes drillSignalNodePulse {
+  0%,
+  100% {
+    opacity: 0.72;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
 @media (max-width: 1120px) {
   .drill-login__shell {
     grid-template-columns: 1fr;
@@ -599,7 +663,8 @@ body.drill-login::before {
     min-height: 180px;
   }
 
-  .drill-login__rig {
+  .drill-login__signal-flow,
+  .drill-login__signal-flow svg {
     min-height: 180px;
   }