atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/loader/loader.css

@@ -0,0 +1,1635 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+  --ui-primary-color: #3b82f6;
+  --ui-secondary-color: #64748b;
+  --ui-success-color: #10b981;
+  --ui-danger-color: #ef4444;
+  --ui-warning-color: #f59e0b;
+  --ui-info-color: #06b6d4;
+  --loader-color: var(--ui-primary-color);
+  --loader-size: 40px;
+  --loader-speed: 1s;
+  --loader-thickness: 3px;
+  --overlay-opacity: 0.5;
+  --overlay-background: rgba(255, 255, 255, var(--overlay-opacity));
+}
+
+.loader-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.3s ease;
+}
+.loader-wrapper.loader-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  background: var(--overlay-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.loader-wrapper.loader-fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+}
+.loader-wrapper.loader-blur {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.loader-wrapper.loader-variant-glass {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+}
+.loader-wrapper.loader-variant-neon {
+  background: rgba(10, 10, 12, 0.95);
+  box-shadow: inset 0 0 40px color-mix(in srgb, var(--loader-color) 20%, transparent), 0 0 20px color-mix(in srgb, var(--loader-color) 10%, transparent);
+  --loader-color: #a855f7;
+}
+.loader-wrapper.loader-variant-minimal {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.loader-wrapper.loader-variant-linear-strip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: transparent;
+  z-index: 1001;
+}
+
+.loader-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  gap: 16px;
+}
+.loader-container.loader-size-3xs {
+  --loader-size: 12px;
+}
+.loader-container.loader-size-2xs {
+  --loader-size: 16px;
+}
+.loader-container.loader-size-xs {
+  --loader-size: 20px;
+}
+.loader-container.loader-size-small {
+  --loader-size: 28px;
+}
+.loader-container.loader-size-md {
+  --loader-size: 40px;
+}
+.loader-container.loader-size-large {
+  --loader-size: 56px;
+}
+.loader-container.loader-size-xl {
+  --loader-size: 72px;
+}
+.loader-container.loader-size-2xl {
+  --loader-size: 96px;
+}
+.loader-container.loader-size-3xl {
+  --loader-size: 120px;
+}
+.loader-container.loader-size-jumbo {
+  --loader-size: 160px;
+}
+.loader-container.loader-color-primary {
+  --loader-color: var(--ui-primary-color);
+}
+.loader-container.loader-color-secondary {
+  --loader-color: var(--ui-secondary-color);
+}
+.loader-container.loader-color-success {
+  --loader-color: var(--ui-success-color);
+}
+.loader-container.loader-color-danger {
+  --loader-color: var(--ui-danger-color);
+}
+.loader-container.loader-color-warning {
+  --loader-color: var(--ui-warning-color);
+}
+.loader-container.loader-color-info {
+  --loader-color: var(--ui-info-color);
+}
+
+.loader-container.loader-label-bottom {
+  flex-direction: column;
+  text-align: center;
+}
+.loader-container.loader-label-top {
+  flex-direction: column-reverse;
+  text-align: center;
+}
+.loader-container.loader-label-left {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+.loader-container.loader-label-right {
+  flex-direction: row;
+  text-align: left;
+}
+
+.loader-visual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  min-width: var(--loader-size);
+  min-height: var(--loader-size);
+}
+
+.loader-text-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.loader-label-text {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  letter-spacing: 0.02em;
+  animation: breathe 2s ease-in-out infinite;
+}
+.loader-variant-neon .loader-label-text {
+  color: #e9d5ff;
+  text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
+}
+
+.loader-desc-text {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  color: #64748b;
+}
+.loader-variant-neon .loader-desc-text {
+  color: #c084fc;
+}
+
+.loader-predictive-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 140px;
+  margin-top: 4px;
+}
+.loader-predictive-bar .loader-predictive-fill {
+  height: 4px;
+  background: var(--loader-color);
+  border-radius: 2px;
+  transition: width 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);
+}
+.loader-predictive-bar .loader-predictive-percentage {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--loader-color);
+}
+
+.focus-trap-sentinel {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.status-icon-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.status-icon-wrapper .status-svg {
+  width: var(--loader-size);
+  height: var(--loader-size);
+}
+.status-icon-wrapper .status-circle-bg {
+  stroke-width: 4;
+  stroke-miterlimit: 10;
+  animation: status-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+.status-icon-wrapper .status-check-path {
+  transform-origin: 50% 50%;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: status-stroke-offset 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
+}
+.status-icon-wrapper .status-cross-path {
+  transform-origin: 50% 50%;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: status-stroke-offset 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
+}
+.status-icon-wrapper.success .status-circle-bg {
+  stroke: var(--ui-success-color);
+  fill: none;
+}
+.status-icon-wrapper.success .status-check-path {
+  stroke: var(--ui-success-color);
+}
+.status-icon-wrapper.error .status-circle-bg {
+  stroke: var(--ui-danger-color);
+  fill: none;
+}
+.status-icon-wrapper.error .status-cross-path {
+  stroke: var(--ui-danger-color);
+}
+
+.anim-spinner {
+  width: 100%;
+  height: 100%;
+  border: var(--loader-thickness) solid color-mix(in srgb, var(--loader-color) 15%, transparent);
+  border-left-color: var(--loader-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: spin var(--loader-speed) linear infinite;
+}
+.loader-variant-neon .anim-spinner {
+  box-shadow: 0 0 10px var(--loader-color), inset 0 0 5px var(--loader-color);
+}
+
+.anim-dots {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+.anim-dots div {
+  width: 25%;
+  height: 25%;
+  background-color: var(--loader-color);
+  border-radius: 50%;
+  animation: dots-pulse var(--loader-speed) ease-in-out infinite;
+}
+.anim-dots div:nth-child(2) {
+  animation-delay: calc(var(--loader-speed) / 6);
+}
+.anim-dots div:nth-child(3) {
+  animation-delay: calc(var(--loader-speed) / 3);
+}
+
+.anim-bar {
+  width: 100%;
+  height: var(--loader-thickness);
+  background: rgba(120, 120, 120, 0.15);
+  border-radius: calc(var(--loader-thickness) / 2);
+  overflow: hidden;
+  position: relative;
+}
+.anim-bar .bar-indeterminate {
+  position: absolute;
+  height: 100%;
+  background: var(--loader-color);
+  left: -50%;
+  width: 50%;
+  border-radius: calc(var(--loader-thickness) / 2);
+  animation: bar-slide calc(var(--loader-speed) * 1.5) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+.anim-bar .bar-determinate {
+  height: 100%;
+  background: var(--loader-color);
+  border-radius: calc(var(--loader-thickness) / 2);
+  transition: width 0.3s ease;
+}
+
+.anim-pulse {
+  width: 80%;
+  height: 80%;
+  background-color: var(--loader-color);
+  border-radius: 50%;
+  animation: pulse-grow var(--loader-speed) ease-in-out infinite;
+}
+
+.anim-ring {
+  width: 100%;
+  height: 100%;
+  border: var(--loader-thickness) solid transparent;
+  border-top-color: var(--loader-color);
+  border-bottom-color: var(--loader-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: spin var(--loader-speed) cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.anim-bounce {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.anim-bounce div {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--loader-color);
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: bounce-scale calc(var(--loader-speed) * 2) ease-in-out infinite;
+}
+.anim-bounce div:nth-child(2) {
+  animation-delay: calc(var(--loader-speed) * -1);
+}
+
+.anim-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 15%;
+  width: 100%;
+  height: 100%;
+}
+.anim-grid div {
+  background-color: var(--loader-color);
+  border-radius: 50%;
+  animation: grid-fade calc(var(--loader-speed) * 1.2) ease-in-out infinite;
+}
+.anim-grid div:nth-child(1) {
+  animation-delay: 0s;
+}
+.anim-grid div:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.anim-grid div:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.anim-grid div:nth-child(4) {
+  animation-delay: 0.1s;
+}
+.anim-grid div:nth-child(5) {
+  animation-delay: 0.2s;
+}
+.anim-grid div:nth-child(6) {
+  animation-delay: 0.3s;
+}
+.anim-grid div:nth-child(7) {
+  animation-delay: 0.2s;
+}
+.anim-grid div:nth-child(8) {
+  animation-delay: 0.3s;
+}
+.anim-grid div:nth-child(9) {
+  animation-delay: 0.4s;
+}
+
+.anim-wave {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 80%;
+}
+.anim-wave div {
+  width: 12%;
+  height: 100%;
+  background-color: var(--loader-color);
+  border-radius: 4px;
+  animation: wave-stretch var(--loader-speed) ease-in-out infinite;
+}
+.anim-wave div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.anim-wave div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.anim-wave div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+.anim-wave div:nth-child(4) {
+  animation-delay: -0.3s;
+}
+.anim-wave div:nth-child(5) {
+  animation-delay: -0.45s;
+}
+
+.anim-dual-ring {
+  width: 100%;
+  height: 100%;
+  border: var(--loader-thickness) solid transparent;
+  border-left-color: var(--loader-color);
+  border-right-color: var(--loader-color);
+  border-radius: 50%;
+  animation: spin var(--loader-speed) linear infinite;
+}
+
+.anim-heartbeat {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.anim-heartbeat .heart-svg {
+  width: 90%;
+  height: 90%;
+  fill: var(--loader-color);
+  animation: pulse-heart calc(var(--loader-speed) * 1.2) ease infinite;
+}
+
+.anim-clock {
+  width: 100%;
+  height: 100%;
+  border: var(--loader-thickness) solid var(--loader-color);
+  border-radius: 50%;
+  position: relative;
+  box-sizing: border-box;
+}
+.anim-clock .clock-hour, .anim-clock .clock-minute {
+  position: absolute;
+  background-color: var(--loader-color);
+  width: var(--loader-thickness);
+  left: calc(50% - var(--loader-thickness) / 2);
+  transform-origin: bottom center;
+  border-radius: 4px;
+}
+.anim-clock .clock-hour {
+  height: 30%;
+  top: 20%;
+  animation: spin calc(var(--loader-speed) * 6) linear infinite;
+}
+.anim-clock .clock-minute {
+  height: 40%;
+  top: 10%;
+  animation: spin var(--loader-speed) linear infinite;
+}
+
+.anim-raining-letters {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid rgba(120, 120, 120, 0.15);
+  box-sizing: border-box;
+}
+.anim-raining-letters canvas {
+  width: 100% !important;
+  height: 100% !important;
+  background: transparent;
+}
+
+.anim-ripple {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.anim-ripple div {
+  position: absolute;
+  border: var(--loader-thickness) solid var(--loader-color);
+  border-radius: 50%;
+  opacity: 1;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: ripple-grow var(--loader-speed) cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.anim-ripple div:nth-child(2) {
+  animation-delay: -0.33s;
+}
+.anim-ripple div:nth-child(3) {
+  animation-delay: -0.66s;
+}
+
+.anim-infinite {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.anim-infinite svg {
+  width: 100%;
+  height: 60%;
+}
+.anim-infinite .infinity-bg {
+  stroke: rgba(120, 120, 120, 0.1);
+  stroke-width: 4;
+  fill: none;
+}
+.anim-infinite .infinity-loop {
+  stroke: var(--loader-color);
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: 120 200;
+  fill: none;
+  animation: loop-crawl calc(var(--loader-speed) * 1.5) linear infinite;
+}
+
+.anim-wifi {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.anim-wifi div {
+  border: var(--loader-thickness) solid transparent;
+  border-top-color: var(--loader-color);
+  border-radius: 50%;
+  position: absolute;
+  transform-origin: center center;
+  box-sizing: border-box;
+}
+.anim-wifi .wifi-dot {
+  width: 15%;
+  height: 15%;
+  background-color: var(--loader-color);
+  border: none;
+}
+.anim-wifi .wifi-arc-1 {
+  width: 45%;
+  height: 45%;
+  animation: wifi-pulse var(--loader-speed) ease-in-out infinite 0.1s;
+}
+.anim-wifi .wifi-arc-2 {
+  width: 70%;
+  height: 70%;
+  animation: wifi-pulse var(--loader-speed) ease-in-out infinite 0.2s;
+}
+.anim-wifi .wifi-arc-3 {
+  width: 95%;
+  height: 95%;
+  animation: wifi-pulse var(--loader-speed) ease-in-out infinite 0.3s;
+}
+
+.anim-rainbow {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  padding: var(--loader-thickness);
+  background: linear-gradient(90deg, #ff007f, #7f00ff, #00f0ff, #00ff7f, #ffef00, #ff007f);
+  background-size: 300% 300%;
+  box-sizing: border-box;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: xor;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: spin var(--loader-speed) linear infinite, gradient-move 3s ease infinite;
+}
+
+.anim-square-shuffle {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.anim-square-shuffle div {
+  width: 35%;
+  height: 35%;
+  background-color: var(--loader-color);
+  position: absolute;
+  animation: shuffle-move calc(var(--loader-speed) * 2) cubic-bezier(0.25, 1, 0.5, 1) infinite;
+}
+.anim-square-shuffle div:nth-child(1) {
+  top: 10%;
+  left: 10%;
+}
+.anim-square-shuffle div:nth-child(2) {
+  top: 10%;
+  left: 55%;
+  animation-delay: -0.5s;
+}
+.anim-square-shuffle div:nth-child(3) {
+  top: 55%;
+  left: 55%;
+  animation-delay: -1s;
+}
+.anim-square-shuffle div:nth-child(4) {
+  top: 55%;
+  left: 10%;
+  animation-delay: -1.5s;
+}
+
+.anim-dna-helix {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.anim-dna-helix .dna-strand {
+  height: 100%;
+  width: 6%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  animation: dna-twist calc(var(--loader-speed) * 1.5) ease-in-out infinite;
+  animation-delay: calc(var(--i) * -0.12s);
+}
+.anim-dna-helix .dna-strand .dna-dot {
+  width: 150%;
+  height: 6%;
+  background: var(--loader-color);
+  border-radius: 50%;
+}
+.anim-dna-helix .dna-strand .dna-bar {
+  width: 30%;
+  height: 80%;
+  background: rgba(120, 120, 120, 0.15);
+  border-radius: 2px;
+}
+
+.anim-atom-sphere {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.anim-atom-sphere .atom-nucleus {
+  width: 20%;
+  height: 20%;
+  background: var(--loader-color);
+  border-radius: 50%;
+  box-shadow: 0 0 10px var(--loader-color);
+}
+.anim-atom-sphere .atom-orbit {
+  position: absolute;
+  width: 100%;
+  height: 40%;
+  border: 1.5px solid color-mix(in srgb, var(--loader-color) 35%, transparent);
+  border-radius: 50%;
+}
+.anim-atom-sphere .atom-orbit .atom-electron {
+  width: var(--loader-thickness);
+  height: var(--loader-thickness);
+  background: var(--loader-color);
+  border-radius: 50%;
+  position: absolute;
+  top: -3px;
+  left: 50%;
+  box-shadow: 0 0 6px var(--loader-color);
+}
+.anim-atom-sphere .atom-orbit.orbit-1 {
+  transform: rotate(0deg);
+}
+.anim-atom-sphere .atom-orbit.orbit-1 .atom-electron {
+  animation: orbit-spin var(--loader-speed) linear infinite;
+}
+.anim-atom-sphere .atom-orbit.orbit-2 {
+  transform: rotate(60deg);
+}
+.anim-atom-sphere .atom-orbit.orbit-2 .atom-electron {
+  animation: orbit-spin var(--loader-speed) linear infinite -0.33s;
+}
+.anim-atom-sphere .atom-orbit.orbit-3 {
+  transform: rotate(-60deg);
+}
+.anim-atom-sphere .atom-orbit.orbit-3 .atom-electron {
+  animation: orbit-spin var(--loader-speed) linear infinite -0.66s;
+}
+
+.anim-staircase {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.anim-staircase .stair-climber {
+  width: 25%;
+  height: 25%;
+  background-color: var(--loader-color);
+  border-radius: 4px;
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  animation: stair-climb var(--loader-speed) cubic-bezier(0.25, 1, 0.5, 1) infinite;
+}
+.anim-staircase .stairs {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: 100%;
+  height: 100%;
+}
+.anim-staircase .stairs div {
+  background: rgba(120, 120, 120, 0.15);
+  height: 20%;
+  border-radius: 2px;
+  margin-top: 5%;
+}
+.anim-staircase .stairs div:nth-child(1) {
+  width: 100%;
+}
+.anim-staircase .stairs div:nth-child(2) {
+  width: 75%;
+}
+.anim-staircase .stairs div:nth-child(3) {
+  width: 50%;
+}
+.anim-staircase .stairs div:nth-child(4) {
+  width: 25%;
+}
+
+.anim-radar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1.5px solid rgba(120, 120, 120, 0.1);
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+}
+.anim-radar .radar-scanner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background: conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--loader-color) 15%, transparent) 0%, transparent 40%, transparent 100%);
+  transform: translate(-50%, -50%);
+  animation: spin var(--loader-speed) linear infinite;
+  transform-origin: 50% 50%;
+}
+.anim-radar .radar-ring, .anim-radar .radar-ring-mid {
+  position: absolute;
+  border: 1px dashed color-mix(in srgb, var(--loader-color) 25%, transparent);
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.anim-radar .radar-ring {
+  width: 70%;
+  height: 70%;
+}
+.anim-radar .radar-ring-mid {
+  width: 40%;
+  height: 40%;
+}
+.anim-radar .radar-dot {
+  width: 8%;
+  height: 8%;
+  background: var(--loader-color);
+  border-radius: 50%;
+  position: absolute;
+  top: 30%;
+  left: 65%;
+  box-shadow: 0 0 8px var(--loader-color);
+  animation: blink 1.2s infinite;
+}
+
+.anim-liquid-drop {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.anim-liquid-drop .drop-nozzle {
+  width: 20%;
+  height: 10%;
+  background: rgba(120, 120, 120, 0.2);
+  border-radius: 0 0 4px 4px;
+  margin: 0 auto;
+}
+.anim-liquid-drop .drop-droplet {
+  width: 14%;
+  height: 20%;
+  background: var(--loader-color);
+  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
+  position: absolute;
+  top: 10%;
+  left: 43%;
+  animation: drop-fall var(--loader-speed) cubic-bezier(0.5, 0, 0.7, 0.4) infinite;
+}
+.anim-liquid-drop .drop-surface {
+  width: 80%;
+  height: 8%;
+  background: color-mix(in srgb, var(--loader-color) 30%, transparent);
+  border-radius: 50%;
+  position: absolute;
+  bottom: 10%;
+  left: 10%;
+  animation: surface-ripple var(--loader-speed) ease infinite;
+}
+
+.anim-neon-path {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 0 15px color-mix(in srgb, var(--loader-color) 15%, transparent);
+  box-sizing: border-box;
+}
+.anim-neon-path div {
+  width: 100%;
+  height: 100%;
+  border: var(--loader-thickness) solid var(--loader-color);
+  border-radius: 12px;
+  box-sizing: border-box;
+  animation: neon-glow-scale 1.5s ease-in-out infinite alternate;
+}
+
+.anim-neuro-pulse {
+  width: 100%;
+  height: 100%;
+}
+.anim-neuro-pulse .neuro-svg {
+  width: 100%;
+  height: 100%;
+}
+.anim-neuro-pulse .neuro-branch {
+  stroke: rgba(120, 120, 120, 0.15);
+  stroke-width: 2;
+}
+.anim-neuro-pulse .neuro-center {
+  fill: var(--loader-color);
+}
+.anim-neuro-pulse .neuro-terminal {
+  fill: rgba(120, 120, 120, 0.4);
+}
+.anim-neuro-pulse .neuro-active-pulse {
+  fill: var(--loader-color);
+  animation: neuro-pulse-scale 2s ease-out infinite;
+}
+.anim-neuro-pulse .neuro-active-pulse.pulse-2 {
+  animation-delay: 1s;
+}
+
+.anim-vortex-ring {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.anim-vortex-ring div {
+  position: absolute;
+  border: var(--loader-thickness) solid transparent;
+  border-top-color: var(--loader-color);
+  border-radius: 50%;
+  animation: spin var(--loader-speed) cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
+}
+.anim-vortex-ring div:nth-child(1) {
+  width: 100%;
+  height: 100%;
+}
+.anim-vortex-ring div:nth-child(2) {
+  width: 70%;
+  height: 70%;
+  animation-delay: -0.2s;
+  animation-direction: reverse;
+}
+.anim-vortex-ring div:nth-child(3) {
+  width: 40%;
+  height: 40%;
+  animation-delay: -0.4s;
+}
+
+.anim-cube-fold {
+  width: 70%;
+  height: 70%;
+  transform: rotateZ(45deg);
+  position: relative;
+}
+.anim-cube-fold .fold-cube {
+  float: left;
+  width: 50%;
+  height: 50%;
+  position: relative;
+  transform: scale(1.1);
+}
+.anim-cube-fold .fold-cube::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--loader-color);
+  animation: cube-fold-anim calc(var(--loader-speed) * 2.4) linear infinite both;
+  transform-origin: 100% 100%;
+}
+.anim-cube-fold .fold-cube.cube-2 {
+  transform: scale(1.1) rotateZ(90deg);
+}
+.anim-cube-fold .fold-cube.cube-2::before {
+  animation-delay: 0.3s;
+}
+.anim-cube-fold .fold-cube.cube-3 {
+  transform: scale(1.1) rotateZ(270deg);
+}
+.anim-cube-fold .fold-cube.cube-3::before {
+  animation-delay: 0.9s;
+}
+.anim-cube-fold .fold-cube.cube-4 {
+  transform: scale(1.1) rotateZ(180deg);
+}
+.anim-cube-fold .fold-cube.cube-4::before {
+  animation-delay: 0.6s;
+}
+
+.anim-breathing {
+  width: 60%;
+  height: 60%;
+  background-color: var(--loader-color);
+  border-radius: 50%;
+  animation: breathe 2s ease-in-out infinite;
+  box-shadow: 0 0 15px var(--loader-color);
+}
+
+.anim-glitch-text {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 16px;
+  font-weight: 900;
+  color: #fff;
+  position: relative;
+  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.025em -0.05em 0 rgba(0, 255, 0, 0.75), 0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
+  animation: glitch 1s infinite;
+}
+.anim-glitch-text::before, .anim-glitch-text::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+.anim-glitch-text::before {
+  animation: glitch-anim-1 0.7s infinite linear alternate-reverse;
+  text-shadow: -2px 0 #ff00c1;
+  clip: rect(44px, 450px, 56px, 0);
+}
+.anim-glitch-text::after {
+  animation: glitch-anim-2 0.7s infinite linear alternate-reverse;
+  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
+  clip: rect(85px, 450px, 140px, 0);
+}
+
+.anim-plc-module {
+  background: #27272a;
+  border: 1.5px solid #3f3f46;
+  border-radius: 6px;
+  width: 90%;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: monospace;
+  font-size: 8px;
+  color: #a1a1aa;
+}
+.anim-plc-module .plc-header {
+  background: #3f3f46;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  padding: 2px 0;
+}
+.anim-plc-module .plc-leds {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px;
+  flex: 1;
+  justify-content: center;
+}
+.anim-plc-module .plc-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.anim-plc-module .plc-led {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.anim-plc-module .plc-led.led-green {
+  background: #22c55e;
+  box-shadow: 0 0 4px #22c55e;
+}
+.anim-plc-module .plc-led.led-amber {
+  background: #f59e0b;
+  box-shadow: 0 0 4px #f59e0b;
+}
+.anim-plc-module .plc-led.led-red {
+  background: #ef4444;
+}
+.anim-plc-module .plc-led.blinking {
+  animation: blink 0.8s infinite;
+}
+.anim-plc-module .plc-led.flicker {
+  animation: blink 0.25s infinite;
+}
+.anim-plc-module .plc-led.flicker-delayed {
+  animation: blink 0.35s infinite 0.15s;
+}
+.anim-plc-module .plc-led.off {
+  background: #52525b;
+  box-shadow: none;
+}
+
+.anim-m580-signal {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  width: 80%;
+  height: 60%;
+}
+.anim-m580-signal div {
+  width: 14%;
+  background-color: #22c55e;
+  border-radius: 1px;
+  box-shadow: 0 0 3px #22c55e;
+  animation: signal-rise 1.5s ease-in-out infinite;
+}
+.anim-m580-signal div:nth-child(1) {
+  height: 20%;
+  animation-delay: 0.1s;
+}
+.anim-m580-signal div:nth-child(2) {
+  height: 40%;
+  animation-delay: 0.2s;
+}
+.anim-m580-signal div:nth-child(3) {
+  height: 60%;
+  animation-delay: 0.3s;
+}
+.anim-m580-signal div:nth-child(4) {
+  height: 80%;
+  animation-delay: 0.4s;
+}
+.anim-m580-signal div:nth-child(5) {
+  height: 100%;
+  animation-delay: 0.5s;
+}
+
+.anim-circuit-board {
+  width: 100%;
+  height: 100%;
+}
+.anim-circuit-board svg {
+  width: 100%;
+  height: 100%;
+}
+.anim-circuit-board .circuit-path {
+  stroke: rgba(120, 120, 120, 0.15);
+  stroke-width: 3px;
+}
+.anim-circuit-board .circuit-node {
+  fill: none;
+  stroke: var(--loader-color);
+  stroke-width: 2.5px;
+}
+.anim-circuit-board .circuit-pulse {
+  fill: var(--loader-color);
+  box-shadow: 0 0 8px var(--loader-color);
+}
+
+.anim-callout-rotate {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.anim-callout-rotate .callout-ring {
+  width: 100%;
+  height: 100%;
+  border: var(--loader-thickness) dashed color-mix(in srgb, var(--loader-color) 40%, transparent);
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: spin calc(var(--loader-speed) * 3) linear infinite;
+}
+.anim-callout-rotate .callout-arrow {
+  position: absolute;
+  width: 30%;
+  height: 30%;
+  border: var(--loader-thickness) solid var(--loader-color);
+  border-top: none;
+  border-left: none;
+  top: 35%;
+  left: 35%;
+  transform: rotate(-45deg);
+  animation: spin var(--loader-speed) ease-in-out infinite;
+}
+
+.anim-infinite-roller {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: 30%;
+  border-radius: 10px;
+  background: rgba(120, 120, 120, 0.1);
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+.anim-infinite-roller div {
+  width: 16%;
+  height: 60%;
+  background-color: var(--loader-color);
+  border-radius: 50%;
+  animation: roll-slide 1.5s ease-in-out infinite;
+}
+.anim-infinite-roller div:nth-child(1) {
+  animation-delay: 0s;
+}
+.anim-infinite-roller div:nth-child(2) {
+  animation-delay: 0.25s;
+}
+.anim-infinite-roller div:nth-child(3) {
+  animation-delay: 0.5s;
+}
+
+.anim-image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.anim-image img {
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+  animation: pulse-grow 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes breathe {
+  0%, 100% {
+    opacity: 0.45;
+    transform: scale(0.95);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+}
+@keyframes dots-pulse {
+  0%, 100% {
+    transform: scale(0.3);
+    opacity: 0.2;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes bar-slide {
+  0% {
+    left: -50%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+@keyframes pulse-grow {
+  0%, 100% {
+    transform: scale(0);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 0.2;
+  }
+}
+@keyframes bounce-scale {
+  0%, 100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+}
+@keyframes grid-fade {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.3;
+    transform: scale(0.7);
+  }
+}
+@keyframes wave-stretch {
+  0%, 100% {
+    transform: scaleY(0.3);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+@keyframes pulse-heart {
+  0% {
+    transform: scale(0.9);
+  }
+  25% {
+    transform: scale(1.1);
+  }
+  35% {
+    transform: scale(1);
+  }
+  55% {
+    transform: scale(1.15);
+  }
+  70% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.9);
+  }
+}
+@keyframes ripple-grow {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+}
+@keyframes loop-crawl {
+  0% {
+    stroke-dashoffset: 320;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes wifi-pulse {
+  0%, 100% {
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes gradient-move {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+@keyframes shuffle-move {
+  0%, 100% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(120%, 0);
+  }
+  50% {
+    transform: translate(120%, 120%);
+  }
+  75% {
+    transform: translate(0, 120%);
+  }
+}
+@keyframes dna-twist {
+  0%, 100% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(180deg);
+  }
+}
+@keyframes orbit-spin {
+  0% {
+    transform: rotate(0deg) translateX(0px);
+  }
+  100% {
+    transform: rotate(360deg) translateX(0px);
+  }
+}
+@keyframes stair-climb {
+  0% {
+    transform: translate(0, 0);
+  }
+  20% {
+    transform: translate(0, -25%);
+  }
+  40% {
+    transform: translate(25%, -25%);
+  }
+  60% {
+    transform: translate(25%, -50%);
+  }
+  80% {
+    transform: translate(50%, -50%);
+  }
+  100% {
+    transform: translate(50%, -25%);
+  }
+}
+@keyframes drop-fall {
+  0% {
+    transform: scale(0) translateY(0);
+    opacity: 0;
+  }
+  10% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+  80% {
+    transform: scale(1) translateY(250%);
+    opacity: 1;
+  }
+  90%, 100% {
+    transform: scale(0) translateY(250%);
+    opacity: 0;
+  }
+}
+@keyframes surface-ripple {
+  0%, 75% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+  82% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+}
+@keyframes neon-glow-scale {
+  0% {
+    box-shadow: 0 0 10px color-mix(in srgb, var(--loader-color) 30%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 25px color-mix(in srgb, var(--loader-color) 75%, transparent);
+  }
+}
+@keyframes neuro-pulse-scale {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(4.5);
+    opacity: 0;
+  }
+}
+@keyframes cube-fold-anim {
+  0%, 10% {
+    transform: perspective(140px) rotateX(-180deg);
+    opacity: 0;
+  }
+  25%, 75% {
+    transform: perspective(140px) rotateX(0deg);
+    opacity: 1;
+  }
+  90%, 100% {
+    transform: perspective(140px) rotateY(180deg);
+    opacity: 0;
+  }
+}
+@keyframes glitch {
+  0% {
+    transform: translate(0);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+  }
+  40% {
+    transform: translate(-2px, -2px);
+  }
+  60% {
+    transform: translate(2px, 2px);
+  }
+  80% {
+    transform: translate(2px, -2px);
+  }
+  100% {
+    transform: translate(0);
+  }
+}
+@keyframes glitch-anim-1 {
+  0% {
+    clip: rect(15px, 9999px, 66px, 0);
+  }
+  5% {
+    clip: rect(85px, 9999px, 5px, 0);
+  }
+  10% {
+    clip: rect(34px, 9999px, 78px, 0);
+  }
+  15% {
+    clip: rect(67px, 9999px, 12px, 0);
+  }
+  20% {
+    clip: rect(12px, 9999px, 115px, 0);
+  }
+  25% {
+    clip: rect(98px, 9999px, 94px, 0);
+  }
+  30% {
+    clip: rect(5px, 9999px, 22px, 0);
+  }
+  35% {
+    clip: rect(143px, 9999px, 87px, 0);
+  }
+  40% {
+    clip: rect(61px, 9999px, 140px, 0);
+  }
+  45% {
+    clip: rect(72px, 9999px, 34px, 0);
+  }
+  50% {
+    clip: rect(110px, 9999px, 99px, 0);
+  }
+  55% {
+    clip: rect(2px, 9999px, 45px, 0);
+  }
+  60% {
+    clip: rect(89px, 9999px, 112px, 0);
+  }
+  65% {
+    clip: rect(30px, 9999px, 5px, 0);
+  }
+  70% {
+    clip: rect(122px, 9999px, 80px, 0);
+  }
+  75% {
+    clip: rect(56px, 9999px, 18px, 0);
+  }
+  80% {
+    clip: rect(95px, 9999px, 134px, 0);
+  }
+  85% {
+    clip: rect(14px, 9999px, 49px, 0);
+  }
+  90% {
+    clip: rect(68px, 9999px, 91px, 0);
+  }
+  95% {
+    clip: rect(104px, 9999px, 120px, 0);
+  }
+  100% {
+    clip: rect(40px, 9999px, 10px, 0);
+  }
+}
+@keyframes glitch-anim-2 {
+  0% {
+    clip: rect(112px, 9999px, 76px, 0);
+  }
+  5% {
+    clip: rect(25px, 9999px, 5px, 0);
+  }
+  10% {
+    clip: rect(98px, 9999px, 34px, 0);
+  }
+  15% {
+    clip: rect(5px, 9999px, 145px, 0);
+  }
+  20% {
+    clip: rect(87px, 9999px, 67px, 0);
+  }
+  25% {
+    clip: rect(120px, 9999px, 10px, 0);
+  }
+  30% {
+    clip: rect(43px, 9999px, 89px, 0);
+  }
+  35% {
+    clip: rect(72px, 9999px, 120px, 0);
+  }
+  40% {
+    clip: rect(2px, 9999px, 54px, 0);
+  }
+  45% {
+    clip: rect(134px, 9999px, 98px, 0);
+  }
+  50% {
+    clip: rect(61px, 9999px, 15px, 0);
+  }
+  55% {
+    clip: rect(95px, 9999px, 130px, 0);
+  }
+  60% {
+    clip: rect(14px, 9999px, 45px, 0);
+  }
+  65% {
+    clip: rect(80px, 9999px, 112px, 0);
+  }
+  70% {
+    clip: rect(34px, 9999px, 2px, 0);
+  }
+  75% {
+    clip: rect(104px, 9999px, 80px, 0);
+  }
+  80% {
+    clip: rect(44px, 9999px, 91px, 0);
+  }
+  85% {
+    clip: rect(122px, 9999px, 5px, 0);
+  }
+  90% {
+    clip: rect(56px, 9999px, 140px, 0);
+  }
+  95% {
+    clip: rect(89px, 9999px, 22px, 0);
+  }
+  100% {
+    clip: rect(110px, 9999px, 99px, 0);
+  }
+}
+@keyframes blink {
+  0%, 100% {
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes signal-rise {
+  0%, 100% {
+    opacity: 0.2;
+    transform: scaleY(0.7);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+@keyframes roll-slide {
+  0%, 100% {
+    transform: translateX(-30%);
+  }
+  50% {
+    transform: translateX(30%);
+  }
+}
+@keyframes status-stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes status-stroke-offset {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}