/* LoaderX-Arun v1.0.0 | MIT License | https://github.com/arun/loaderx-arun */
/* ============================================================
   Universal Loaders — CSS Custom Properties
   All loaders inherit these variables for easy theming.
   ============================================================ */

:root {
  --ul-color: #3b82f6;
  --ul-size: 40px;
  --ul-speed: 1s;
  --ul-secondary-color: rgba(59, 130, 246, 0.2);
  --ul-border-width: 3px;
  --ul-dot-size: calc(var(--ul-size) / 4);
  --ul-bar-width: calc(var(--ul-size) / 8);
  --ul-bar-height: var(--ul-size);
}

/* ============================================================
   Universal Loaders — Base Styles
   Shared rules for all .ul-loader elements.
   ============================================================ */

.ul-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  box-sizing: border-box;
}

/* Visually hidden — screen-reader only label */
.ul-loader .ul-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Spinner — A classic rotating ring loader
   ============================================================ */

.ul-spinner {
  width: var(--ul-size);
  height: var(--ul-size);
  border: var(--ul-border-width) solid var(--ul-secondary-color);
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-spin var(--ul-speed) linear infinite;
}

@keyframes ul-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Dots — Three bouncing dots
   ============================================================ */

.ul-dots {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ul-dot-size) * 0.6);
  height: var(--ul-size);
}

.ul-dots::before,
.ul-dots::after,
.ul-dots .ul-dots__dot {
  content: '';
  display: block;
  width: var(--ul-dot-size);
  height: var(--ul-dot-size);
  border-radius: 50%;
  background-color: var(--ul-color);
  animation: ul-bounce var(--ul-speed) ease-in-out infinite;
}

.ul-dots::after {
  animation-delay: calc(var(--ul-speed) * 0.16);
}

.ul-dots .ul-dots__dot {
  animation-delay: calc(var(--ul-speed) * 0.32);
}

@keyframes ul-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================================
   Pulse — A pulsing circle
   ============================================================ */

.ul-pulse {
  width: var(--ul-size);
  height: var(--ul-size);
  border-radius: 50%;
  background-color: var(--ul-color);
  animation: ul-pulse-anim calc(var(--ul-speed) * 1.4) ease-in-out infinite;
}

@keyframes ul-pulse-anim {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

/* ============================================================
   Bars — Oscillating vertical bars
   ============================================================ */

.ul-bars {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ul-bar-width) * 0.5);
  height: var(--ul-size);
}

.ul-bars__bar {
  width: var(--ul-bar-width);
  height: var(--ul-bar-height);
  background-color: var(--ul-color);
  border-radius: calc(var(--ul-bar-width) / 2);
  animation: ul-bars-stretch var(--ul-speed) ease-in-out infinite;
}

.ul-bars__bar:nth-child(1) {
  animation-delay: calc(var(--ul-speed) * -0.4);
}
.ul-bars__bar:nth-child(2) {
  animation-delay: calc(var(--ul-speed) * -0.3);
}
.ul-bars__bar:nth-child(3) {
  animation-delay: calc(var(--ul-speed) * -0.2);
}
.ul-bars__bar:nth-child(4) {
  animation-delay: calc(var(--ul-speed) * -0.1);
}
.ul-bars__bar:nth-child(5) {
  animation-delay: 0s;
}

@keyframes ul-bars-stretch {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* ============================================================
   Ring — Dual-ring rotation
   ============================================================ */

.ul-ring {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
}

.ul-ring::before,
.ul-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--ul-border-width) solid transparent;
}

.ul-ring::before {
  border-top-color: var(--ul-color);
  border-bottom-color: var(--ul-color);
  animation: ul-ring-rotate var(--ul-speed) linear infinite;
}

.ul-ring::after {
  border-left-color: var(--ul-color);
  border-right-color: var(--ul-color);
  animation: ul-ring-rotate var(--ul-speed) linear infinite reverse;
  inset: calc(var(--ul-border-width) + 3px);
  opacity: 0.6;
}

@keyframes ul-ring-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Skeleton — Shimmer placeholder effect
   ============================================================ */

.ul-skeleton {
  width: 100%;
  height: var(--ul-size);
  background: linear-gradient(
    90deg,
    var(--ul-secondary-color) 25%,
    rgba(59, 130, 246, 0.05) 50%,
    var(--ul-secondary-color) 75%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: ul-shimmer calc(var(--ul-speed) * 1.5) ease-in-out infinite;
}

.ul-skeleton--text {
  height: calc(var(--ul-size) * 0.4);
  border-radius: 4px;
}

.ul-skeleton--circle {
  width: var(--ul-size);
  height: var(--ul-size);
  border-radius: 50%;
}

.ul-skeleton--rect {
  height: calc(var(--ul-size) * 2.5);
  border-radius: 8px;
}

@keyframes ul-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================================
   Progress — Indeterminate progress bar
   ============================================================ */

.ul-progress {
  width: 100%;
  height: calc(var(--ul-border-width) + 1px);
  background-color: var(--ul-secondary-color);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.ul-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background-color: var(--ul-color);
  border-radius: 99px;
  animation: ul-progress-slide calc(var(--ul-speed) * 1.5) ease-in-out infinite;
}

@keyframes ul-progress-slide {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}

/* ============================================================
   Orbit — A dot orbiting around a center point
   ============================================================ */

.ul-orbit {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
}

/* Center dot */
.ul-orbit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ul-dot-size) * 0.8);
  height: calc(var(--ul-dot-size) * 0.8);
  margin: calc(var(--ul-dot-size) * -0.4) 0 0 calc(var(--ul-dot-size) * -0.4);
  background-color: var(--ul-color);
  border-radius: 50%;
  opacity: 0.3;
}

/* Orbiting dot */
.ul-orbit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--ul-dot-size);
  height: var(--ul-dot-size);
  margin-left: calc(var(--ul-dot-size) * -0.5);
  background-color: var(--ul-color);
  border-radius: 50%;
  transform-origin: 50% calc(var(--ul-size) / 2);
  animation: ul-orbit-spin var(--ul-speed) linear infinite;
}

@keyframes ul-orbit-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── Spinner Advanced Loaders ─────────────────────────────── */

/* Dual Ring */
.ul-spinner-dual { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-spinner-dual::before, .ul-spinner-dual::after { content:''; position:absolute; border-radius:50%; border:var(--ul-border-width) solid transparent; }
.ul-spinner-dual::before { inset:0; border-top-color:var(--ul-color); border-bottom-color:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-spinner-dual::after { inset:calc(var(--ul-border-width)*2 + 2px); border-left-color:var(--ul-color); border-right-color:var(--ul-color); animation:ul-spin calc(var(--ul-speed)*0.75) linear infinite reverse; opacity:.6; }

/* Triple Ring */
.ul-spinner-triple { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin var(--ul-speed) linear infinite; }
.ul-spinner-triple::before { content:''; position:absolute; inset:calc(var(--ul-size)*0.15); border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin calc(var(--ul-speed)*0.7) linear infinite reverse; }
.ul-spinner-triple::after { content:''; position:absolute; inset:calc(var(--ul-size)*0.3); border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin calc(var(--ul-speed)*0.5) linear infinite; opacity:.7; }
.ul-spinner-triple > .ul-spinner-triple__ring { position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); opacity:.4; }

/* Chase */
.ul-spinner-chase { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*2.5) linear infinite; }
.ul-spinner-chase__dot { position:absolute; top:0; left:calc(50% - var(--ul-dot-size)/2); width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-chase-scale var(--ul-speed) ease-in-out infinite; }
.ul-spinner-chase__dot:nth-child(1) { transform-origin:50% calc(var(--ul-size)/2); transform:rotate(0deg); }
.ul-spinner-chase__dot:nth-child(2) { transform-origin:50% calc(var(--ul-size)/2); transform:rotate(60deg); animation-delay:calc(var(--ul-speed)*-0.833); }
.ul-spinner-chase__dot:nth-child(3) { transform-origin:50% calc(var(--ul-size)/2); transform:rotate(120deg); animation-delay:calc(var(--ul-speed)*-0.667); }
.ul-spinner-chase__dot:nth-child(4) { transform-origin:50% calc(var(--ul-size)/2); transform:rotate(180deg); animation-delay:calc(var(--ul-speed)*-0.5); }
.ul-spinner-chase__dot:nth-child(5) { transform-origin:50% calc(var(--ul-size)/2); transform:rotate(240deg); animation-delay:calc(var(--ul-speed)*-0.333); }
.ul-spinner-chase__dot:nth-child(6) { transform-origin:50% calc(var(--ul-size)/2); transform:rotate(300deg); animation-delay:calc(var(--ul-speed)*-0.167); }
@keyframes ul-chase-scale { 0%,80%,100%{transform-origin:50% calc(var(--ul-size)/2); transform:rotate(var(--r,0deg)) scale(0.4);} 40%{transform:rotate(var(--r,0deg)) scale(1);} }

/* Plane */
.ul-spinner-plane { width:var(--ul-size); height:var(--ul-size); background:var(--ul-color); border-radius:4px; animation:ul-plane var(--ul-speed) ease-in-out infinite; }
@keyframes ul-plane { 0%,100%{transform:perspective(120px) rotateX(0) rotateY(0);} 50%{transform:perspective(120px) rotateX(-180deg) rotateY(0);} }

/* Fold */
.ul-spinner-fold { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-spinner-fold__cube { width:50%; height:50%; position:absolute; }
.ul-spinner-fold__cube::before { content:''; display:block; width:100%; height:100%; background:var(--ul-color); animation:ul-fold var(--ul-speed) linear infinite; transform-origin:100% 100%; border-radius:2px; }
.ul-spinner-fold__cube:nth-child(2) { transform:rotateZ(90deg); }
.ul-spinner-fold__cube:nth-child(3) { transform:rotateZ(180deg); }
.ul-spinner-fold__cube:nth-child(4) { transform:rotateZ(270deg); }
.ul-spinner-fold__cube:nth-child(2)::before { animation-delay:calc(var(--ul-speed)*0.1); }
.ul-spinner-fold__cube:nth-child(3)::before { animation-delay:calc(var(--ul-speed)*0.2); }
.ul-spinner-fold__cube:nth-child(4)::before { animation-delay:calc(var(--ul-speed)*0.3); }
@keyframes ul-fold { 0%,10%{transform:perspective(140px) rotateX(-180deg); opacity:0;} 25%,75%{transform:perspective(140px) rotateX(0); opacity:1;} 90%,100%{transform:perspective(140px) rotateY(180deg); opacity:0;} }

/* Ring Comet */
.ul-ring-comet { width:var(--ul-size); height:var(--ul-size); border-radius:50%; position:relative; }
.ul-ring-comet::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); }
.ul-ring-comet::after { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); filter:drop-shadow(0 0 4px var(--ul-color)); animation:ul-spin var(--ul-speed) cubic-bezier(0.6,0.2,0.4,0.8) infinite; }

/* Ring Dashed */
.ul-ring-dashed { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) dashed var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; opacity:.8; }

/* Ring Gradient */
.ul-ring-gradient { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(var(--ul-color), transparent); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-ring-gradient::after { content:''; position:absolute; inset:var(--ul-border-width); background:var(--bg,#080d1a); border-radius:50%; }

/* Ring Clock */
.ul-ring-clock { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); position:relative; }
.ul-ring-clock::before { content:''; position:absolute; top:50%; left:50%; width:2px; height:40%; background:var(--ul-color); transform-origin:bottom center; transform:translateX(-50%); animation:ul-spin var(--ul-speed) linear infinite; border-radius:2px; }
.ul-ring-clock::after { content:''; position:absolute; top:50%; left:50%; width:2px; height:30%; background:var(--ul-color); transform-origin:bottom center; transform:translateX(-50%); animation:ul-spin calc(var(--ul-speed)*12) linear infinite; opacity:.6; border-radius:2px; }

/* Ring Meteor */
.ul-ring-meteor { width:var(--ul-size); height:var(--ul-size); border-radius:50%; position:relative; }
.ul-ring-meteor::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); border-right-color:var(--ul-color); animation:ul-spin var(--ul-speed) ease-in-out infinite; filter:drop-shadow(0 0 6px var(--ul-color)) drop-shadow(0 0 12px var(--ul-color)); }
.ul-ring-meteor::after { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); }

/* Ring Solar */
.ul-ring-solar { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-ring-solar::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); }
.ul-ring-solar::after { content:''; position:absolute; inset:20%; border-radius:50%; background:var(--ul-color); opacity:.3; }
.ul-ring-solar__planet { position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); top:0; left:calc(50% - var(--ul-dot-size)/2); transform-origin:50% calc(var(--ul-size)/2); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-ring-solar__planet:nth-child(2) { inset:25%; width:calc(var(--ul-dot-size)*0.6); height:calc(var(--ul-dot-size)*0.6); top:25%; top:calc(25% + var(--ul-dot-size)*0.2); animation-duration:calc(var(--ul-speed)*0.6); animation-direction:reverse; }

/* Gyro */
.ul-gyro { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); position:relative; animation:ul-spin var(--ul-speed) linear infinite; }
.ul-gyro::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); transform:rotate(60deg); }
.ul-gyro::after { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); transform:rotate(-60deg); opacity:.7; }

/* Vortex */
.ul-vortex { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background: conic-gradient(from 0deg, var(--ul-color) 0%, transparent 60%); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-vortex::after { content:''; position:absolute; inset:20%; background:var(--bg,#080d1a); border-radius:50%; }

/* Cyclone */
.ul-cyclone { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); border-right-color:var(--ul-color); border-bottom-color: var(--ul-secondary-color); animation:ul-spin var(--ul-speed) cubic-bezier(0.46,0.03,0.52,0.96) infinite; filter:drop-shadow(0 0 8px var(--ul-color)); }

/* Helix */
.ul-helix { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*2) linear infinite; }
.ul-helix::before, .ul-helix::after { content:''; position:absolute; border-radius:50%; }
.ul-helix::before { width:var(--ul-size); height:calc(var(--ul-size)*0.4); border:var(--ul-border-width) solid var(--ul-color); top:10%; }
.ul-helix::after { width:var(--ul-size); height:calc(var(--ul-size)*0.4); border:var(--ul-border-width) solid var(--ul-color); bottom:10%; animation:ul-spin calc(var(--ul-speed)*1.3) linear infinite reverse; opacity:.6; }

/* Compass */
.ul-compass { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); position:relative; }
.ul-compass::before { content:''; position:absolute; top:50%; left:50%; width:40%; height:var(--ul-border-width); background:var(--ul-color); transform-origin:left center; animation:ul-compass-swing calc(var(--ul-speed)*2) ease-in-out infinite alternate; border-radius:2px; }
.ul-compass::after { content:''; position:absolute; top:50%; left:50%; width:35%; height:var(--ul-border-width); background:var(--ul-secondary-color); transform-origin:left center; transform:rotate(180deg); border-radius:2px; }
@keyframes ul-compass-swing { 0%{transform:rotate(-150deg);} 100%{transform:rotate(150deg);} }

/* Orbit Dual */
.ul-orbit-dual { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-orbit-dual::before { content:''; position:absolute; top:0; left:calc(50% - var(--ul-dot-size)/2); width:var(--ul-dot-size); height:var(--ul-dot-size); background:var(--ul-color); border-radius:50%; transform-origin:50% calc(var(--ul-size)/2); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-orbit-dual::after { content:''; position:absolute; bottom:0; left:calc(50% - calc(var(--ul-dot-size)*0.7)/2); width:calc(var(--ul-dot-size)*0.7); height:calc(var(--ul-dot-size)*0.7); background:var(--ul-color); border-radius:50%; transform-origin:50% calc(var(--ul-size)/-2); animation:ul-spin calc(var(--ul-speed)*1.4) linear infinite reverse; opacity:.7; }

/* Orbit Triple */
.ul-orbit-triple { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-orbit-triple::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); }
.ul-orbit-triple .ul-d1, .ul-orbit-triple .ul-d2, .ul-orbit-triple .ul-d3 { position:absolute; border-radius:50%; background:var(--ul-color); }
.ul-orbit-triple .ul-d1 { width:var(--ul-dot-size); height:var(--ul-dot-size); top:0; left:calc(50% - var(--ul-dot-size)/2); transform-origin:50% calc(var(--ul-size)/2); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-orbit-triple .ul-d2 { width:calc(var(--ul-dot-size)*0.8); height:calc(var(--ul-dot-size)*0.8); top:0; left:calc(50% - calc(var(--ul-dot-size)*0.8)/2); transform-origin:50% calc(var(--ul-size)/2); animation:ul-spin calc(var(--ul-speed)*1.5) linear infinite reverse; opacity:.8; }
.ul-orbit-triple .ul-d3 { width:calc(var(--ul-dot-size)*0.5); height:calc(var(--ul-dot-size)*0.5); top:calc(var(--ul-dot-size)*0.25); left:calc(50% - calc(var(--ul-dot-size)*0.5)/2); transform-origin:50% calc(var(--ul-size)/2 - calc(var(--ul-dot-size)*0.25)); animation:ul-spin calc(var(--ul-speed)*0.7) linear infinite; opacity:.6; }

/* Orbit Comet */
.ul-orbit-comet { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-orbit-comet::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); }
.ul-orbit-comet::after { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin var(--ul-speed) ease-in-out infinite; box-shadow:0 calc(var(--ul-size)*-0.05) 0 calc(var(--ul-border-width)*0.5) var(--ul-color), 0 calc(var(--ul-size)*-0.1) 0 0 var(--ul-secondary-color); }

/* Spiral */
.ul-spiral { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*3) linear infinite; }
.ul-spiral::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin var(--ul-speed) ease-in-out infinite; }
.ul-spiral::after { content:''; position:absolute; inset:25%; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin calc(var(--ul-speed)*0.7) ease-in-out infinite reverse; opacity:.7; }

/* Whirlwind */
.ul-whirlwind { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(var(--ul-color) 30%, var(--ul-secondary-color) 60%, transparent 90%); animation:ul-spin var(--ul-speed) cubic-bezier(0.4,0,0.6,1) infinite; }
.ul-whirlwind::after { content:''; position:absolute; inset:30%; background:var(--bg,#080d1a); border-radius:50%; }

/* Ring Stretch */
.ul-ring-stretch { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-ring-stretch-anim var(--ul-speed) ease infinite; }
@keyframes ul-ring-stretch-anim { 0%{transform:rotate(0deg);border-top-width:var(--ul-border-width);} 50%{border-top-width:calc(var(--ul-border-width)*3);} 100%{transform:rotate(360deg);border-top-width:var(--ul-border-width);} }

/* Ring Pulse Glow */
.ul-ring-pulse-glow { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-ring-glow-anim var(--ul-speed) ease-in-out infinite; }
@keyframes ul-ring-glow-anim { 0%,100%{box-shadow:0 0 4px var(--ul-color), inset 0 0 4px var(--ul-color); opacity:0.5; transform:scale(0.9);} 50%{box-shadow:0 0 20px var(--ul-color), 0 0 40px var(--ul-color), inset 0 0 10px var(--ul-color); opacity:1; transform:scale(1);} }

/* Ring Satellite */
.ul-ring-satellite { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-ring-satellite::before { content:''; position:absolute; inset:20%; border-radius:50%; background:var(--ul-color); opacity:.3; }
.ul-ring-satellite::after { content:''; position:absolute; width:40%; height:40%; background:var(--ul-color); border-radius:50%; top:0; left:30%; animation:ul-ring-sat var(--ul-speed) linear infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }
@keyframes ul-ring-sat { 0%{transform:rotate(0deg) translateY(calc(var(--ul-size)*-0.3)); } 100%{transform:rotate(360deg) translateY(calc(var(--ul-size)*-0.3)); } }

/* Ring Neon */
.ul-ring-neon { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*1.5) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; box-shadow:0 0 10px var(--ul-color), 0 0 20px var(--ul-color), inset 0 0 10px rgba(59,130,246,.3); }

/* ── Advanced Dots & Particle Loaders ───────────────────── */

/* Dots Flashing */
.ul-dots-flashing { display:inline-flex; align-items:center; gap:calc(var(--ul-dot-size)*0.6); height:var(--ul-size); }
.ul-dots-flashing::before, .ul-dots-flashing::after, .ul-dots-flashing .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-flash var(--ul-speed) linear infinite alternate; }
.ul-dots-flashing::before { content:''; display:block; animation-delay:calc(var(--ul-speed)*-0.5); }
.ul-dots-flashing::after { content:''; display:block; animation-delay:var(--ul-speed); }
.ul-dots-flashing .ul-d { display:block; }
@keyframes ul-flash { 0%{opacity:.2;} 100%{opacity:1;} }

/* Dots Carousel */
.ul-dots-carousel { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-dots-carousel .ul-d { position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); top:0; left:calc(50% - var(--ul-dot-size)/2); transform-origin:50% calc(var(--ul-size)/2); animation:ul-spin var(--ul-speed) linear infinite, ul-carousel-fade var(--ul-speed) linear infinite; }
.ul-dots-carousel .ul-d:nth-child(2){transform:rotate(45deg); animation-delay:calc(var(--ul-speed)*-0.875);}
.ul-dots-carousel .ul-d:nth-child(3){transform:rotate(90deg); animation-delay:calc(var(--ul-speed)*-0.75);}
.ul-dots-carousel .ul-d:nth-child(4){transform:rotate(135deg); animation-delay:calc(var(--ul-speed)*-0.625);}
.ul-dots-carousel .ul-d:nth-child(5){transform:rotate(180deg); animation-delay:calc(var(--ul-speed)*-0.5);}
.ul-dots-carousel .ul-d:nth-child(6){transform:rotate(225deg); animation-delay:calc(var(--ul-speed)*-0.375);}
.ul-dots-carousel .ul-d:nth-child(7){transform:rotate(270deg); animation-delay:calc(var(--ul-speed)*-0.25);}
.ul-dots-carousel .ul-d:nth-child(8){transform:rotate(315deg); animation-delay:calc(var(--ul-speed)*-0.125);}
@keyframes ul-carousel-fade { 0%{opacity:1;} 100%{opacity:.2;} }

/* Dots Elastic */
.ul-dots-elastic { display:inline-flex; align-items:center; gap:calc(var(--ul-dot-size)*0.5); height:var(--ul-size); }
.ul-dots-elastic .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-elastic var(--ul-speed) ease-in-out infinite; }
.ul-dots-elastic .ul-d:nth-child(1){animation-delay:0s;}
.ul-dots-elastic .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.1);}
.ul-dots-elastic .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.2);}
@keyframes ul-elastic { 0%,100%{transform:scale(1);} 30%{transform:scale(1.6) translateY(-30%);} 60%{transform:scale(0.7) translateY(20%);} }

/* Dots Typing */
.ul-dots-typing { display:inline-flex; align-items:center; gap:calc(var(--ul-dot-size)*0.4); padding:0 4px; height:var(--ul-size); }
.ul-dots-typing .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-typing var(--ul-speed) ease-in-out infinite; }
.ul-dots-typing .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.15);}
.ul-dots-typing .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.3);}
@keyframes ul-typing { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-40%);} }

/* Dots Windmill */
.ul-dots-windmill { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*3) linear infinite; }
.ul-dots-windmill .ul-d { position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-windmill var(--ul-speed) ease-in-out infinite alternate; }
.ul-dots-windmill .ul-d:nth-child(1){top:0;left:calc(50% - var(--ul-dot-size)/2); animation-delay:0s;}
.ul-dots-windmill .ul-d:nth-child(2){right:0;top:calc(50% - var(--ul-dot-size)/2); animation-delay:calc(var(--ul-speed)*0.25);}
.ul-dots-windmill .ul-d:nth-child(3){bottom:0;left:calc(50% - var(--ul-dot-size)/2); animation-delay:calc(var(--ul-speed)*0.5);}
.ul-dots-windmill .ul-d:nth-child(4){left:0;top:calc(50% - var(--ul-dot-size)/2); animation-delay:calc(var(--ul-speed)*0.75);}
@keyframes ul-windmill { from{transform:scale(1);} to{transform:scale(0.3);} }

/* Dots Grid */
.ul-dots-grid { display:inline-grid; grid-template-columns:repeat(3,var(--ul-dot-size)); gap:calc(var(--ul-dot-size)*0.4); }
.ul-dots-grid .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-grid-pulse var(--ul-speed) ease-in-out infinite; }
.ul-dots-grid .ul-d:nth-child(1){animation-delay:0s;}
.ul-dots-grid .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.1);}
.ul-dots-grid .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-dots-grid .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.1);}
.ul-dots-grid .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-dots-grid .ul-d:nth-child(6){animation-delay:calc(var(--ul-speed)*0.3);}
.ul-dots-grid .ul-d:nth-child(7){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-dots-grid .ul-d:nth-child(8){animation-delay:calc(var(--ul-speed)*0.3);}
.ul-dots-grid .ul-d:nth-child(9){animation-delay:calc(var(--ul-speed)*0.4);}
@keyframes ul-grid-pulse { 0%,100%{opacity:.2;transform:scale(0.7);} 50%{opacity:1;transform:scale(1);} }

/* Dots Wave */
.ul-dots-wave { display:inline-flex; align-items:center; gap:calc(var(--ul-dot-size)*0.4); height:var(--ul-size); }
.ul-dots-wave .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-wave-move var(--ul-speed) ease-in-out infinite; }
.ul-dots-wave .ul-d:nth-child(1){animation-delay:0s;}
.ul-dots-wave .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.1);}
.ul-dots-wave .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-dots-wave .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.3);}
.ul-dots-wave .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.4);}
@keyframes ul-wave-move { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-60%);} }

/* Dots Fade */
.ul-dots-fade { display:inline-flex; align-items:center; gap:calc(var(--ul-dot-size)*0.5); height:var(--ul-size); }
.ul-dots-fade .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-fade-pulse var(--ul-speed) ease-in-out infinite; }
.ul-dots-fade .ul-d:nth-child(1){animation-delay:0s;}
.ul-dots-fade .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-dots-fade .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.4);}
@keyframes ul-fade-pulse { 0%,100%{opacity:0;} 50%{opacity:1;} }

/* Dots Spread */
.ul-dots-spread { display:inline-flex; align-items:center; justify-content:center; gap:0; height:var(--ul-size); width:var(--ul-size); position:relative; }
.ul-dots-spread .ul-d { position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-spread var(--ul-speed) ease-out infinite; }
.ul-dots-spread .ul-d:nth-child(1){animation-delay:0s;}
.ul-dots-spread .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.15);}
.ul-dots-spread .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.3);}
.ul-dots-spread .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.45);}
@keyframes ul-spread { 0%{transform:scale(0);opacity:1;} 100%{transform:scale(3);opacity:0;} }

/* Dots Bricks */
.ul-dots-bricks { display:inline-grid; grid-template-columns:repeat(3,var(--ul-dot-size)); gap:calc(var(--ul-dot-size)*0.4); }
.ul-dots-bricks .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:2px; background:var(--ul-color); animation:ul-brick var(--ul-speed) ease-in-out infinite; }
.ul-dots-bricks .ul-d:nth-child(1){animation-delay:calc(var(--ul-speed)*0.12);}
.ul-dots-bricks .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.24);}
.ul-dots-bricks .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.36);}
.ul-dots-bricks .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.48);}
.ul-dots-bricks .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.6);}
.ul-dots-bricks .ul-d:nth-child(6){animation-delay:calc(var(--ul-speed)*0.72);}
.ul-dots-bricks .ul-d:nth-child(7){animation-delay:calc(var(--ul-speed)*0.84);}
.ul-dots-bricks .ul-d:nth-child(8){animation-delay:calc(var(--ul-speed)*0.96);}
.ul-dots-bricks .ul-d:nth-child(9){animation-delay:0s;}
@keyframes ul-brick { 0%,100%{opacity:.2;transform:rotateY(0);} 50%{opacity:1;transform:rotateY(180deg);} }

/* Bubble Float */
.ul-bubble-float { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-bubble-float::before { content:''; position:absolute; width:60%; height:60%; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.4) 0%, var(--ul-color) 50%, var(--ul-secondary-color) 100%); left:20%; top:20%; animation:ul-bubble-rise var(--ul-speed) ease-in-out infinite; }
.ul-bubble-float::after { content:''; position:absolute; width:10%; height:10%; border-radius:50%; background:rgba(255,255,255,.7); top:28%; left:32%; }
@keyframes ul-bubble-rise { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-15%) scale(1.05);} }

/* Bubbles Rise */
.ul-bubbles-rise { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-bubbles-rise .ul-d { position:absolute; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-bubbles-up calc(var(--ul-speed)*1.5) ease-in infinite; bottom:-10%; }
.ul-bubbles-rise .ul-d:nth-child(1){width:20%;height:20%;left:20%; animation-duration:calc(var(--ul-speed)*2);}
.ul-bubbles-rise .ul-d:nth-child(2){width:30%;height:30%;left:50%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-bubbles-rise .ul-d:nth-child(3){width:15%;height:15%;left:35%; animation-delay:calc(var(--ul-speed)*0.8); animation-duration:calc(var(--ul-speed)*1.2);}
.ul-bubbles-rise .ul-d:nth-child(4){width:25%;height:25%;left:10%; animation-delay:calc(var(--ul-speed)*0.6);}
@keyframes ul-bubbles-up { 0%{transform:translateY(0) scale(1); opacity:.8;} 100%{transform:translateY(-200%) scale(0.8); opacity:0;} }

/* Fireflies */
.ul-fireflies { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-fireflies .ul-d { position:absolute; width:calc(var(--ul-dot-size)*0.4); height:calc(var(--ul-dot-size)*0.4); border-radius:50%; background:var(--ul-color); filter:blur(1px); animation:ul-firefly calc(var(--ul-speed)*2) ease-in-out infinite; }
.ul-fireflies .ul-d:nth-child(1){top:20%;left:30%; animation-delay:0s;}
.ul-fireflies .ul-d:nth-child(2){top:60%;left:70%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-fireflies .ul-d:nth-child(3){top:40%;left:20%; animation-delay:calc(var(--ul-speed)*0.8);}
.ul-fireflies .ul-d:nth-child(4){top:75%;left:45%; animation-delay:calc(var(--ul-speed)*1.2);}
.ul-fireflies .ul-d:nth-child(5){top:10%;left:65%; animation-delay:calc(var(--ul-speed)*0.6);}
.ul-fireflies .ul-d:nth-child(6){top:55%;left:10%; animation-delay:calc(var(--ul-speed)*1.4);}
@keyframes ul-firefly { 0%,100%{opacity:0;transform:translate(0,0) scale(0.5);} 50%{opacity:1;transform:translate(20px,-15px) scale(1);} }

/* Dot Bounce */
.ul-dot-bounce { width:var(--ul-size); height:var(--ul-size); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.ul-dot-bounce::before { content:''; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-dot-b var(--ul-speed) cubic-bezier(.5,0,.5,1) infinite alternate; }
.ul-dot-bounce::after { content:''; width:calc(var(--ul-dot-size)*1.5); height:3px; border-radius:50%; background:var(--ul-secondary-color); margin-top:2px; animation:ul-shadow-b var(--ul-speed) ease-in-out infinite alternate; }
@keyframes ul-dot-b { from{transform:translateY(0);} to{transform:translateY(calc(var(--ul-size)*-0.7));} }
@keyframes ul-shadow-b { from{transform:scale(1);opacity:.4;} to{transform:scale(0.5);opacity:.15;} }

/* Dot Ping */
.ul-dot-ping { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; position:relative; }
.ul-dot-ping::before { content:''; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); position:relative; z-index:1; }
.ul-dot-ping::after { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-ping var(--ul-speed) ease-out infinite; }
@keyframes ul-ping { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(3);opacity:0;} }

/* Dot Ripple */
.ul-dot-ripple { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; position:relative; }
.ul-dot-ripple::before, .ul-dot-ripple::after { content:''; position:absolute; border-radius:50%; border:2px solid var(--ul-color); animation:ul-dot-ripple-anim calc(var(--ul-speed)*1.5) ease-out infinite; }
.ul-dot-ripple::after { animation-delay:calc(var(--ul-speed)*0.5); }
.ul-dot-ripple .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); }
@keyframes ul-dot-ripple-anim { 0%{width:var(--ul-dot-size);height:var(--ul-dot-size);opacity:1;} 100%{width:var(--ul-size);height:var(--ul-size);opacity:0;} }

/* Dot Pendulum */
.ul-dot-pendulum { width:var(--ul-size); height:var(--ul-size); position:relative; display:flex; justify-content:center; }
.ul-dot-pendulum::before { content:''; width:1px; height:60%; background:var(--ul-secondary-color); }
.ul-dot-pendulum::after { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); bottom:10%; transform-origin:50% calc(var(--ul-size)*-0.4); animation:ul-pendulum-swing calc(var(--ul-speed)*1.5) ease-in-out infinite alternate; }
@keyframes ul-pendulum-swing { from{transform:rotate(-40deg);} to{transform:rotate(40deg);} }

/* Constellation */
.ul-constellation { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-constellation .ul-d { position:absolute; width:calc(var(--ul-dot-size)*0.4); height:calc(var(--ul-dot-size)*0.4); border-radius:50%; background:var(--ul-color); animation:ul-twinkle calc(var(--ul-speed)*1.5) ease-in-out infinite; }
.ul-constellation .ul-d:nth-child(1){top:15%;left:25%; animation-delay:0s;}
.ul-constellation .ul-d:nth-child(2){top:30%;left:70%; animation-delay:calc(var(--ul-speed)*0.3);}
.ul-constellation .ul-d:nth-child(3){top:65%;left:40%; animation-delay:calc(var(--ul-speed)*0.6);}
.ul-constellation .ul-d:nth-child(4){top:20%;left:55%; animation-delay:calc(var(--ul-speed)*0.9);}
.ul-constellation .ul-d:nth-child(5){top:75%;left:20%; animation-delay:calc(var(--ul-speed)*1.2);}
.ul-constellation .ul-d:nth-child(6){top:50%;left:80%; animation-delay:calc(var(--ul-speed)*0.45);}
@keyframes ul-twinkle { 0%,100%{opacity:.2;transform:scale(0.6);} 50%{opacity:1;transform:scale(1.3);} }

/* Rain Fall */
.ul-rain-fall { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-rain-fall .ul-d { position:absolute; width:2px; background:linear-gradient(transparent,var(--ul-color)); border-radius:2px; animation:ul-rain-drop calc(var(--ul-speed)*0.8) linear infinite; opacity:.7; }
.ul-rain-fall .ul-d:nth-child(1){height:30%;left:10%; animation-delay:0s;}
.ul-rain-fall .ul-d:nth-child(2){height:20%;left:30%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-rain-fall .ul-d:nth-child(3){height:35%;left:55%; animation-delay:calc(var(--ul-speed)*0.5);}
.ul-rain-fall .ul-d:nth-child(4){height:25%;left:75%; animation-delay:calc(var(--ul-speed)*0.7);}
.ul-rain-fall .ul-d:nth-child(5){height:30%;left:88%; animation-delay:calc(var(--ul-speed)*0.15);}
@keyframes ul-rain-drop { 0%{top:-40%;opacity:0;} 10%{opacity:.7;} 100%{top:110%;opacity:0;} }

/* Snow Fall */
.ul-snow-fall { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-snow-fall .ul-d { position:absolute; width:calc(var(--ul-dot-size)*0.4); height:calc(var(--ul-dot-size)*0.4); border-radius:50%; background:var(--ul-color); top:-10%; animation:ul-snow-drop calc(var(--ul-speed)*2) linear infinite; opacity:.8; }
.ul-snow-fall .ul-d:nth-child(1){left:15%; animation-delay:0s; animation-duration:calc(var(--ul-speed)*2.5);}
.ul-snow-fall .ul-d:nth-child(2){left:45%; animation-delay:calc(var(--ul-speed)*0.6);}
.ul-snow-fall .ul-d:nth-child(3){left:70%; animation-delay:calc(var(--ul-speed)*1.2);}
.ul-snow-fall .ul-d:nth-child(4){left:30%; animation-delay:calc(var(--ul-speed)*0.9); animation-duration:calc(var(--ul-speed)*3);}
.ul-snow-fall .ul-d:nth-child(5){left:80%; animation-delay:calc(var(--ul-speed)*1.8);}
@keyframes ul-snow-drop { 0%{top:-10%;opacity:.8;transform:translateX(0) rotate(0deg);} 100%{top:110%;opacity:0;transform:translateX(20px) rotate(180deg);} }

/* Dot Chase */
.ul-dot-chase { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-dot-chase::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); }
.ul-dot-chase::after { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); top:0; left:calc(50% - var(--ul-dot-size)/2); transform-origin:50% calc(var(--ul-size)/2); animation:ul-spin var(--ul-speed) cubic-bezier(0.4,0,0.6,1) infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }

/* ── Advanced Bars & Lines Loaders ───────────────────────── */

/* Bars Wave */
.ul-bars-wave { display:inline-flex; align-items:center; gap:calc(var(--ul-bar-width)*0.5); height:var(--ul-size); }
.ul-bars-wave .ul-d { width:var(--ul-bar-width); background:var(--ul-color); border-radius:calc(var(--ul-bar-width)/2); animation:ul-bars-wave-anim var(--ul-speed) ease-in-out infinite; }
.ul-bars-wave .ul-d:nth-child(1){height:30%; animation-delay:0s;}
.ul-bars-wave .ul-d:nth-child(2){height:60%; animation-delay:calc(var(--ul-speed)*0.1);}
.ul-bars-wave .ul-d:nth-child(3){height:90%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-bars-wave .ul-d:nth-child(4){height:60%; animation-delay:calc(var(--ul-speed)*0.3);}
.ul-bars-wave .ul-d:nth-child(5){height:30%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-bars-wave .ul-d:nth-child(6){height:60%; animation-delay:calc(var(--ul-speed)*0.5);}
.ul-bars-wave .ul-d:nth-child(7){height:30%; animation-delay:calc(var(--ul-speed)*0.6);}
@keyframes ul-bars-wave-anim { 0%,100%{transform:scaleY(0.5);} 50%{transform:scaleY(1);} }

/* Equalizer */
.ul-equalizer { display:inline-flex; align-items:flex-end; gap:calc(var(--ul-bar-width)*0.5); height:var(--ul-size); }
.ul-equalizer .ul-d { width:var(--ul-bar-width); background:linear-gradient(to top, var(--ul-color), color-mix(in srgb, var(--ul-color) 50%, transparent)); border-radius:calc(var(--ul-bar-width)/2) calc(var(--ul-bar-width)/2) 0 0; animation:ul-eq var(--ul-speed) ease-in-out infinite; }
.ul-equalizer .ul-d:nth-child(1){animation-delay:0s;}
.ul-equalizer .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.12);}
.ul-equalizer .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.24);}
.ul-equalizer .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.36);}
.ul-equalizer .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.08);}
.ul-equalizer .ul-d:nth-child(6){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-equalizer .ul-d:nth-child(7){animation-delay:calc(var(--ul-speed)*0.32);}
@keyframes ul-eq { 0%,100%{height:15%;} 50%{height:100%;} }

/* Waveform */
.ul-waveform { display:inline-flex; align-items:center; gap:2px; height:var(--ul-size); }
.ul-waveform .ul-d { width:calc(var(--ul-bar-width)*0.8); background:var(--ul-color); border-radius:1px; animation:ul-wf var(--ul-speed) ease-in-out infinite; }
.ul-waveform .ul-d:nth-child(1){animation-delay:0s; height:20%;}
.ul-waveform .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.08); height:40%;}
.ul-waveform .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.16); height:80%;}
.ul-waveform .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.24); height:100%;}
.ul-waveform .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.32); height:80%;}
.ul-waveform .ul-d:nth-child(6){animation-delay:calc(var(--ul-speed)*0.4); height:50%;}
.ul-waveform .ul-d:nth-child(7){animation-delay:calc(var(--ul-speed)*0.48); height:30%;}
.ul-waveform .ul-d:nth-child(8){animation-delay:calc(var(--ul-speed)*0.4); height:50%;}
.ul-waveform .ul-d:nth-child(9){animation-delay:calc(var(--ul-speed)*0.32); height:80%;}
.ul-waveform .ul-d:nth-child(10){animation-delay:calc(var(--ul-speed)*0.24); height:100%;}
.ul-waveform .ul-d:nth-child(11){animation-delay:calc(var(--ul-speed)*0.16); height:60%;}
.ul-waveform .ul-d:nth-child(12){animation-delay:calc(var(--ul-speed)*0.08); height:30%;}
@keyframes ul-wf { 0%,100%{transform:scaleY(0.4);opacity:.5;} 50%{transform:scaleY(1);opacity:1;} }

/* Heartbeat Line */
.ul-heartbeat-line { width:calc(var(--ul-size)*2.5); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-heartbeat-line::before { content:''; position:absolute; top:50%; left:0; width:200%; height:2px; background:var(--ul-color); transform:translateY(-50%); clip-path:polygon(0 50%,15% 50%,20% 0%,25% 100%,30% 20%,35% 80%,40% 50%,55% 50%,60% 10%,65% 90%,70% 50%,100% 50%); animation:ul-hb-slide var(--ul-speed) linear infinite; }
@keyframes ul-hb-slide { 0%{transform:translateX(0) translateY(-50%);} 100%{transform:translateX(-50%) translateY(-50%);} }

/* Signal Bars */
.ul-signal-bars { display:inline-flex; align-items:flex-end; gap:calc(var(--ul-bar-width)*0.4); height:var(--ul-size); }
.ul-signal-bars .ul-d { width:var(--ul-bar-width); background:var(--ul-color); border-radius:2px; animation:ul-signal-anim var(--ul-speed) ease-in-out infinite; opacity:.3; }
.ul-signal-bars .ul-d:nth-child(1){height:25%; animation-delay:0s;}
.ul-signal-bars .ul-d:nth-child(2){height:45%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-signal-bars .ul-d:nth-child(3){height:65%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-signal-bars .ul-d:nth-child(4){height:85%; animation-delay:calc(var(--ul-speed)*0.6);}
.ul-signal-bars .ul-d:nth-child(5){height:100%; animation-delay:calc(var(--ul-speed)*0.8);}
@keyframes ul-signal-anim { 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* Spectrum */
.ul-spectrum { display:inline-flex; align-items:center; gap:2px; height:var(--ul-size); }
.ul-spectrum .ul-d { width:calc(var(--ul-bar-width)*0.7); border-radius:1px; animation:ul-spectrum-anim var(--ul-speed) ease-in-out infinite; }
.ul-spectrum .ul-d:nth-child(1){background:hsl(240,100%,65%); animation-delay:0s;}
.ul-spectrum .ul-d:nth-child(2){background:hsl(260,100%,65%); animation-delay:calc(var(--ul-speed)*0.07);}
.ul-spectrum .ul-d:nth-child(3){background:hsl(280,100%,65%); animation-delay:calc(var(--ul-speed)*0.14);}
.ul-spectrum .ul-d:nth-child(4){background:hsl(300,100%,65%); animation-delay:calc(var(--ul-speed)*0.21);}
.ul-spectrum .ul-d:nth-child(5){background:hsl(320,100%,65%); animation-delay:calc(var(--ul-speed)*0.28);}
.ul-spectrum .ul-d:nth-child(6){background:hsl(0,100%,65%); animation-delay:calc(var(--ul-speed)*0.35);}
.ul-spectrum .ul-d:nth-child(7){background:hsl(20,100%,65%); animation-delay:calc(var(--ul-speed)*0.42);}
.ul-spectrum .ul-d:nth-child(8){background:hsl(40,100%,65%); animation-delay:calc(var(--ul-speed)*0.49);}
@keyframes ul-spectrum-anim { 0%,100%{height:20%;} 50%{height:100%;} }

/* Metronome */
.ul-metronome { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:flex-end; justify-content:center; position:relative; }
.ul-metronome::before { content:''; width:2px; height:75%; background:linear-gradient(to top, var(--ul-color), var(--ul-secondary-color)); transform-origin:bottom center; animation:ul-metronome-anim calc(var(--ul-speed)*0.8) ease-in-out infinite alternate; border-radius:2px; }
.ul-metronome::after { content:''; position:absolute; bottom:0; width:40%; height:8%; background:var(--ul-secondary-color); border-radius:4px; }
@keyframes ul-metronome-anim { from{transform:rotate(-45deg);} to{transform:rotate(45deg);} }

/* Bars Flip */
.ul-bars-flip { display:inline-flex; align-items:center; gap:calc(var(--ul-bar-width)*0.5); height:var(--ul-size); }
.ul-bars-flip .ul-d { width:var(--ul-bar-width); height:var(--ul-bar-height); background:var(--ul-color); border-radius:calc(var(--ul-bar-width)/2); animation:ul-bar-flip var(--ul-speed) ease-in-out infinite; }
.ul-bars-flip .ul-d:nth-child(1){animation-delay:0s;}
.ul-bars-flip .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.15);}
.ul-bars-flip .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.3);}
.ul-bars-flip .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.45);}
.ul-bars-flip .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.6);}
@keyframes ul-bar-flip { 0%,100%{transform:rotateX(0) scaleY(1);} 50%{transform:rotateX(180deg) scaleY(0.5);} }

/* Bars Zoom */
.ul-bars-zoom { display:inline-flex; align-items:center; gap:calc(var(--ul-bar-width)*0.5); height:var(--ul-size); }
.ul-bars-zoom .ul-d { width:var(--ul-bar-width); height:var(--ul-bar-height); background:var(--ul-color); border-radius:calc(var(--ul-bar-width)/2); animation:ul-bar-zoom var(--ul-speed) ease-in-out infinite; }
.ul-bars-zoom .ul-d:nth-child(1){animation-delay:calc(var(--ul-speed)*-0.4);}
.ul-bars-zoom .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*-0.3);}
.ul-bars-zoom .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*-0.2);}
.ul-bars-zoom .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*-0.1);}
.ul-bars-zoom .ul-d:nth-child(5){animation-delay:0s;}
@keyframes ul-bar-zoom { 0%,100%{transform:scaleY(0.3) scaleX(1.2);opacity:.5;} 50%{transform:scaleY(1) scaleX(1);opacity:1;} }

/* Line Scale */
.ul-line-scale { display:inline-flex; align-items:center; gap:3px; height:var(--ul-size); }
.ul-line-scale .ul-d { width:3px; height:var(--ul-size); background:var(--ul-color); border-radius:2px; animation:ul-line-s var(--ul-speed) ease-in-out infinite; }
.ul-line-scale .ul-d:nth-child(1){animation-delay:calc(var(--ul-speed)*-0.4);}
.ul-line-scale .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*-0.3);}
.ul-line-scale .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*-0.2);}
.ul-line-scale .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*-0.1);}
.ul-line-scale .ul-d:nth-child(5){animation-delay:0s;}
@keyframes ul-line-s { 0%,40%,100%{transform:scaleY(0.4);opacity:.5;} 20%{transform:scaleY(1);opacity:1;} }

/* Line Wave */
.ul-line-wave { width:calc(var(--ul-size)*2); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-line-wave::before { content:''; position:absolute; top:50%; left:-100%; width:300%; height:2px; background:repeating-linear-gradient(90deg, transparent 0 20px, var(--ul-color) 20px 40px); transform:translateY(-50%); animation:ul-line-wave-anim var(--ul-speed) linear infinite; }
@keyframes ul-line-wave-anim { to{transform:translateY(-50%) translateX(40px);} }

/* Progress Glow */
.ul-progress-glow { width:100%; height:calc(var(--ul-border-width)*1.5); background:var(--ul-secondary-color); border-radius:99px; overflow:hidden; position:relative; }
.ul-progress-glow::before { content:''; position:absolute; top:0; left:-40%; height:100%; width:40%; background:linear-gradient(90deg, transparent, var(--ul-color), transparent); animation:ul-progress-slide calc(var(--ul-speed)*1.5) ease-in-out infinite; box-shadow:0 0 8px var(--ul-color), 0 0 16px var(--ul-color); }

/* Progress Stripe */
.ul-progress-stripe { width:100%; height:calc(var(--ul-border-width)*3); border-radius:99px; overflow:hidden; position:relative; background: repeating-linear-gradient(-45deg, var(--ul-color) 0px, var(--ul-color) 10px, var(--ul-secondary-color) 10px, var(--ul-secondary-color) 20px); background-size:28px 100%; animation:ul-stripe-move var(--ul-speed) linear infinite; }
@keyframes ul-stripe-move { to{background-position:28px 0;} }

/* Progress Elastic */
.ul-progress-elastic { width:100%; height:calc(var(--ul-border-width)*1.5); background:var(--ul-secondary-color); border-radius:99px; overflow:hidden; position:relative; }
.ul-progress-elastic::before { content:''; position:absolute; inset:0; background:var(--ul-color); transform-origin:left center; animation:ul-elastic-prog calc(var(--ul-speed)*2) ease-in-out infinite; }
@keyframes ul-elastic-prog { 0%{transform:scaleX(0) translateX(0);transform-origin:left;} 50%{transform:scaleX(1) translateX(0);transform-origin:left;} 51%{transform:scaleX(1) translateX(0);transform-origin:right;} 100%{transform:scaleX(0) translateX(0);transform-origin:right;} }

/* Bar Gradient */
.ul-bar-gradient { width:100%; height:calc(var(--ul-border-width)*1.5); border-radius:99px; overflow:hidden; background:linear-gradient(90deg, var(--ul-secondary-color), var(--ul-color)); position:relative; }
.ul-bar-gradient::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, var(--ul-secondary-color) 50%, transparent 100%); animation:ul-bar-grad-move calc(var(--ul-speed)*2) linear infinite; }
@keyframes ul-bar-grad-move { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* Bars Fade */
.ul-bars-fade { display:inline-flex; align-items:center; gap:calc(var(--ul-bar-width)*0.5); height:var(--ul-size); }
.ul-bars-fade .ul-d { width:var(--ul-bar-width); height:var(--ul-bar-height); background:var(--ul-color); border-radius:calc(var(--ul-bar-width)/2); animation:ul-bar-fade-anim var(--ul-speed) ease-in-out infinite; }
.ul-bars-fade .ul-d:nth-child(1){animation-delay:calc(var(--ul-speed)*-0.4);}
.ul-bars-fade .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*-0.3);}
.ul-bars-fade .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*-0.2);}
.ul-bars-fade .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*-0.1);}
.ul-bars-fade .ul-d:nth-child(5){animation-delay:0s;}
@keyframes ul-bar-fade-anim { 0%,100%{opacity:.1;} 50%{opacity:1;} }

/* Audio Wave */
.ul-audio-wave { display:inline-flex; align-items:center; gap:2px; height:var(--ul-size); }
.ul-audio-wave .ul-d { width:3px; border-radius:2px; background:var(--ul-color); animation:ul-audio-anim var(--ul-speed) ease-in-out infinite alternate; }
.ul-audio-wave .ul-d:nth-child(1){height:20%; animation-delay:0s;}
.ul-audio-wave .ul-d:nth-child(2){height:60%; animation-delay:calc(var(--ul-speed)*0.05);}
.ul-audio-wave .ul-d:nth-child(3){height:90%; animation-delay:calc(var(--ul-speed)*0.1);}
.ul-audio-wave .ul-d:nth-child(4){height:70%; animation-delay:calc(var(--ul-speed)*0.15);}
.ul-audio-wave .ul-d:nth-child(5){height:100%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-audio-wave .ul-d:nth-child(6){height:80%; animation-delay:calc(var(--ul-speed)*0.25);}
.ul-audio-wave .ul-d:nth-child(7){height:50%; animation-delay:calc(var(--ul-speed)*0.3);}
.ul-audio-wave .ul-d:nth-child(8){height:30%; animation-delay:calc(var(--ul-speed)*0.35);}
@keyframes ul-audio-anim { from{transform:scaleY(0.5);} to{transform:scaleY(1);} }

/* Frequency */
.ul-frequency { display:inline-flex; align-items:center; gap:2px; height:var(--ul-size); }
.ul-frequency .ul-d { width:3px; border-radius:2px; background:var(--ul-color); animation:ul-freq-anim var(--ul-speed) ease-in-out infinite; }
.ul-frequency .ul-d:nth-child(odd){ animation-direction:alternate; }
.ul-frequency .ul-d:nth-child(even){ animation-direction:alternate-reverse; }
.ul-frequency .ul-d:nth-child(1){height:70%;}
.ul-frequency .ul-d:nth-child(2){height:40%;}
.ul-frequency .ul-d:nth-child(3){height:90%;}
.ul-frequency .ul-d:nth-child(4){height:55%;}
.ul-frequency .ul-d:nth-child(5){height:80%;}
.ul-frequency .ul-d:nth-child(6){height:35%;}
.ul-frequency .ul-d:nth-child(7){height:65%;}
.ul-frequency .ul-d:nth-child(8){height:50%;}
.ul-frequency .ul-d:nth-child(9){height:75%;}
.ul-frequency .ul-d:nth-child(10){height:45%;}
@keyframes ul-freq-anim { 0%,100%{transform:scaleY(0.3);} 50%{transform:scaleY(1);} }

/* Line Bounce */
.ul-line-bounce { display:inline-flex; align-items:flex-end; gap:3px; height:var(--ul-size); }
.ul-line-bounce .ul-d { width:3px; height:50%; background:var(--ul-color); border-radius:2px; animation:ul-line-b calc(var(--ul-speed)*0.6) ease-in-out infinite alternate; }
.ul-line-bounce .ul-d:nth-child(1){animation-delay:0s;}
.ul-line-bounce .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.08);}
.ul-line-bounce .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.16);}
.ul-line-bounce .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.24);}
.ul-line-bounce .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.32);}
.ul-line-bounce .ul-d:nth-child(6){animation-delay:calc(var(--ul-speed)*0.24);}
.ul-line-bounce .ul-d:nth-child(7){animation-delay:calc(var(--ul-speed)*0.16);}
@keyframes ul-line-b { from{transform:translateY(0);} to{transform:translateY(-80%);} }

/* Bar Slide */
.ul-bar-slide { width:100%; height:calc(var(--ul-border-width)*1.5); background:var(--ul-secondary-color); border-radius:99px; overflow:hidden; position:relative; }
.ul-bar-slide::before { content:''; position:absolute; inset:0; width:30%; background:var(--ul-color); border-radius:99px; animation:ul-bar-slide-anim calc(var(--ul-speed)*2) ease-in-out infinite alternate; }
@keyframes ul-bar-slide-anim { from{transform:translateX(0);} to{transform:translateX(calc(100%*7/3));} }

/* ── Geometric Shape Loaders ─────────────────────────────── */

/* Square Spin */
.ul-square-spin { width:calc(var(--ul-size)*0.7); height:calc(var(--ul-size)*0.7); background:var(--ul-color); animation:ul-sq-spin var(--ul-speed) ease-in-out infinite; }
@keyframes ul-sq-spin { 0%{transform:perspective(200px) rotateX(0) rotateY(0);} 25%{transform:perspective(200px) rotateX(180deg) rotateY(0);} 50%{transform:perspective(200px) rotateX(180deg) rotateY(180deg);} 75%{transform:perspective(200px) rotateX(0) rotateY(180deg);} 100%{transform:perspective(200px) rotateX(0) rotateY(0);} }

/* Square Fold */
.ul-square-fold { width:calc(var(--ul-size)*0.7); height:calc(var(--ul-size)*0.7); position:relative; }
.ul-square-fold .ul-d { position:absolute; width:50%; height:50%; background:var(--ul-color); border-radius:2px; }
.ul-square-fold .ul-d:nth-child(1){top:0;left:0; animation:ul-fold1 var(--ul-speed) ease-in-out infinite; transform-origin:right bottom;}
.ul-square-fold .ul-d:nth-child(2){top:0;right:0;animation:ul-fold2 var(--ul-speed) ease-in-out infinite; transform-origin:left bottom; animation-delay:calc(var(--ul-speed)*0.15);}
.ul-square-fold .ul-d:nth-child(3){bottom:0;right:0;animation:ul-fold3 var(--ul-speed) ease-in-out infinite; transform-origin:left top; animation-delay:calc(var(--ul-speed)*0.3);}
.ul-square-fold .ul-d:nth-child(4){bottom:0;left:0;animation:ul-fold4 var(--ul-speed) ease-in-out infinite; transform-origin:right top; animation-delay:calc(var(--ul-speed)*0.45);}
@keyframes ul-fold1 { 0%,10%{transform:perspective(140px) rotateX(-180deg); opacity:0;} 25%,75%{transform:perspective(140px) rotateX(0); opacity:1;} 90%,100%{transform:perspective(140px) rotateY(180deg); opacity:0;} }
@keyframes ul-fold2 { 0%,10%{transform:perspective(140px) rotateY(180deg); opacity:0;} 25%,75%{transform:perspective(140px) rotateY(0); opacity:1;} 90%,100%{transform:perspective(140px) rotateX(-180deg); opacity:0;} }
@keyframes ul-fold3 { 0%,10%{transform:perspective(140px) rotateX(180deg); opacity:0;} 25%,75%{transform:perspective(140px) rotateX(0); opacity:1;} 90%,100%{transform:perspective(140px) rotateY(-180deg); opacity:0;} }
@keyframes ul-fold4 { 0%,10%{transform:perspective(140px) rotateY(-180deg); opacity:0;} 25%,75%{transform:perspective(140px) rotateY(0); opacity:1;} 90%,100%{transform:perspective(140px) rotateX(180deg); opacity:0;} }

/* Cube 3D */
.ul-cube-3d { width:calc(var(--ul-size)*0.6); height:calc(var(--ul-size)*0.6); position:relative; transform-style:preserve-3d; animation:ul-cube-rotate calc(var(--ul-speed)*3) linear infinite; }
.ul-cube-3d .ul-d { position:absolute; width:100%; height:100%; background:var(--ul-color); opacity:.85; border:1px solid rgba(255,255,255,.2); }
.ul-cube-3d .ul-d:nth-child(1){transform:translateZ(calc(var(--ul-size)*0.3));}
.ul-cube-3d .ul-d:nth-child(2){transform:translateZ(calc(var(--ul-size)*-0.3)) rotateY(180deg);}
.ul-cube-3d .ul-d:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--ul-size)*0.3));}
.ul-cube-3d .ul-d:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--ul-size)*0.3));}
.ul-cube-3d .ul-d:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--ul-size)*0.3)); opacity:.5;}
.ul-cube-3d .ul-d:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--ul-size)*0.3)); opacity:.5;}
@keyframes ul-cube-rotate { 0%{transform:rotateX(0) rotateY(0);} 100%{transform:rotateX(360deg) rotateY(360deg);} }

/* Diamond Spin */
.ul-diamond-spin { width:calc(var(--ul-size)*0.6); height:calc(var(--ul-size)*0.6); background:var(--ul-color); transform:rotate(45deg); animation:ul-diamond-anim var(--ul-speed) ease-in-out infinite; }
@keyframes ul-diamond-anim { 0%,100%{transform:rotate(45deg) scale(1);} 50%{transform:rotate(225deg) scale(0.8);} }

/* Hexagon */
.ul-hexagon { width:var(--ul-size); height:calc(var(--ul-size)*0.866); position:relative; animation:ul-spin calc(var(--ul-speed)*2) linear infinite; }
.ul-hexagon::before, .ul-hexagon::after { content:''; position:absolute; width:100%; height:100%; }
.ul-hexagon { background:var(--ul-color); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation:ul-hex-spin var(--ul-speed) linear infinite; }
@keyframes ul-hex-spin { 0%{transform:rotate(0deg); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0 75%,0 25%);} 50%{clip-path:polygon(30% 0%,100% 30%,100% 70%,70% 100%,0 70%,0 30%);} 100%{transform:rotate(360deg); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0 75%,0 25%);} }

/* Triangle Spin */
.ul-triangle-spin { width:0; height:0; border-left:calc(var(--ul-size)*0.4) solid transparent; border-right:calc(var(--ul-size)*0.4) solid transparent; border-bottom:calc(var(--ul-size)*0.7) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }

/* Cross Spin */
.ul-cross-spin { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin var(--ul-speed) linear infinite; }
.ul-cross-spin::before { content:''; position:absolute; top:35%; left:0; right:0; height:30%; background:var(--ul-color); border-radius:2px; }
.ul-cross-spin::after { content:''; position:absolute; left:35%; top:0; bottom:0; width:30%; background:var(--ul-color); border-radius:2px; }

/* Star Spin */
.ul-star-spin { width:var(--ul-size); height:var(--ul-size); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); background:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }

/* Star Pulse */
.ul-star-pulse { width:var(--ul-size); height:var(--ul-size); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); background:var(--ul-color); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; }

/* Infinity */
.ul-infinity { width:var(--ul-size); height:calc(var(--ul-size)*0.5); position:relative; }
.ul-infinity::before, .ul-infinity::after { content:''; position:absolute; top:0; width:50%; height:100%; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); }
.ul-infinity::before { left:0; animation:ul-inf-left var(--ul-speed) linear infinite; }
.ul-infinity::after { right:0; animation:ul-inf-right var(--ul-speed) linear infinite; }
@keyframes ul-inf-left { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
@keyframes ul-inf-right { 0%{transform:rotate(0);} 100%{transform:rotate(-360deg);} }

/* Gear */
.ul-gear { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*2) solid var(--ul-color); position:relative; animation:ul-spin calc(var(--ul-speed)*2) linear infinite; }
.ul-gear::before { content:''; position:absolute; inset:-calc(var(--ul-border-width)*3); border-radius:50%; border:calc(var(--ul-border-width)*2) dashed var(--ul-color); }
.ul-gear::after { content:''; position:absolute; inset:20%; border-radius:50%; background:var(--ul-color); opacity:.3; }

/* Gear Dual */
.ul-gear-dual { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-gear-dual::before { content:''; position:absolute; width:55%; height:55%; border-radius:50%; border:calc(var(--ul-border-width)*1.5) dashed var(--ul-color); top:5%; left:5%; animation:ul-spin var(--ul-speed) linear infinite; }
.ul-gear-dual::after { content:''; position:absolute; width:45%; height:45%; border-radius:50%; border:calc(var(--ul-border-width)*1.5) dashed var(--ul-color); bottom:5%; right:5%; animation:ul-spin var(--ul-speed) linear infinite reverse; opacity:.7; }

/* Clock */
.ul-clock-face { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); position:relative; }
.ul-clock-face::before { content:''; position:absolute; top:50%; left:50%; width:2px; height:38%; background:var(--ul-color); transform-origin:top center; transform:translateX(-50%); animation:ul-spin calc(var(--ul-speed)*60) linear infinite; border-radius:2px; }
.ul-clock-face::after { content:''; position:absolute; top:50%; left:50%; width:2px; height:28%; background:var(--ul-color); transform-origin:top center; transform:translateX(-50%) rotate(90deg); animation:ul-spin calc(var(--ul-speed)*720) linear infinite; opacity:.6; border-radius:2px; }

/* Plus Spin */
.ul-plus-spin { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin var(--ul-speed) linear infinite; }
.ul-plus-spin::before { content:''; position:absolute; top:30%; left:0; right:0; height:40%; background:linear-gradient(var(--ul-color), var(--ul-secondary-color)); border-radius:2px; }
.ul-plus-spin::after { content:''; position:absolute; left:30%; top:0; bottom:0; width:40%; background:linear-gradient(var(--ul-color), var(--ul-secondary-color)); border-radius:2px; }

/* Circle Draw */
.ul-circle-draw { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); position:relative; }
.ul-circle-draw::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-circle-d var(--ul-speed) ease-in-out infinite; }
@keyframes ul-circle-d { 0%{transform:rotate(0deg);border-top-color:var(--ul-color);} 50%{border-top-color:var(--ul-secondary-color);} 100%{transform:rotate(360deg);border-top-color:var(--ul-color);} }

/* Arc Rotate */
.ul-arc-rotate { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); border-right-color:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }

/* Donut */
.ul-donut { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:transparent; box-shadow:inset 0 0 0 calc(var(--ul-size)*0.2) var(--ul-color); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; }

/* Crescent */
.ul-crescent { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*3) solid transparent; border-top-color:var(--ul-color); border-right-color:var(--ul-color); border-bottom-color:var(--ul-color); animation:ul-spin var(--ul-speed) ease-in-out infinite; }

/* Pentagon */
.ul-pentagon { width:var(--ul-size); height:var(--ul-size); clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%); background:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }

/* Octagon */
.ul-octagon { width:var(--ul-size); height:var(--ul-size); clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%); background:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }

/* Spiral Draw */
.ul-spiral-draw { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*2) linear infinite; }
.ul-spiral-draw::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin var(--ul-speed) ease-in-out infinite; }
.ul-spiral-draw::after { content:''; position:absolute; inset:15%; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin calc(var(--ul-speed)*0.7) ease-in-out infinite; opacity:.6; }

/* Morph Shape */
.ul-morph-shape { width:var(--ul-size); height:var(--ul-size); background:var(--ul-color); animation:ul-morph var(--ul-speed) ease-in-out infinite; }
@keyframes ul-morph { 0%{border-radius:50%;transform:rotate(0deg) scale(1);} 25%{border-radius:20%;transform:rotate(90deg) scale(0.9);} 50%{border-radius:50%;transform:rotate(180deg) scale(1);} 75%{border-radius:40% 10%;transform:rotate(270deg) scale(0.9);} 100%{border-radius:50%;transform:rotate(360deg) scale(1);} }

/* Square Morph */
.ul-square-morph { width:calc(var(--ul-size)*0.7); height:calc(var(--ul-size)*0.7); background:var(--ul-color); animation:ul-sq-morph var(--ul-speed) ease-in-out infinite; }
@keyframes ul-sq-morph { 0%,100%{border-radius:50% 50% 50% 50% / 50% 50% 50% 50%; transform:rotate(0);} 33%{border-radius:0 50% / 50% 50%;transform:rotate(120deg);} 66%{border-radius:50% 50% 0 50% / 50% 0 50% 50%;transform:rotate(240deg);} }

/* Flip 3D */
.ul-flip-3d { width:calc(var(--ul-size)*0.7); height:calc(var(--ul-size)*0.7); background:var(--ul-color); animation:ul-flip3d calc(var(--ul-speed)*1.5) ease-in-out infinite; border-radius:4px; }
@keyframes ul-flip3d { 0%,100%{transform:perspective(200px) rotateY(0deg);} 50%{transform:perspective(200px) rotateY(180deg);} }

/* Figure Eight */
.ul-figure-eight { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-figure-eight::before { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-fig8 calc(var(--ul-speed)*2) linear infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }
@keyframes ul-fig8 { 0%{transform:rotate(0deg) translateX(30%) rotate(0deg);} 50%{transform:rotate(180deg) translateX(30%) rotate(-180deg);} 100%{transform:rotate(360deg) translateX(30%) rotate(-360deg);} }

/* ── Gradient, Glow & Neon Loaders ───────────────────────── */

/* Gradient Spin */
.ul-gradient-spin { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(var(--ul-color),#8b5cf6,#ec4899,var(--ul-color)); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-gradient-spin::after { content:''; position:absolute; inset:var(--ul-border-width); background:var(--bg,#080d1a); border-radius:50%; }

/* Gradient Pulse */
.ul-gradient-pulse { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:radial-gradient(circle, var(--ul-color), #8b5cf6, #ec4899); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; }

/* Rainbow Spin */
.ul-rainbow-spin { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(red,orange,yellow,green,cyan,blue,violet,red); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-rainbow-spin::after { content:''; position:absolute; inset:var(--ul-border-width); background:var(--bg,#080d1a); border-radius:50%; }

/* Rainbow Pulse */
.ul-rainbow-pulse { width:var(--ul-size); height:var(--ul-size); border-radius:50%; animation:ul-rainbow-p var(--ul-speed) ease-in-out infinite; }
@keyframes ul-rainbow-p { 0%{background:hsl(0,100%,60%); transform:scale(0.8);} 16%{background:hsl(60,100%,60%);} 33%{background:hsl(120,100%,60%); transform:scale(1);} 50%{background:hsl(180,100%,60%);} 66%{background:hsl(240,100%,60%); transform:scale(0.8);} 83%{background:hsl(300,100%,60%);} 100%{background:hsl(360,100%,60%); transform:scale(0.8);} }

/* Neon Ring */
.ul-neon-ring { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*1.5) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite, ul-neon-glow-pulse var(--ul-speed) ease-in-out infinite; }
@keyframes ul-neon-glow-pulse { 0%,100%{box-shadow:0 0 5px var(--ul-color),0 0 10px var(--ul-color),0 0 20px var(--ul-color);} 50%{box-shadow:0 0 10px var(--ul-color),0 0 25px var(--ul-color),0 0 50px var(--ul-color);} }

/* Neon Dots */
.ul-neon-dots { display:inline-flex; align-items:center; gap:calc(var(--ul-dot-size)*0.6); height:var(--ul-size); }
.ul-neon-dots::before, .ul-neon-dots::after, .ul-neon-dots .ul-d { content:''; display:block; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-neon-dot-flash var(--ul-speed) ease-in-out infinite; }
.ul-neon-dots::after { animation-delay:calc(var(--ul-speed)*0.33); }
.ul-neon-dots .ul-d { animation-delay:calc(var(--ul-speed)*0.66); }
@keyframes ul-neon-dot-flash { 0%,100%{box-shadow:0 0 3px var(--ul-color); opacity:.3;} 50%{box-shadow:0 0 10px var(--ul-color),0 0 20px var(--ul-color); opacity:1;} }

/* Neon Line */
.ul-neon-line { width:100%; height:4px; border-radius:2px; background:var(--ul-color); position:relative; overflow:hidden; box-shadow:0 0 10px var(--ul-color),0 0 20px var(--ul-color); }
.ul-neon-line::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent); animation:ul-bar-grad-move var(--ul-speed) linear infinite; }

/* Neon Pulse */
.ul-neon-pulse { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:2px solid var(--ul-color); animation:ul-neon-p var(--ul-speed) ease-in-out infinite; }
@keyframes ul-neon-p { 0%,100%{transform:scale(0.8); box-shadow:0 0 5px var(--ul-color); opacity:.5;} 50%{transform:scale(1.1); box-shadow:0 0 20px var(--ul-color),0 0 40px var(--ul-color); opacity:1;} }

/* Neon Glow */
.ul-neon-glow { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:var(--ul-color); animation:ul-neon-glow-anim var(--ul-speed) ease-in-out infinite; }
@keyframes ul-neon-glow-anim { 0%,100%{opacity:.3; box-shadow:0 0 5px var(--ul-color); transform:scale(0.8);} 50%{opacity:1; box-shadow:0 0 20px var(--ul-color),0 0 40px var(--ul-color),0 0 60px var(--ul-color); transform:scale(1);} }

/* Plasma */
.ul-plasma { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:radial-gradient(circle at 40% 40%,#fff 0%,var(--ul-color) 40%,#8b5cf6 70%,transparent 100%); animation:ul-plasma-anim var(--ul-speed) ease-in-out infinite; }
@keyframes ul-plasma-anim { 0%,100%{transform:scale(1) rotate(0deg); filter:hue-rotate(0deg);} 50%{transform:scale(1.1) rotate(180deg); filter:hue-rotate(180deg);} }

/* Plasma Ring */
.ul-plasma-ring { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*2) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite, ul-plasma-ring-anim calc(var(--ul-speed)*2) ease-in-out infinite; }
@keyframes ul-plasma-ring-anim { 0%,100%{filter:hue-rotate(0deg) drop-shadow(0 0 8px var(--ul-color));} 50%{filter:hue-rotate(360deg) drop-shadow(0 0 16px var(--ul-color));} }

/* Aurora */
.ul-aurora { width:var(--ul-size); height:calc(var(--ul-size)*0.5); border-radius:50%; position:relative; overflow:hidden; }
.ul-aurora::before { content:''; position:absolute; inset:-50%; background:conic-gradient(from 0deg,hsl(180,100%,50%),hsl(220,100%,60%),hsl(270,100%,60%),hsl(300,100%,60%),hsl(180,100%,50%)); animation:ul-spin calc(var(--ul-speed)*3) linear infinite; border-radius:50%; }
.ul-aurora::after { content:''; position:absolute; inset:20%; background:var(--bg,#080d1a); border-radius:50%; }

/* Galaxy */
.ul-galaxy { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(from 0deg, transparent 0%, var(--ul-color) 20%, transparent 40%, rgba(139,92,246,.6) 60%, transparent 80%, var(--ul-color) 100%); animation:ul-spin calc(var(--ul-speed)*3) linear infinite; filter:blur(1px); }
.ul-galaxy::after { content:''; position:absolute; inset:30%; border-radius:50%; background:var(--bg,#080d1a); filter:none; }

/* Laser */
.ul-laser { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-laser::before { content:''; position:absolute; top:50%; left:50%; width:var(--ul-border-width); height:45%; background:linear-gradient(transparent,var(--ul-color)); transform-origin:bottom center; transform:translateX(-50%) translateY(-100%); animation:ul-spin var(--ul-speed) linear infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }
.ul-laser::after { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--ul-secondary-color); }

/* Electric Arc */
.ul-electric-arc { width:var(--ul-size); height:var(--ul-size); border-radius:50%; position:relative; }
.ul-electric-arc::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; border-top-color:transparent; border-bottom-color:transparent; filter:drop-shadow(0 0 6px var(--ul-color)); }
.ul-electric-arc::after { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-spin calc(var(--ul-speed)*0.5) linear infinite reverse; border-left-color:transparent; border-right-color:transparent; filter:drop-shadow(0 0 6px var(--ul-color)); opacity:.7; }

/* Fire Ring */
.ul-fire-ring { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*2) solid #f97316; animation:ul-spin var(--ul-speed) linear infinite, ul-fire-ring-anim calc(var(--ul-speed)*0.5) ease-in-out infinite alternate; }
@keyframes ul-fire-ring-anim { from{border-color:#ef4444; filter:drop-shadow(0 0 8px #ef4444);} to{border-color:#fbbf24; filter:drop-shadow(0 0 12px #fbbf24);} }

/* Holographic */
.ul-holographic { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(from 0deg,#ff0080,#ff8c00,#40e0d0,#0040ff,#ff0080); animation:ul-spin calc(var(--ul-speed)*2) linear infinite; filter:saturate(1.5) brightness(1.2); }
.ul-holographic::after { content:''; position:absolute; inset:var(--ul-border-width); border-radius:50%; background:var(--bg,#080d1a); }

/* Iridescent */
.ul-iridescent { width:var(--ul-size); height:var(--ul-size); border-radius:50%; animation:ul-iridescent-anim calc(var(--ul-speed)*2) linear infinite; border:calc(var(--ul-border-width)*2) solid transparent; }
@keyframes ul-iridescent-anim { 0%{border-color:hsl(0,100%,60%); box-shadow:0 0 12px hsl(0,100%,60%);} 25%{border-color:hsl(90,100%,60%); box-shadow:0 0 12px hsl(90,100%,60%);} 50%{border-color:hsl(180,100%,60%); box-shadow:0 0 12px hsl(180,100%,60%);} 75%{border-color:hsl(270,100%,60%); box-shadow:0 0 12px hsl(270,100%,60%);} 100%{border-color:hsl(360,100%,60%); box-shadow:0 0 12px hsl(360,100%,60%);} }

/* Chrome */
.ul-chrome { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(from 0deg, #aaa, #fff, #888, #ddd, #aaa); animation:ul-spin calc(var(--ul-speed)*2) linear infinite; border:2px solid rgba(255,255,255,.2); }
.ul-chrome::after { content:''; position:absolute; inset:var(--ul-border-width); border-radius:50%; background:var(--bg,#080d1a); }

/* Aurora Wave */
.ul-aurora-wave { width:calc(var(--ul-size)*2.5); height:var(--ul-size); position:relative; overflow:hidden; border-radius:8px; }
.ul-aurora-wave::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,hsl(180,100%,50%),hsl(260,100%,60%),hsl(300,100%,60%),hsl(180,100%,50%)); background-size:200% 100%; animation:ul-aurora-shift calc(var(--ul-speed)*2) linear infinite; filter:blur(8px); }
@keyframes ul-aurora-shift { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }

/* Prismatic */
.ul-prismatic { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*2) solid transparent; background:conic-gradient(var(--ul-color),#8b5cf6,#ec4899,var(--ul-color)) border-box; animation:ul-spin calc(var(--ul-speed)*1.5) linear infinite; }

/* Gradient Wave */
.ul-gradient-wave { width:calc(var(--ul-size)*2.5); height:calc(var(--ul-border-width)*2); border-radius:2px; background:linear-gradient(90deg,transparent,var(--ul-color),#8b5cf6,#ec4899,transparent); background-size:200% 100%; animation:ul-grad-wave var(--ul-speed) linear infinite; }
@keyframes ul-grad-wave { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }

/* ── Tech & UI Loaders ───────────────────────────────────── */

/* Circuit Trace */
.ul-circuit { width:var(--ul-size); height:var(--ul-size); position:relative; border:1px solid var(--ul-secondary-color); border-radius:4px; }
.ul-circuit::before { content:''; position:absolute; top:-2px; left:20%; width:60%; height:var(--ul-border-width); background:var(--ul-color); animation:ul-circuit-trace var(--ul-speed) linear infinite; box-shadow:0 0 6px var(--ul-color); }
.ul-circuit::after { content:''; position:absolute; right:-2px; top:20%; width:var(--ul-border-width); height:60%; background:var(--ul-color); animation:ul-circuit-trace var(--ul-speed) linear infinite; box-shadow:0 0 6px var(--ul-color); animation-delay:calc(var(--ul-speed)*0.5); }
@keyframes ul-circuit-trace { 0%{opacity:0; transform:scaleX(0);transform-origin:left;} 50%{opacity:1; transform:scaleX(1);} 100%{opacity:0; transform:scaleX(0);transform-origin:right;} }

/* WiFi Signal */
.ul-wifi { width:var(--ul-size); height:calc(var(--ul-size)*0.7); position:relative; display:flex; align-items:flex-end; justify-content:center; }
.ul-wifi .ul-d { position:absolute; border-radius:50% 50% 0 0; border:var(--ul-border-width) solid var(--ul-color); border-bottom:none; animation:ul-wifi-anim var(--ul-speed) ease-in-out infinite; }
.ul-wifi .ul-d:nth-child(1){ width:20%;height:20%;bottom:0; animation-delay:0s; }
.ul-wifi .ul-d:nth-child(2){ width:45%;height:40%;bottom:0; animation-delay:calc(var(--ul-speed)*0.15); }
.ul-wifi .ul-d:nth-child(3){ width:70%;height:60%;bottom:0; animation-delay:calc(var(--ul-speed)*0.3); }
.ul-wifi .ul-d:nth-child(4){ width:95%;height:80%;bottom:0; animation-delay:calc(var(--ul-speed)*0.45); }
.ul-wifi::before { content:''; position:absolute; bottom:0; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-wifi-anim var(--ul-speed) ease-in-out infinite; z-index:1; }
@keyframes ul-wifi-anim { 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* Battery Charge */
.ul-battery { width:calc(var(--ul-size)*1.6); height:var(--ul-size); border:var(--ul-border-width) solid var(--ul-color); border-radius:4px; position:relative; overflow:hidden; }
.ul-battery::before { content:''; position:absolute; top:20%; right:-calc(var(--ul-border-width)*3); width:calc(var(--ul-border-width)*2); height:60%; background:var(--ul-color); border-radius:0 2px 2px 0; }
.ul-battery::after { content:''; position:absolute; inset:3px; background:linear-gradient(90deg,var(--ul-color),color-mix(in srgb,var(--ul-color) 50%,transparent)); border-radius:2px; animation:ul-battery-charge var(--ul-speed) ease-in-out infinite; transform-origin:left; }
@keyframes ul-battery-charge { 0%{transform:scaleX(0.1);} 90%{transform:scaleX(1); opacity:1;} 100%{transform:scaleX(1); opacity:0;} }

/* CPU Pulse */
.ul-cpu { width:var(--ul-size); height:var(--ul-size); border:var(--ul-border-width) solid var(--ul-color); border-radius:4px; position:relative; display:flex; align-items:center; justify-content:center; }
.ul-cpu::before { content:''; width:40%; height:40%; background:var(--ul-color); border-radius:2px; animation:ul-cpu-pulse var(--ul-speed) ease-in-out infinite; }
.ul-cpu::after { content:''; position:absolute; inset:-20%; border:1px dashed var(--ul-secondary-color); border-radius:4px; animation:ul-spin calc(var(--ul-speed)*4) linear infinite; }
@keyframes ul-cpu-pulse { 0%,100%{transform:scale(0.5);opacity:.3;} 50%{transform:scale(1);opacity:1;} }

/* Atom */
.ul-atom { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-atom::before { content:''; position:absolute; inset:30%; border-radius:50%; background:var(--ul-color); }
.ul-atom .ul-ring-atom { position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-atom .ul-ring-atom:nth-child(2) { transform:rotateX(60deg); animation-direction:reverse; opacity:.7; }
.ul-atom .ul-ring-atom:nth-child(3) { transform:rotateX(-60deg); animation-duration:calc(var(--ul-speed)*1.3); opacity:.5; }

/* DNA Helix */
.ul-dna { width:var(--ul-size); height:calc(var(--ul-size)*1.5); position:relative; overflow:hidden; }
.ul-dna .ul-d { position:absolute; width:35%; height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-dna-left var(--ul-speed) linear infinite; }
.ul-dna .ul-d:nth-child(odd) { left:0; }
.ul-dna .ul-d:nth-child(even) { right:0; background:color-mix(in srgb,var(--ul-color) 70%,#8b5cf6); animation-name:ul-dna-right; }
.ul-dna .ul-d:nth-child(1){top:0%;} .ul-dna .ul-d:nth-child(2){top:0%; animation-delay:calc(var(--ul-speed)*0.5);}
.ul-dna .ul-d:nth-child(3){top:20%;animation-delay:calc(var(--ul-speed)*0.1);} .ul-dna .ul-d:nth-child(4){top:20%;animation-delay:calc(var(--ul-speed)*0.6);}
.ul-dna .ul-d:nth-child(5){top:40%;animation-delay:calc(var(--ul-speed)*0.2);} .ul-dna .ul-d:nth-child(6){top:40%;animation-delay:calc(var(--ul-speed)*0.7);}
.ul-dna .ul-d:nth-child(7){top:60%;animation-delay:calc(var(--ul-speed)*0.3);} .ul-dna .ul-d:nth-child(8){top:60%;animation-delay:calc(var(--ul-speed)*0.8);}
.ul-dna .ul-d:nth-child(9){top:80%;animation-delay:calc(var(--ul-speed)*0.4);} .ul-dna .ul-d:nth-child(10){top:80%;animation-delay:calc(var(--ul-speed)*0.9);}
@keyframes ul-dna-left { 0%,100%{transform:translateX(0) scale(1); opacity:1;} 50%{transform:translateX(calc(var(--ul-size)*0.65)) scale(0.5); opacity:.4;} }
@keyframes ul-dna-right { 0%,100%{transform:translateX(0) scale(1); opacity:1;} 50%{transform:translateX(calc(var(--ul-size)*-0.65)) scale(0.5); opacity:.4;} }

/* Binary Stream */
.ul-binary { width:var(--ul-size); height:var(--ul-size); position:relative; font-family:monospace; font-size:calc(var(--ul-size)*0.14); color:var(--ul-color); display:flex; align-items:center; justify-content:center; letter-spacing:-1px; overflow:hidden; }
.ul-binary::before { content:'01101001\A01001100\A10110010\A01101100'; white-space:pre; animation:ul-binary-fall var(--ul-speed) linear infinite; text-shadow:0 0 6px var(--ul-color); }
@keyframes ul-binary-fall { 0%{transform:translateY(-25%); opacity:0;} 30%{opacity:1;} 100%{transform:translateY(25%); opacity:0;} }

/* Terminal Blink */
.ul-terminal { display:inline-flex; align-items:center; gap:4px; font-family:monospace; font-size:calc(var(--ul-size)*0.4); color:var(--ul-color); }
.ul-terminal::before { content:'> '; opacity:.7; }
.ul-terminal::after { content:'_'; animation:ul-blink var(--ul-speed) step-end infinite; }
@keyframes ul-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Network Pulse */
.ul-network { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-network .ul-d { position:absolute; width:calc(var(--ul-dot-size)*0.8); height:calc(var(--ul-dot-size)*0.8); border-radius:50%; background:var(--ul-color); animation:ul-net-pulse var(--ul-speed) ease-in-out infinite; }
.ul-network .ul-d:nth-child(1){top:10%;left:50%;transform:translateX(-50%); animation-delay:0s;}
.ul-network .ul-d:nth-child(2){top:50%;left:10%;transform:translateY(-50%); animation-delay:calc(var(--ul-speed)*0.16);}
.ul-network .ul-d:nth-child(3){top:50%;right:10%;transform:translateY(-50%); animation-delay:calc(var(--ul-speed)*0.32);}
.ul-network .ul-d:nth-child(4){bottom:10%;left:30%; animation-delay:calc(var(--ul-speed)*0.48);}
.ul-network .ul-d:nth-child(5){bottom:10%;right:30%; animation-delay:calc(var(--ul-speed)*0.64);}
.ul-network .ul-d:nth-child(6){top:50%;left:50%;transform:translate(-50%,-50%); animation-delay:calc(var(--ul-speed)*0.8); background:color-mix(in srgb,var(--ul-color) 80%,white); width:var(--ul-dot-size); height:var(--ul-dot-size);}
@keyframes ul-net-pulse { 0%,100%{opacity:.3;transform:scale(0.7);} 50%{opacity:1;transform:scale(1.1);} }

/* Radar Sweep */
.ul-radar { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:1px solid var(--ul-secondary-color); position:relative; overflow:hidden; }
.ul-radar::before { content:''; position:absolute; top:50%; left:50%; width:50%; height:2px; background:linear-gradient(90deg,transparent,var(--ul-color)); transform-origin:left center; transform:translateY(-50%); animation:ul-spin var(--ul-speed) linear infinite; box-shadow:0 0 8px var(--ul-color); }
.ul-radar::after { content:''; position:absolute; top:50%; left:50%; width:4px; height:4px; background:var(--ul-color); border-radius:50%; transform:translate(-50%,-50%); }

/* Sonar Ping */
.ul-sonar { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; position:relative; }
.ul-sonar::before { content:''; position:absolute; width:30%; height:30%; border-radius:50%; background:var(--ul-color); }
.ul-sonar::after { content:''; position:absolute; width:30%; height:30%; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-sonar-ring var(--ul-speed) ease-out infinite; }
.ul-sonar .ul-d { position:absolute; width:30%; height:30%; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-sonar-ring var(--ul-speed) ease-out infinite; animation-delay:calc(var(--ul-speed)*0.4); }
@keyframes ul-sonar-ring { 0%{transform:scale(1); opacity:1;} 100%{transform:scale(4); opacity:0;} }

/* Scan Line */
.ul-scan-line { width:var(--ul-size); height:var(--ul-size); border:1px solid var(--ul-secondary-color); border-radius:4px; position:relative; overflow:hidden; }
.ul-scan-line::before { content:''; position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--ul-color),transparent); animation:ul-scan var(--ul-speed) ease-in-out infinite alternate; box-shadow:0 0 8px var(--ul-color); }
@keyframes ul-scan { from{top:5%;} to{top:95%;} }

/* Glitch */
.ul-glitch { width:var(--ul-size); height:var(--ul-size); position:relative; display:flex; align-items:center; justify-content:center; }
.ul-glitch::before { content:''; position:absolute; inset:0; border-radius:50%; background:var(--ul-color); animation:ul-glitch-anim var(--ul-speed) step-end infinite; }
.ul-glitch::after { content:''; position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen; animation:ul-glitch-anim2 var(--ul-speed) step-end infinite; animation-delay:calc(var(--ul-speed)*0.1); background:#ec4899; opacity:.7; }
@keyframes ul-glitch-anim { 0%{clip-path:inset(0 0 90% 0); transform:translate(-5px,0);} 10%{clip-path:inset(50% 0 30% 0); transform:translate(3px,0);} 20%{clip-path:inset(20% 0 60% 0); transform:translate(0,0);} 30%{clip-path:inset(70% 0 10% 0); transform:translate(-3px,0);} 100%{clip-path:inset(0 0 90% 0); transform:translate(0,0);} }
@keyframes ul-glitch-anim2 { 0%{clip-path:inset(80% 0 0 0); transform:translate(5px,0);} 20%{clip-path:inset(0 0 70% 0); transform:translate(-3px,0);} 40%{clip-path:inset(40% 0 40% 0); transform:translate(0,0);} 60%{clip-path:inset(0 0 80% 0); transform:translate(3px,0);} 100%{clip-path:inset(80% 0 0 0); transform:translate(0,0);} }

/* Satellite Spin */
.ul-satellite { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-satellite::before { content:''; position:absolute; inset:30%; border-radius:50%; background:var(--ul-color); opacity:.5; }
.ul-satellite::after { content:''; position:absolute; width:calc(var(--ul-dot-size)*0.8); height:calc(var(--ul-dot-size)*0.8); border-radius:2px; background:var(--ul-color); top:5%; left:calc(50% - calc(var(--ul-dot-size)*0.4)); transform-origin:50% calc(var(--ul-size)*0.45); animation:ul-spin var(--ul-speed) linear infinite; }

/* Chip Activity */
.ul-chip-activity { width:var(--ul-size); height:var(--ul-size); border:2px solid var(--ul-secondary-color); border-radius:4px; position:relative; display:flex; align-items:center; justify-content:center; }
.ul-chip-activity::before { content:''; width:50%; height:50%; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.ul-chip-activity .ul-d { border-radius:1px; background:var(--ul-color); animation:ul-chip-blink var(--ul-speed) ease-in-out infinite; }
.ul-chip-activity .ul-d:nth-child(1){animation-delay:0s;}
.ul-chip-activity .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-chip-activity .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.4);}
.ul-chip-activity .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.6);}
@keyframes ul-chip-blink { 0%,100%{opacity:.2;} 50%{opacity:1; box-shadow:0 0 4px var(--ul-color);} }

/* Data Stream */
.ul-data-stream { width:4px; height:var(--ul-size); position:relative; }
.ul-data-stream .ul-d { position:absolute; width:100%; height:20%; background:var(--ul-color); border-radius:2px; animation:ul-data-flow var(--ul-speed) linear infinite; opacity:0; }
.ul-data-stream .ul-d:nth-child(1){animation-delay:0s;}
.ul-data-stream .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-data-stream .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.4);}
.ul-data-stream .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.6);}
.ul-data-stream .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.8);}
@keyframes ul-data-flow { 0%{top:0%;opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:90%;opacity:0;} }

/* AI Pulse */
.ul-ai-pulse { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-ai-pulse::before { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--ul-color); animation:ul-ai-out var(--ul-speed) ease-out infinite; }
.ul-ai-pulse::after { content:''; position:absolute; inset:20%; border-radius:50%; border:2px solid var(--ul-color); animation:ul-ai-out var(--ul-speed) ease-out infinite; animation-delay:calc(var(--ul-speed)*0.33); }
.ul-ai-pulse .ul-d { position:absolute; inset:40%; border-radius:50%; background:var(--ul-color); animation:ul-ai-out var(--ul-speed) ease-out infinite; animation-delay:calc(var(--ul-speed)*0.66); }
@keyframes ul-ai-out { 0%{transform:scale(0.5);opacity:1;} 100%{transform:scale(1.5);opacity:0;} }

/* Biometric Scan */
.ul-biometric { width:var(--ul-size); height:var(--ul-size); border:1px solid var(--ul-secondary-color); border-radius:8px; position:relative; overflow:hidden; }
.ul-biometric::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--ul-color),transparent); box-shadow:0 0 8px var(--ul-color); animation:ul-bio-scan calc(var(--ul-speed)*1.5) ease-in-out infinite alternate; }
.ul-biometric::after { content:''; position:absolute; inset:15%; border-radius:50%; background:radial-gradient(circle, var(--ul-secondary-color) 40%, transparent 70%); }
@keyframes ul-bio-scan { from{top:0;} to{top:100%;} }

/* Server Blink */
.ul-server { width:calc(var(--ul-size)*1.4); height:var(--ul-size); border:1px solid var(--ul-secondary-color); border-radius:4px; padding:4px; display:flex; flex-direction:column; gap:3px; }
.ul-server .ul-d { height:calc(100%/3 - 2px); background:var(--ul-secondary-color); border-radius:2px; position:relative; }
.ul-server .ul-d::after { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--ul-color); right:6px; top:50%; transform:translateY(-50%); animation:ul-blink var(--ul-speed) ease-in-out infinite; }
.ul-server .ul-d:nth-child(2)::after { animation-delay:calc(var(--ul-speed)*0.3); background:#10b981; }
.ul-server .ul-d:nth-child(3)::after { animation-delay:calc(var(--ul-speed)*0.6); background:#f59e0b; }

/* ── Nature Loaders ───────────────────────────────────────── */

/* Ocean Wave */
.ul-wave-ocean { width:calc(var(--ul-size)*2); height:var(--ul-size); position:relative; overflow:hidden; border-radius:8px; }
.ul-wave-ocean::before { content:''; position:absolute; bottom:20%; left:-100%; width:300%; height:60%; background:linear-gradient(transparent 30%, var(--ul-color)); clip-path:polygon(0 60%,5% 40%,10% 60%,15% 40%,20% 60%,25% 40%,30% 60%,35% 40%,40% 60%,45% 40%,50% 60%,55% 40%,60% 60%,65% 40%,70% 60%,75% 40%,80% 60%,85% 40%,90% 60%,95% 40%,100% 60%,100% 100%,0 100%); animation:ul-wave-move calc(var(--ul-speed)*1.5) linear infinite; opacity:.8; }
.ul-wave-ocean::after { content:''; position:absolute; bottom:10%; left:-100%; width:300%; height:50%; background:var(--ul-color); clip-path:polygon(0 60%,6% 30%,12% 60%,18% 30%,24% 60%,30% 30%,36% 60%,42% 30%,48% 60%,54% 30%,60% 60%,66% 30%,72% 60%,78% 30%,84% 60%,90% 30%,96% 60%,100% 30%,100% 100%,0 100%); animation:ul-wave-move calc(var(--ul-speed)*1.2) linear infinite; animation-delay:calc(var(--ul-speed)*-0.3); opacity:.6; }
@keyframes ul-wave-move { to{transform:translateX(33.33%);} }

/* Ripple Water */
.ul-ripple-water { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; position:relative; }
.ul-ripple-water .ul-d { position:absolute; border-radius:50%; border:2px solid var(--ul-color); animation:ul-water-ripple calc(var(--ul-speed)*2) ease-out infinite; }
.ul-ripple-water .ul-d:nth-child(1){width:20%;height:20%; animation-delay:0s;}
.ul-ripple-water .ul-d:nth-child(2){width:20%;height:20%; animation-delay:calc(var(--ul-speed)*0.5);}
.ul-ripple-water .ul-d:nth-child(3){width:20%;height:20%; animation-delay:calc(var(--ul-speed)*1);}
.ul-ripple-water::after { content:''; position:absolute; width:10%; height:10%; border-radius:50%; background:var(--ul-color); top:5%; left:50%; }
@keyframes ul-water-ripple { 0%{transform:scale(1);opacity:.8;} 100%{transform:scale(5);opacity:0;} }

/* Fire Flame */
.ul-fire-flame { width:calc(var(--ul-size)*0.5); height:var(--ul-size); position:relative; }
.ul-fire-flame::before { content:''; position:absolute; bottom:0; left:10%; width:80%; height:100%; background:radial-gradient(ellipse at 50% 100%, #fbbf24 0%, #f97316 30%, #ef4444 60%, transparent 100%); border-radius:50% 50% 20% 20%; animation:ul-flame var(--ul-speed) ease-in-out infinite alternate; }
.ul-fire-flame::after { content:''; position:absolute; bottom:10%; left:20%; width:60%; height:70%; background:radial-gradient(ellipse at 50% 100%, #fde68a 0%, #fbbf24 40%, transparent 100%); border-radius:50% 50% 20% 20%; animation:ul-flame calc(var(--ul-speed)*0.7) ease-in-out infinite alternate-reverse; }
@keyframes ul-flame { 0%{transform:scaleX(1) scaleY(1);} 100%{transform:scaleX(0.9) scaleY(1.08) skewX(3deg);} }

/* Smoke Rise */
.ul-smoke { width:var(--ul-size); height:calc(var(--ul-size)*1.5); position:relative; overflow:hidden; }
.ul-smoke .ul-d { position:absolute; border-radius:50%; background:rgba(148,163,184,.4); animation:ul-smoke-rise calc(var(--ul-speed)*2) ease-out infinite; }
.ul-smoke .ul-d:nth-child(1){width:30%;height:30%;left:35%;bottom:-20%; animation-delay:0s;}
.ul-smoke .ul-d:nth-child(2){width:40%;height:40%;left:25%;bottom:-20%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-smoke .ul-d:nth-child(3){width:25%;height:25%;left:45%;bottom:-20%; animation-delay:calc(var(--ul-speed)*0.8);}
@keyframes ul-smoke-rise { 0%{transform:translateY(0) scale(0.5);opacity:.6;} 100%{transform:translateY(-150%) translateX(20px) scale(2);opacity:0;} }

/* Rain Drops */
.ul-rain-drops { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-rain-drops .ul-d { position:absolute; width:2px; border-radius:2px; background:linear-gradient(transparent,var(--ul-color)); animation:ul-rain-drop calc(var(--ul-speed)*0.7) linear infinite; }
.ul-rain-drops .ul-d:nth-child(1){height:25%;left:15%;animation-delay:0s;}
.ul-rain-drops .ul-d:nth-child(2){height:20%;left:30%;animation-delay:calc(var(--ul-speed)*0.15);}
.ul-rain-drops .ul-d:nth-child(3){height:30%;left:50%;animation-delay:calc(var(--ul-speed)*0.3);}
.ul-rain-drops .ul-d:nth-child(4){height:22%;left:65%;animation-delay:calc(var(--ul-speed)*0.45);}
.ul-rain-drops .ul-d:nth-child(5){height:28%;left:80%;animation-delay:calc(var(--ul-speed)*0.6);}
.ul-rain-drops .ul-d:nth-child(6){height:18%;left:5%;animation-delay:calc(var(--ul-speed)*0.75);}
.ul-rain-drops .ul-d:nth-child(7){height:24%;left:43%;animation-delay:calc(var(--ul-speed)*0.1);}
.ul-rain-drops .ul-d:nth-child(8){height:26%;left:90%;animation-delay:calc(var(--ul-speed)*0.55);}

/* Snowflake Fall */
.ul-snowflake { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-snowflake .ul-d { position:absolute; width:calc(var(--ul-dot-size)*0.5); height:calc(var(--ul-dot-size)*0.5); border-radius:50%; background:var(--ul-color); top:-10%; animation:ul-snow-drift calc(var(--ul-speed)*2.5) linear infinite; opacity:.8; }
.ul-snowflake .ul-d:nth-child(1){left:10%; animation-delay:0s;}
.ul-snowflake .ul-d:nth-child(2){left:35%; animation-delay:calc(var(--ul-speed)*0.5); animation-duration:calc(var(--ul-speed)*3);}
.ul-snowflake .ul-d:nth-child(3){left:60%; animation-delay:calc(var(--ul-speed)*1);}
.ul-snowflake .ul-d:nth-child(4){left:80%; animation-delay:calc(var(--ul-speed)*1.5); animation-duration:calc(var(--ul-speed)*2);}
.ul-snowflake .ul-d:nth-child(5){left:50%; animation-delay:calc(var(--ul-speed)*0.25);}
@keyframes ul-snow-drift { 0%{top:-10%;transform:translateX(0) rotate(0);opacity:.8;} 100%{top:110%;transform:translateX(15px) rotate(360deg);opacity:0;} }

/* Bubble Rise */
.ul-bubble-rise { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-bubble-rise .ul-d { position:absolute; border-radius:50%; border:1px solid var(--ul-color); background:rgba(59,130,246,.1); bottom:-15%; animation:ul-bub-rise calc(var(--ul-speed)*2) ease-in infinite; }
.ul-bubble-rise .ul-d:nth-child(1){width:18%;height:18%;left:20%;animation-delay:0s;}
.ul-bubble-rise .ul-d:nth-child(2){width:26%;height:26%;left:50%;animation-delay:calc(var(--ul-speed)*0.3);}
.ul-bubble-rise .ul-d:nth-child(3){width:14%;height:14%;left:70%;animation-delay:calc(var(--ul-speed)*0.6); animation-duration:calc(var(--ul-speed)*1.5);}
.ul-bubble-rise .ul-d:nth-child(4){width:20%;height:20%;left:35%;animation-delay:calc(var(--ul-speed)*0.9);}
@keyframes ul-bub-rise { 0%{bottom:-15%;opacity:.8;} 100%{bottom:110%;opacity:0;transform:scale(0.5);} }

/* Sun Rays */
.ul-sun-rays { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-sun-rays::before { content:''; position:absolute; inset:25%; border-radius:50%; background:var(--ul-color); }
.ul-sun-rays .ul-d { position:absolute; width:var(--ul-border-width); height:25%; background:var(--ul-color); top:0; left:calc(50% - var(--ul-border-width)/2); border-radius:2px; transform-origin:50% calc(var(--ul-size)/2); animation:ul-sun-ray-pulse var(--ul-speed) ease-in-out infinite; }
.ul-sun-rays .ul-d:nth-child(1){transform:rotate(0deg); animation-delay:0s;}
.ul-sun-rays .ul-d:nth-child(2){transform:rotate(45deg); animation-delay:calc(var(--ul-speed)*0.125);}
.ul-sun-rays .ul-d:nth-child(3){transform:rotate(90deg); animation-delay:calc(var(--ul-speed)*0.25);}
.ul-sun-rays .ul-d:nth-child(4){transform:rotate(135deg); animation-delay:calc(var(--ul-speed)*0.375);}
.ul-sun-rays .ul-d:nth-child(5){transform:rotate(180deg); animation-delay:calc(var(--ul-speed)*0.5);}
.ul-sun-rays .ul-d:nth-child(6){transform:rotate(225deg); animation-delay:calc(var(--ul-speed)*0.625);}
.ul-sun-rays .ul-d:nth-child(7){transform:rotate(270deg); animation-delay:calc(var(--ul-speed)*0.75);}
.ul-sun-rays .ul-d:nth-child(8){transform:rotate(315deg); animation-delay:calc(var(--ul-speed)*0.875);}
@keyframes ul-sun-ray-pulse { 0%,100%{opacity:.3;transform-origin:50% calc(var(--ul-size)/2); height:20%;} 50%{opacity:1; height:28%;} }

/* Comet Streak */
.ul-comet { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-comet::after { content:''; position:absolute; top:10%; right:10%; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); box-shadow:-20px 0 8px rgba(59,130,246,.3),-40px 0 4px rgba(59,130,246,.1); filter:drop-shadow(0 0 4px var(--ul-color)); animation:ul-comet-fly calc(var(--ul-speed)*2) ease-in-out infinite; }
@keyframes ul-comet-fly { 0%{transform:translate(0,0);opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{transform:translate(-70%,70%);opacity:0;} }

/* Lightning Bolt */
.ul-lightning { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; }
.ul-lightning::before { content:'⚡'; font-size:calc(var(--ul-size)*0.7); animation:ul-lightning-flash var(--ul-speed) ease-in-out infinite; filter:drop-shadow(0 0 8px #fbbf24); }
@keyframes ul-lightning-flash { 0%,100%{opacity:.1;transform:scale(0.9);} 10%,30%{opacity:1;transform:scale(1.1);} 20%{opacity:.3;} }

/* Tornado */
.ul-tornado { width:var(--ul-size); height:calc(var(--ul-size)*1.2); position:relative; }
.ul-tornado .ul-d { position:absolute; border-radius:50% 50% 0 0; border-top:var(--ul-border-width) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; opacity:.8; left:50%;transform:translateX(-50%); }
.ul-tornado .ul-d:nth-child(1){width:90%;height:35%;top:0; animation-duration:calc(var(--ul-speed)*0.8);}
.ul-tornado .ul-d:nth-child(2){width:70%;height:30%;top:20%; animation-duration:var(--ul-speed); opacity:.6;}
.ul-tornado .ul-d:nth-child(3){width:50%;height:25%;top:38%; animation-duration:calc(var(--ul-speed)*1.2); opacity:.5;}
.ul-tornado .ul-d:nth-child(4){width:30%;height:20%;top:55%; animation-duration:calc(var(--ul-speed)*1.4); opacity:.4;}
.ul-tornado .ul-d:nth-child(5){width:15%;height:15%;top:70%; animation-duration:calc(var(--ul-speed)*1.6); opacity:.3;}

/* Breath */
.ul-breath { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:radial-gradient(circle, var(--ul-color) 0%, transparent 70%); animation:ul-breath-anim calc(var(--ul-speed)*2) ease-in-out infinite; }
@keyframes ul-breath-anim { 0%,100%{transform:scale(0.6);opacity:.3;} 50%{transform:scale(1);opacity:1;} }

/* Crystal Grow */
.ul-crystal { width:var(--ul-size); height:var(--ul-size); position:relative; display:flex; align-items:flex-end; justify-content:center; }
.ul-crystal .ul-d { position:absolute; bottom:0; width:0; height:0; border-left:solid transparent; border-right:solid transparent; border-bottom:solid var(--ul-color); animation:ul-crystal-grow var(--ul-speed) ease-out infinite; opacity:.8; }
.ul-crystal .ul-d:nth-child(1){border-width:0 10px 30px; left:30%; animation-delay:0s;}
.ul-crystal .ul-d:nth-child(2){border-width:0 8px 40px; left:50%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-crystal .ul-d:nth-child(3){border-width:0 6px 25px; left:20%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-crystal .ul-d:nth-child(4){border-width:0 9px 35px; left:65%; animation-delay:calc(var(--ul-speed)*0.6);}
@keyframes ul-crystal-grow { 0%{transform:scaleY(0);transform-origin:bottom; opacity:0;} 40%{opacity:.8;transform:scaleY(1);} 100%{transform:scaleY(0);transform-origin:top; opacity:0;} }

/* Blossom */
.ul-blossom { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*5) linear infinite; }
.ul-blossom .ul-d { position:absolute; width:35%; height:35%; border-radius:50%; background:var(--ul-color); animation:ul-bloom var(--ul-speed) ease-in-out infinite; }
.ul-blossom .ul-d:nth-child(1){top:0;left:33%;}
.ul-blossom .ul-d:nth-child(2){top:33%;right:0; animation-delay:calc(var(--ul-speed)*0.166);}
.ul-blossom .ul-d:nth-child(3){bottom:0;left:33%; animation-delay:calc(var(--ul-speed)*0.333);}
.ul-blossom .ul-d:nth-child(4){top:33%;left:0; animation-delay:calc(var(--ul-speed)*0.5); opacity:.8;}
.ul-blossom::after { content:''; position:absolute; inset:33%; border-radius:50%; background:color-mix(in srgb,var(--ul-color) 70%,white); }
@keyframes ul-bloom { 0%,100%{transform:scale(0.8);opacity:.6;} 50%{transform:scale(1.1);opacity:1;} }

/* Tide Wave */
.ul-tide { width:calc(var(--ul-size)*2.5); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-tide::before { content:''; position:absolute; bottom:0; left:-100%; width:300%; height:50%; background:var(--ul-color); border-radius:100% 100% 0 0; animation:ul-tide-anim calc(var(--ul-speed)*2) ease-in-out infinite alternate; opacity:.8; }
.ul-tide::after { content:''; position:absolute; bottom:0; left:-100%; width:300%; height:40%; background:var(--ul-color); border-radius:100% 100% 0 0; animation:ul-tide-anim2 calc(var(--ul-speed)*1.5) ease-in-out infinite alternate; opacity:.5; }
@keyframes ul-tide-anim { from{transform:translateX(0) scaleY(0.8);} to{transform:translateX(33%) scaleY(1.2);} }
@keyframes ul-tide-anim2 { from{transform:translateX(10%);} to{transform:translateX(-23%);} }

/* Wind Flow */
.ul-wind { width:calc(var(--ul-size)*2); height:var(--ul-size); display:flex; flex-direction:column; gap:6px; justify-content:center; }
.ul-wind .ul-d { height:var(--ul-border-width); background:linear-gradient(90deg,var(--ul-color),transparent); border-radius:2px; animation:ul-wind-anim var(--ul-speed) ease-in-out infinite; }
.ul-wind .ul-d:nth-child(1){width:100%; animation-delay:0s;}
.ul-wind .ul-d:nth-child(2){width:80%; animation-delay:calc(var(--ul-speed)*0.1);}
.ul-wind .ul-d:nth-child(3){width:60%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-wind .ul-d:nth-child(4){width:80%; animation-delay:calc(var(--ul-speed)*0.3);}
.ul-wind .ul-d:nth-child(5){width:90%; animation-delay:calc(var(--ul-speed)*0.15);}
@keyframes ul-wind-anim { 0%{transform:translateX(-20%);opacity:0;} 50%{opacity:1;} 100%{transform:translateX(10%);opacity:0;} }

/* ── Creative & Fun Loaders ───────────────────────────────── */

/* Pac-Man */
.ul-pacman { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-pacman::before { content:''; position:absolute; width:100%; height:100%; border-radius:50%; background:var(--ul-color); clip-path:polygon(100% 40%, 0 0, 0 100%); animation:ul-pacman-chomp var(--ul-speed) ease-in-out infinite; }
.ul-pacman::after { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); top:50%;right:-150%; transform:translateY(-50%); animation:ul-pac-dot var(--ul-speed) linear infinite; }
@keyframes ul-pacman-chomp { 0%,100%{clip-path:polygon(100% 40%,0 0,0 100%);} 50%{clip-path:polygon(100% 50%,0 45%,0 55%);} }
@keyframes ul-pac-dot { 0%{right:-50%;opacity:1;} 100%{right:110%;opacity:.5;} }

/* Bouncing Ball */
.ul-bouncing-ball { width:var(--ul-size); height:var(--ul-size); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.ul-bouncing-ball::before { content:''; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:radial-gradient(circle at 35% 35%, color-mix(in srgb,var(--ul-color) 70%,white), var(--ul-color)); animation:ul-ball-bounce var(--ul-speed) cubic-bezier(.5,0,.5,1) infinite; }
.ul-bouncing-ball::after { content:''; width:var(--ul-dot-size); height:4px; border-radius:50%; background:var(--ul-secondary-color); animation:ul-ball-shadow var(--ul-speed) ease-in-out infinite alternate; margin-top:2px; }
@keyframes ul-ball-bounce { 0%,100%{transform:translateY(calc(var(--ul-size)*-0.6)) scaleY(1);} 50%{transform:translateY(0) scaleY(0.85) scaleX(1.1);} }
@keyframes ul-ball-shadow { from{transform:scale(1);opacity:.3;} to{transform:scale(0.4);opacity:.1;} }

/* Pendulum */
.ul-pendulum { width:var(--ul-size); height:var(--ul-size); position:relative; display:flex; justify-content:center; }
.ul-pendulum::before { content:''; position:absolute; top:0; width:1px; height:65%; background:var(--ul-secondary-color); }
.ul-pendulum::after { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:radial-gradient(circle at 35% 35%, color-mix(in srgb,var(--ul-color) 60%,white), var(--ul-color)); top:calc(65% - var(--ul-dot-size)); transform-origin:50% calc(var(--ul-size)*-0.65); animation:ul-pendulum-swing calc(var(--ul-speed)*1.8) ease-in-out infinite alternate; }
@keyframes ul-pendulum-swing { from{transform:rotate(-45deg);} to{transform:rotate(45deg);} }

/* Jelly Wobble */
.ul-jelly { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:var(--ul-color); animation:ul-jelly-anim var(--ul-speed) ease-in-out infinite; }
@keyframes ul-jelly-anim { 0%,100%{border-radius:50%;transform:scale(1);} 17%{border-radius:60% 40% 60% 40%/60% 60% 40% 40%;transform:scale(0.9,1.1);} 34%{border-radius:40% 60% 40% 60%/40% 40% 60% 60%;transform:scale(1.1,0.9);} 50%{border-radius:50%;transform:scale(1);} 67%{border-radius:55% 45% 55% 45%/55% 55% 45% 45%;transform:scale(0.95,1.05);} 84%{border-radius:45% 55% 45% 55%/45% 45% 55% 55%;transform:scale(1.05,0.95);} }

/* Rubber Stretch */
.ul-rubber { width:calc(var(--ul-size)*0.7); height:calc(var(--ul-size)*0.7); background:var(--ul-color); border-radius:50%; animation:ul-rubber-anim var(--ul-speed) ease-in-out infinite; }
@keyframes ul-rubber-anim { 0%,100%{transform:scaleX(1) scaleY(1);} 30%{transform:scaleX(1.3) scaleY(0.8);} 60%{transform:scaleX(0.8) scaleY(1.2);} }

/* Spring Bounce */
.ul-spring { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; }
.ul-spring::before { content:''; width:calc(var(--ul-dot-size)*1.2); height:calc(var(--ul-dot-size)*1.2); border-radius:50%; background:var(--ul-color); animation:ul-spring-anim var(--ul-speed) cubic-bezier(.4,0,.2,1) infinite; }
@keyframes ul-spring-anim { 0%{transform:translateY(-50%) scale(1);} 30%{transform:translateY(20%) scale(1.1,0.8);} 50%{transform:translateY(-30%) scale(0.9,1.1);} 70%{transform:translateY(10%) scale(1.05,0.95);} 100%{transform:translateY(-50%) scale(1);} }

/* Yo-Yo */
.ul-yo-yo { width:var(--ul-size); height:var(--ul-size); display:flex; justify-content:center; position:relative; }
.ul-yo-yo::before { content:''; width:1px; height:100%; background:var(--ul-secondary-color); position:absolute; }
.ul-yo-yo::after { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--ul-color) 60%, white), var(--ul-color)); animation:ul-yoyo-anim var(--ul-speed) ease-in-out infinite; box-shadow:0 0 6px var(--ul-color); }
@keyframes ul-yoyo-anim { 0%,100%{top:0; transform:scale(1);} 50%{top:calc(100% - var(--ul-dot-size)); transform:scale(1.15);} }

/* Flipping Coin */
.ul-coin { width:calc(var(--ul-size)*0.5); height:var(--ul-size); background:var(--ul-color); border-radius:4px; animation:ul-coin-flip calc(var(--ul-speed)*1.5) ease-in-out infinite; box-shadow:inset 0 0 0 2px rgba(255,255,255,.2); }
@keyframes ul-coin-flip { 0%,100%{transform:perspective(200px) rotateY(0deg) scaleX(1);} 50%{transform:perspective(200px) rotateY(1800deg) scaleX(0.3);} }

/* Hourglass Flip */
.ul-hourglass { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-hourglass::before { content:''; width:100%; height:100%; clip-path:polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%); background:var(--ul-color); animation:ul-hg-fill var(--ul-speed) ease-in-out infinite; }
.ul-hourglass::after { content:''; position:absolute; inset:0; clip-path:polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%); background:rgba(255,255,255,.1); animation:ul-spin calc(var(--ul-speed)*3) ease-in-out infinite; }
@keyframes ul-hg-fill { 0%,100%{clip-path:polygon(10% 5%,90% 5%,50% 50%,90% 95%,10% 95%,50% 50%);} 50%{clip-path:polygon(0% 0%,100% 0%,50% 50%,100% 100%,0% 100%,50% 50%);} }

/* Magic Sparkle */
.ul-magic { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-magic .ul-d { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--ul-color); animation:ul-sparkle calc(var(--ul-speed)*1.5) ease-in-out infinite; }
.ul-magic .ul-d:nth-child(1){top:10%;left:50%; animation-delay:0s;}
.ul-magic .ul-d:nth-child(2){top:30%;right:10%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-magic .ul-d:nth-child(3){bottom:10%;left:30%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-magic .ul-d:nth-child(4){top:50%;left:10%; animation-delay:calc(var(--ul-speed)*0.6);}
.ul-magic .ul-d:nth-child(5){top:20%;left:20%; animation-delay:calc(var(--ul-speed)*0.8);}
.ul-magic::after { content:'✦'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(var(--ul-size)*0.5); color:var(--ul-color); animation:ul-spin calc(var(--ul-speed)*3) linear infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }
@keyframes ul-sparkle { 0%,100%{transform:scale(0);opacity:0;} 50%{transform:scale(1.5);opacity:1; box-shadow:0 0 6px var(--ul-color);} }

/* Refresh Spin */
.ul-refresh { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin var(--ul-speed) cubic-bezier(0.4,0,0.6,1) infinite; }
.ul-refresh::before { content:'↻'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(var(--ul-size)*0.7); color:var(--ul-color); filter:drop-shadow(0 0 4px var(--ul-color)); }

/* Upload Float */
.ul-upload { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; }
.ul-upload::before { content:'↑'; font-size:calc(var(--ul-size)*0.6); color:var(--ul-color); animation:ul-upload-anim var(--ul-speed) ease-in-out infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }
@keyframes ul-upload-anim { 0%,100%{transform:translateY(0);opacity:.5;} 50%{transform:translateY(-30%);opacity:1;} }

/* Sync Rotate */
.ul-sync { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-sync::before, .ul-sync::after { content:''; position:absolute; border-radius:50%; border:var(--ul-border-width) solid transparent; }
.ul-sync::before { inset:0; border-top-color:var(--ul-color); border-right-color:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-sync::after { inset:20%; border-bottom-color:var(--ul-color); border-left-color:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite reverse; }

/* Typewriter */
.ul-typewriter { display:inline-flex; align-items:center; gap:2px; font-family:monospace; font-size:calc(var(--ul-size)*0.4); color:var(--ul-color); white-space:nowrap; }
.ul-typewriter::before { content:'Loading'; animation:ul-type-text var(--ul-speed) steps(7) infinite; overflow:hidden; display:inline-block; width:0; }
.ul-typewriter::after { content:'|'; animation:ul-blink calc(var(--ul-speed)*0.5) step-end infinite; }
@keyframes ul-type-text { 0%{width:0;} 100%{width:7ch;} }

/* Ellipsis */
.ul-ellipsis { display:inline-flex; align-items:flex-end; gap:3px; height:var(--ul-size); }
.ul-ellipsis .ul-d { width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); animation:ul-ellipsis-anim var(--ul-speed) ease-in-out infinite; }
.ul-ellipsis .ul-d:nth-child(1){animation-delay:0s;}
.ul-ellipsis .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.2);}
.ul-ellipsis .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.4);}
@keyframes ul-ellipsis-anim { 0%,100%{transform:translateY(0);opacity:.5;} 50%{transform:translateY(-40%);opacity:1;} }

/* Download Float */
.ul-download { width:var(--ul-size); height:var(--ul-size); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ul-download::before { content:'↓'; font-size:calc(var(--ul-size)*0.5); color:var(--ul-color); animation:ul-download-anim var(--ul-speed) ease-in-out infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }
.ul-download::after { content:''; width:60%; height:var(--ul-border-width); border-radius:2px; background:var(--ul-color); animation:ul-progress-slide var(--ul-speed) ease-in-out infinite; overflow:hidden; }
@keyframes ul-download-anim { 0%,100%{transform:translateY(-20%);opacity:.5;} 50%{transform:translateY(20%);opacity:1;} }

/* Swipe Gesture */
.ul-swipe { width:calc(var(--ul-size)*1.5); height:var(--ul-size); position:relative; display:flex; align-items:center; }
.ul-swipe::before { content:''; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); position:absolute; animation:ul-swipe-hand var(--ul-speed) ease-in-out infinite; box-shadow:0 0 6px var(--ul-color); }
.ul-swipe::after { content:''; position:absolute; right:0; width:40%; height:var(--ul-border-width); border-radius:2px; background:linear-gradient(90deg,transparent,var(--ul-color)); animation:ul-swipe-trail var(--ul-speed) ease-in-out infinite; }
@keyframes ul-swipe-hand { 0%{left:10%;opacity:.5;transform:scale(0.8);} 50%{opacity:1;transform:scale(1);} 100%{left:80%;opacity:.5;transform:scale(0.8);} }
@keyframes ul-swipe-trail { 0%,100%{opacity:0;} 50%{opacity:1;} }

/* Confetti Burst */
.ul-confetti { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-confetti .ul-d { position:absolute; width:6px; height:6px; animation:ul-confetti-fall calc(var(--ul-speed)*1.5) linear infinite; }
.ul-confetti .ul-d:nth-child(1){background:#ef4444; top:-5%;left:20%; animation-delay:0s; border-radius:50%;}
.ul-confetti .ul-d:nth-child(2){background:#3b82f6; top:-5%;left:60%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-confetti .ul-d:nth-child(3){background:#10b981; top:-5%;left:40%; animation-delay:calc(var(--ul-speed)*0.4); border-radius:50%;}
.ul-confetti .ul-d:nth-child(4){background:#f59e0b; top:-5%;left:80%; animation-delay:calc(var(--ul-speed)*0.1);}
.ul-confetti .ul-d:nth-child(5){background:#8b5cf6; top:-5%;left:10%; animation-delay:calc(var(--ul-speed)*0.3); border-radius:50%;}
.ul-confetti .ul-d:nth-child(6){background:#ec4899; top:-5%;left:50%; animation-delay:calc(var(--ul-speed)*0.5);}
@keyframes ul-confetti-fall { 0%{top:-10%;transform:rotate(0deg);opacity:1;} 100%{top:110%;transform:rotate(720deg) translateX(20px);opacity:0;} }

/* Tap Ripple */
.ul-tap-ripple { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; position:relative; }
.ul-tap-ripple::before { content:''; position:absolute; width:30%; height:30%; border-radius:50%; background:var(--ul-color); z-index:1; }
.ul-tap-ripple::after { content:''; position:absolute; width:30%; height:30%; border-radius:50%; border:2px solid var(--ul-color); animation:ul-tap-anim var(--ul-speed) ease-out infinite; }
.ul-tap-ripple .ul-d { position:absolute; width:30%; height:30%; border-radius:50%; border:2px solid var(--ul-color); animation:ul-tap-anim var(--ul-speed) ease-out infinite; animation-delay:calc(var(--ul-speed)*0.3); opacity:.6; }
@keyframes ul-tap-anim { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(3.5);opacity:0;} }

/* Countdown */
.ul-countdown { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-secondary-color); position:relative; display:flex; align-items:center; justify-content:center; }
.ul-countdown::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin calc(var(--ul-speed)*3) linear infinite; }
.ul-countdown::after { font-family:monospace; font-size:calc(var(--ul-size)*0.35); color:var(--ul-color); animation:ul-countdown-anim calc(var(--ul-speed)*3) steps(1) infinite; }
@keyframes ul-countdown-anim { 0%{content:'3';} 33%{content:'2';} 66%{content:'1';} 100%{content:'✓';} }

/* Firework */
.ul-firework { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-firework .ul-d { position:absolute; width:4px; height:30%; background:linear-gradient(var(--ul-color),transparent); top:50%; left:50%; transform-origin:0 0; border-radius:2px; animation:ul-firework-burst var(--ul-speed) ease-out infinite; opacity:0; }
.ul-firework .ul-d:nth-child(1){transform:rotate(0deg); animation-delay:0s;}
.ul-firework .ul-d:nth-child(2){transform:rotate(45deg); animation-delay:calc(var(--ul-speed)*0.05);}
.ul-firework .ul-d:nth-child(3){transform:rotate(90deg); animation-delay:calc(var(--ul-speed)*0.1);}
.ul-firework .ul-d:nth-child(4){transform:rotate(135deg); animation-delay:calc(var(--ul-speed)*0.15);}
.ul-firework .ul-d:nth-child(5){transform:rotate(180deg); animation-delay:calc(var(--ul-speed)*0.2);}
.ul-firework .ul-d:nth-child(6){transform:rotate(225deg); animation-delay:calc(var(--ul-speed)*0.25);}
.ul-firework .ul-d:nth-child(7){transform:rotate(270deg); animation-delay:calc(var(--ul-speed)*0.3);}
.ul-firework .ul-d:nth-child(8){transform:rotate(315deg); animation-delay:calc(var(--ul-speed)*0.35);}
@keyframes ul-firework-burst { 0%{height:0; opacity:1;} 50%{height:35%; opacity:1;} 100%{height:45%; opacity:0;} }

/* ── Extra Pack — 35 More Loaders ────────────────────────── */

/* Ring Split */
.ul-ring-split { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); border-bottom-color:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }

/* Ring Double */
.ul-ring-double { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-ring-double::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; }
.ul-ring-double::after { content:''; position:absolute; inset:calc(var(--ul-border-width)*2.5); border-radius:50%; border:var(--ul-border-width) solid transparent; border-bottom-color:var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite reverse; opacity:.7; }

/* Windmill */
.ul-windmill { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*2) linear infinite; }
.ul-windmill .ul-d { position:absolute; width:40%; height:40%; background:var(--ul-color); border-radius:50% 0; }
.ul-windmill .ul-d:nth-child(1){top:0; left:0;}
.ul-windmill .ul-d:nth-child(2){top:0; right:0; border-radius:0 50%; opacity:.8;}
.ul-windmill .ul-d:nth-child(3){bottom:0; right:0; border-radius:50% 0; opacity:.6;}
.ul-windmill .ul-d:nth-child(4){bottom:0; left:0; border-radius:0 50%; opacity:.4;}

/* Fan Blades */
.ul-fan { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin var(--ul-speed) linear infinite; }
.ul-fan .ul-d { position:absolute; width:var(--ul-border-width); height:45%; background:var(--ul-color); top:5%; left:calc(50% - var(--ul-border-width)/2); transform-origin:50% 100%; border-radius:var(--ul-border-width); }
.ul-fan .ul-d:nth-child(1){transform:rotate(0deg);}
.ul-fan .ul-d:nth-child(2){transform:rotate(72deg); opacity:.85;}
.ul-fan .ul-d:nth-child(3){transform:rotate(144deg); opacity:.7;}
.ul-fan .ul-d:nth-child(4){transform:rotate(216deg); opacity:.55;}
.ul-fan .ul-d:nth-child(5){transform:rotate(288deg); opacity:.4;}

/* Dots Orbit */
.ul-dots-orbit { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-dots-orbit::before { content:''; position:absolute; inset:0; border-radius:50%; border:1px dashed var(--ul-secondary-color); }
.ul-dots-orbit .ul-d { position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); top:calc(50% - var(--ul-dot-size)/2); left:calc(50% - var(--ul-dot-size)/2); transform-origin:0 0; }
.ul-dots-orbit .ul-d:nth-child(1){animation:ul-orbit-dot var(--ul-speed) linear infinite; margin-left:calc(var(--ul-size)*0.42);}
.ul-dots-orbit .ul-d:nth-child(2){animation:ul-orbit-dot var(--ul-speed) linear infinite; animation-delay:calc(var(--ul-speed)*-0.5); margin-left:calc(var(--ul-size)*0.42); opacity:.6;}
.ul-dots-orbit .ul-d:nth-child(3){animation:ul-orbit-dot var(--ul-speed) linear infinite; animation-delay:calc(var(--ul-speed)*-0.25); margin-left:calc(var(--ul-size)*0.42); opacity:.3;}
@keyframes ul-orbit-dot { 0%{transform:rotate(0deg) translateX(calc(var(--ul-size)*-0.42));} 100%{transform:rotate(360deg) translateX(calc(var(--ul-size)*-0.42));} }

/* Dot Trail */
.ul-dot-trail { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-dot-trail .ul-d { position:absolute; border-radius:50%; background:var(--ul-color); animation:ul-dot-trail-anim calc(var(--ul-speed)*1.5) ease-in-out infinite; }
.ul-dot-trail .ul-d:nth-child(1){width:100%;height:100%;inset:0; opacity:.1; animation-delay:0s;}
.ul-dot-trail .ul-d:nth-child(2){width:70%;height:70%;inset:15%; opacity:.25; animation-delay:calc(var(--ul-speed)*-0.2);}
.ul-dot-trail .ul-d:nth-child(3){width:45%;height:45%;inset:27.5%; opacity:.5; animation-delay:calc(var(--ul-speed)*-0.4);}
.ul-dot-trail .ul-d:nth-child(4){width:25%;height:25%;inset:37.5%; opacity:.8; animation-delay:calc(var(--ul-speed)*-0.6);}
.ul-dot-trail .ul-d:nth-child(5){width:12%;height:12%;inset:44%; animation-delay:calc(var(--ul-speed)*-0.8);}
@keyframes ul-dot-trail-anim { 0%,100%{transform:scale(0.8);} 50%{transform:scale(1.05);} }

/* Dots Clock */
.ul-dots-clock { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-dots-clock .ul-d { position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); }
.ul-dots-clock .ul-d:nth-child(1){top:0;left:50%;transform:translate(-50%,0); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:0s;}
.ul-dots-clock .ul-d:nth-child(2){top:13.4%;right:13.4%;transform:translate(50%,-50%); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:calc(var(--ul-speed)*0.083);}
.ul-dots-clock .ul-d:nth-child(3){top:50%;right:0;transform:translate(0,-50%); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:calc(var(--ul-speed)*0.166);}
.ul-dots-clock .ul-d:nth-child(4){bottom:13.4%;right:13.4%;transform:translate(50%,50%); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:calc(var(--ul-speed)*0.25);}
.ul-dots-clock .ul-d:nth-child(5){bottom:0;left:50%;transform:translate(-50%,0); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:calc(var(--ul-speed)*0.333);}
.ul-dots-clock .ul-d:nth-child(6){bottom:13.4%;left:13.4%;transform:translate(-50%,50%); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:calc(var(--ul-speed)*0.416);}
.ul-dots-clock .ul-d:nth-child(7){top:50%;left:0;transform:translate(0,-50%); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:calc(var(--ul-speed)*0.5);}
.ul-dots-clock .ul-d:nth-child(8){top:13.4%;left:13.4%;transform:translate(-50%,-50%); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; animation-delay:calc(var(--ul-speed)*0.583);}

/* Bar Fill */
.ul-bar-fill { width:calc(var(--ul-size)*2.5); height:calc(var(--ul-border-width)*2.5); border-radius:99px; background:var(--ul-secondary-color); position:relative; overflow:hidden; }
.ul-bar-fill::before { content:''; position:absolute; inset:0; background:var(--ul-color); border-radius:99px; animation:ul-bar-fill-anim calc(var(--ul-speed)*2) ease-in-out infinite; transform-origin:left; }
@keyframes ul-bar-fill-anim { 0%{transform:scaleX(0) translateX(0);} 50%{transform:scaleX(1);} 100%{transform:scaleX(0) translateX(100%);} }

/* Bars Random */
.ul-bars-random { display:inline-flex; align-items:flex-end; gap:3px; height:var(--ul-size); }
.ul-bars-random .ul-d { width:calc(var(--ul-size)/8); border-radius:2px 2px 0 0; background:var(--ul-color); animation:ul-bars-rand var(--ul-speed) ease-in-out infinite; }
.ul-bars-random .ul-d:nth-child(1){animation-delay:0s;}
.ul-bars-random .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.11);}
.ul-bars-random .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.22);}
.ul-bars-random .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.33);}
.ul-bars-random .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.44);}
.ul-bars-random .ul-d:nth-child(6){animation-delay:calc(var(--ul-speed)*0.55);}
.ul-bars-random .ul-d:nth-child(7){animation-delay:calc(var(--ul-speed)*0.66);}
@keyframes ul-bars-rand { 0%,100%{height:20%;} 25%{height:80%;} 50%{height:40%;} 75%{height:90%;} }

/* LED Bar */
.ul-led-bar { width:calc(var(--ul-size)*2.5); height:calc(var(--ul-border-width)*3); display:flex; gap:3px; align-items:center; }
.ul-led-bar .ul-d { flex:1; height:100%; border-radius:2px; background:var(--ul-color); animation:ul-led-blink var(--ul-speed) ease-in-out infinite; }
.ul-led-bar .ul-d:nth-child(1){animation-delay:0s;}
.ul-led-bar .ul-d:nth-child(2){animation-delay:calc(var(--ul-speed)*0.08);}
.ul-led-bar .ul-d:nth-child(3){animation-delay:calc(var(--ul-speed)*0.16);}
.ul-led-bar .ul-d:nth-child(4){animation-delay:calc(var(--ul-speed)*0.24);}
.ul-led-bar .ul-d:nth-child(5){animation-delay:calc(var(--ul-speed)*0.32);}
.ul-led-bar .ul-d:nth-child(6){animation-delay:calc(var(--ul-speed)*0.40);}
.ul-led-bar .ul-d:nth-child(7){animation-delay:calc(var(--ul-speed)*0.48);}
.ul-led-bar .ul-d:nth-child(8){animation-delay:calc(var(--ul-speed)*0.56);}
.ul-led-bar .ul-d:nth-child(9){animation-delay:calc(var(--ul-speed)*0.64);}
.ul-led-bar .ul-d:nth-child(10){animation-delay:calc(var(--ul-speed)*0.72);}
@keyframes ul-led-blink { 0%,100%{opacity:.15;} 50%{opacity:1; box-shadow:0 0 4px var(--ul-color);} }

/* Progress Radial */
.ul-progress-radial { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(var(--ul-color) 0%, var(--ul-secondary-color) 0%); animation:ul-radial-fill calc(var(--ul-speed)*2) ease-in-out infinite; }
@keyframes ul-radial-fill { 0%{background:conic-gradient(var(--ul-color) 0%, var(--ul-secondary-color) 0%);} 50%{background:conic-gradient(var(--ul-color) 100%, var(--ul-secondary-color) 0%);} 100%{background:conic-gradient(var(--ul-color) 0%, var(--ul-secondary-color) 0%);} }
.ul-progress-radial::after { content:''; position:absolute; inset:25%; border-radius:50%; background:var(--bg,#080d1a); }

/* Yin Yang */
.ul-yin-yang { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:linear-gradient(90deg, var(--ul-color) 50%, var(--ul-secondary-color) 50%); animation:ul-spin calc(var(--ul-speed)*2) linear infinite; position:relative; }
.ul-yin-yang::before { content:''; position:absolute; top:0; left:25%; width:50%; height:50%; border-radius:50%; background:var(--ul-color); border:calc(var(--ul-size)*0.15) solid var(--ul-secondary-color); }
.ul-yin-yang::after { content:''; position:absolute; bottom:0; left:25%; width:50%; height:50%; border-radius:50%; background:var(--ul-secondary-color); border:calc(var(--ul-size)*0.15) solid var(--ul-color); }

/* Target Pulse */
.ul-target { width:var(--ul-size); height:var(--ul-size); position:relative; display:flex; align-items:center; justify-content:center; }
.ul-target .ul-d { position:absolute; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-target-pulse var(--ul-speed) ease-out infinite; }
.ul-target .ul-d:nth-child(1){width:20%;height:20%;}
.ul-target .ul-d:nth-child(2){width:50%;height:50%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-target .ul-d:nth-child(3){width:80%;height:80%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-target .ul-d:nth-child(4){width:100%;height:100%; animation-delay:calc(var(--ul-speed)*0.6);}
@keyframes ul-target-pulse { 0%{opacity:.8;} 100%{opacity:0; transform:scale(1.1);} }

/* Reactor */
.ul-reactor { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-reactor::before { content:''; position:absolute; inset:35%; border-radius:50%; background:var(--ul-color); animation:ul-neon-glow-anim var(--ul-speed) ease-in-out infinite; }
.ul-reactor::after { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite; border-top-color:transparent; border-bottom-color:transparent; filter:drop-shadow(0 0 4px var(--ul-color)); }
.ul-reactor .ul-d { position:absolute; inset:15%; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-spin calc(var(--ul-speed)*0.7) linear infinite reverse; border-left-color:transparent; border-right-color:transparent; opacity:.7; }

/* Pulse Rings */
.ul-pulse-rings { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; position:relative; }
.ul-pulse-rings .ul-d { position:absolute; border-radius:50%; border:2px solid var(--ul-color); animation:ul-pulse-ring-out calc(var(--ul-speed)*2) ease-out infinite; }
.ul-pulse-rings .ul-d:nth-child(1){width:20%;height:20%; animation-delay:0s;}
.ul-pulse-rings .ul-d:nth-child(2){width:20%;height:20%; animation-delay:calc(var(--ul-speed)*0.5);}
.ul-pulse-rings .ul-d:nth-child(3){width:20%;height:20%; animation-delay:calc(var(--ul-speed)*1);}
@keyframes ul-pulse-ring-out { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(5);opacity:0;} }

/* Matrix Rain */
.ul-matrix { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; font-family:'Fira Code',monospace; font-size:calc(var(--ul-size)*0.12); color:var(--ul-color); }
.ul-matrix .ul-d { position:absolute; top:-100%; animation:ul-matrix-fall calc(var(--ul-speed)*1.5) linear infinite; opacity:.8; }
.ul-matrix .ul-d:nth-child(1){left:5%; animation-delay:0s;}
.ul-matrix .ul-d:nth-child(2){left:25%; animation-delay:calc(var(--ul-speed)*0.3); opacity:.5;}
.ul-matrix .ul-d:nth-child(3){left:50%; animation-delay:calc(var(--ul-speed)*0.6);}
.ul-matrix .ul-d:nth-child(4){left:70%; animation-delay:calc(var(--ul-speed)*0.15); opacity:.6;}
.ul-matrix .ul-d:nth-child(5){left:88%; animation-delay:calc(var(--ul-speed)*0.45); opacity:.4;}
@keyframes ul-matrix-fall { from{top:-20%;} to{top:110%;} }

/* Power Button */
.ul-power-btn { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:calc(var(--ul-border-width)*1.5) solid var(--ul-color); position:relative; animation:ul-neon-glow-pulse var(--ul-speed) ease-in-out infinite; }
.ul-power-btn::before { content:''; position:absolute; top:5%; left:50%; width:calc(var(--ul-border-width)*1.5); height:35%; background:var(--ul-color); transform:translateX(-50%); border-radius:2px; }
.ul-power-btn::after { content:''; position:absolute; inset:10%; border-radius:50%; border:calc(var(--ul-border-width)*1.5) solid var(--ul-color); clip-path:inset(0 0 50% 0); }

/* QR Scan */
.ul-qr-scan { width:var(--ul-size); height:var(--ul-size); border:2px solid var(--ul-secondary-color); border-radius:4px; position:relative; overflow:hidden; }
.ul-qr-scan::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--ul-color); animation:ul-scan var(--ul-speed) ease-in-out infinite alternate; box-shadow:0 0 8px var(--ul-color); }
.ul-qr-scan::after { content:''; position:absolute; inset:15%; background: repeating-linear-gradient(0deg,transparent,transparent 4px,var(--ul-secondary-color) 4px,var(--ul-secondary-color) 5px), repeating-linear-gradient(90deg,transparent,transparent 4px,var(--ul-secondary-color) 4px,var(--ul-secondary-color) 5px); opacity:.3; }

/* Meteor Shower */
.ul-meteor-shower { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; border-radius:8px; }
.ul-meteor-shower .ul-d { position:absolute; width:2px; border-radius:2px; background:linear-gradient(transparent,var(--ul-color)); animation:ul-meteor-fall calc(var(--ul-speed)*0.8) linear infinite; }
.ul-meteor-shower .ul-d:nth-child(1){height:25%;top:-30%;left:10%; animation-delay:0s;}
.ul-meteor-shower .ul-d:nth-child(2){height:20%;top:-30%;left:35%; animation-delay:calc(var(--ul-speed)*0.2); opacity:.7;}
.ul-meteor-shower .ul-d:nth-child(3){height:30%;top:-30%;left:60%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-meteor-shower .ul-d:nth-child(4){height:22%;top:-30%;left:80%; animation-delay:calc(var(--ul-speed)*0.1); opacity:.6;}
.ul-meteor-shower .ul-d:nth-child(5){height:18%;top:-30%;left:22%; animation-delay:calc(var(--ul-speed)*0.6); opacity:.5;}
@keyframes ul-meteor-fall { from{top:-30%;} to{top:110%;} }

/* Leaf Fall */
.ul-leaf-fall { width:var(--ul-size); height:var(--ul-size); position:relative; overflow:hidden; }
.ul-leaf-fall .ul-d { position:absolute; width:8px; height:10px; background:var(--ul-color); border-radius:50% 0; top:-15%; animation:ul-leaf-drift calc(var(--ul-speed)*2) ease-in-out infinite; }
.ul-leaf-fall .ul-d:nth-child(1){left:20%; animation-delay:0s;}
.ul-leaf-fall .ul-d:nth-child(2){left:50%; animation-delay:calc(var(--ul-speed)*0.4); opacity:.7; border-radius:0 50%;}
.ul-leaf-fall .ul-d:nth-child(3){left:75%; animation-delay:calc(var(--ul-speed)*0.8); opacity:.5;}
.ul-leaf-fall .ul-d:nth-child(4){left:35%; animation-delay:calc(var(--ul-speed)*1.2); opacity:.6; border-radius:0 50%;}
@keyframes ul-leaf-drift { 0%{top:-15%;transform:rotate(0) translateX(0);opacity:.8;} 100%{top:110%;transform:rotate(360deg) translateX(20px);opacity:0;} }

/* Petal Spin */
.ul-petal-spin { width:var(--ul-size); height:var(--ul-size); position:relative; animation:ul-spin calc(var(--ul-speed)*3) linear infinite; }
.ul-petal-spin .ul-d { position:absolute; width:35%; height:35%; border-radius:50% 50% 0 50%; background:var(--ul-color); animation:ul-bloom var(--ul-speed) ease-in-out infinite; }
.ul-petal-spin .ul-d:nth-child(1){top:0;left:32%;}
.ul-petal-spin .ul-d:nth-child(2){top:32%;right:0; transform:rotate(90deg); animation-delay:calc(var(--ul-speed)*0.25); opacity:.8;}
.ul-petal-spin .ul-d:nth-child(3){bottom:0;right:32%; transform:rotate(180deg); animation-delay:calc(var(--ul-speed)*0.5); opacity:.6;}
.ul-petal-spin .ul-d:nth-child(4){bottom:32%;left:0; transform:rotate(270deg); animation-delay:calc(var(--ul-speed)*0.75); opacity:.4;}
.ul-petal-spin::after { content:''; position:absolute; inset:38%; border-radius:50%; background:color-mix(in srgb, var(--ul-color) 80%, white); }

/* Heart Beat */
.ul-heart-beat { width:var(--ul-size); height:var(--ul-size); position:relative; display:flex; align-items:center; justify-content:center; }
.ul-heart-beat::before { content:'❤'; font-size:calc(var(--ul-size)*0.65); color:var(--ul-color); animation:ul-heartbeat-anim var(--ul-speed) ease-in-out infinite; filter:drop-shadow(0 0 4px var(--ul-color)); }
@keyframes ul-heartbeat-anim { 0%,100%{transform:scale(1);} 14%{transform:scale(1.25);} 28%{transform:scale(1);} 42%{transform:scale(1.15);} 70%{transform:scale(1);} }

/* Clock Spin */
.ul-clock-spin { width:var(--ul-size); height:var(--ul-size); border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); position:relative; animation:ul-spin calc(var(--ul-speed)*10) linear infinite; }
.ul-clock-spin::before { content:''; position:absolute; top:10%; left:calc(50% - 1px); width:2px; height:40%; background:var(--ul-color); transform-origin:bottom center; border-radius:2px; animation:ul-spin var(--ul-speed) linear infinite; }
.ul-clock-spin::after { content:''; position:absolute; top:20%; left:calc(50% - 1px); width:2px; height:30%; background:var(--ul-color); transform-origin:bottom center; border-radius:2px; animation:ul-spin calc(var(--ul-speed)*12) linear infinite; opacity:.7; }

/* Dice Roll */
.ul-dice { width:calc(var(--ul-size)*0.7); height:calc(var(--ul-size)*0.7); background:var(--ul-color); border-radius:8px; position:relative; animation:ul-dice-roll calc(var(--ul-speed)*2) ease-in-out infinite; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:3px; padding:4px; }
.ul-dice .ul-d { width:5px; height:5px; border-radius:50%; background:var(--bg,#080d1a); }
@keyframes ul-dice-roll { 0%,100%{transform:rotate(0deg);} 25%{transform:rotate(90deg);} 50%{transform:rotate(180deg);} 75%{transform:rotate(270deg);} }

/* Ripple Send */
.ul-ripple-send { width:var(--ul-size); height:var(--ul-size); display:flex; align-items:center; justify-content:center; position:relative; }
.ul-ripple-send::before { content:''; position:absolute; width:25%; height:25%; border-radius:50%; background:var(--ul-color); z-index:1; }
.ul-ripple-send .ul-d { position:absolute; border-radius:50%; border:2px solid var(--ul-color); animation:ul-ripple-send-out calc(var(--ul-speed)*1.5) ease-out infinite; }
.ul-ripple-send .ul-d:nth-child(1){width:25%;height:25%; animation-delay:0s;}
.ul-ripple-send .ul-d:nth-child(2){width:25%;height:25%; animation-delay:calc(var(--ul-speed)*0.4);}
.ul-ripple-send .ul-d:nth-child(3){width:25%;height:25%; animation-delay:calc(var(--ul-speed)*0.8);}
@keyframes ul-ripple-send-out { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(4.5);opacity:0;} }

/* Orbit Glow */
.ul-orbit-glow { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-orbit-glow::before { content:''; position:absolute; inset:30%; border-radius:50%; background:var(--ul-color); box-shadow:0 0 10px var(--ul-color), 0 0 20px var(--ul-color); animation:ul-pulse-anim var(--ul-speed) ease-in-out infinite; }
.ul-orbit-glow::after { content:''; position:absolute; width:var(--ul-dot-size); height:var(--ul-dot-size); border-radius:50%; background:var(--ul-color); box-shadow:0 0 8px var(--ul-color); top:0; left:calc(50% - var(--ul-dot-size)/2); transform-origin:50% calc(var(--ul-size)/2); animation:ul-spin var(--ul-speed) linear infinite; }

/* Flip Loader */
.ul-flip-loader { width:var(--ul-size); height:var(--ul-size); position:relative; display:flex; align-items:center; justify-content:center; }
.ul-flip-loader .ul-d { position:absolute; width:45%; height:45%; border-radius:50%; background:var(--ul-color); }
.ul-flip-loader .ul-d:nth-child(1){animation:ul-flip-l1 var(--ul-speed) ease-in-out infinite;}
.ul-flip-loader .ul-d:nth-child(2){animation:ul-flip-l2 var(--ul-speed) ease-in-out infinite; opacity:.6;}
@keyframes ul-flip-l1 { 0%,100%{transform:translateX(-55%) scale(1);} 50%{transform:translateX(55%) scale(0.8);} }
@keyframes ul-flip-l2 { 0%,100%{transform:translateX(55%) scale(0.8);} 50%{transform:translateX(-55%) scale(1);} }

/* Typing Cursor */
.ul-typing-cursor { display:inline-flex; align-items:center; gap:2px; font-family:monospace; font-size:calc(var(--ul-size)*0.35); color:var(--ul-color); }
.ul-typing-cursor::before { content:'LoaderX'; animation:ul-type-text calc(var(--ul-speed)*2) steps(7, end) infinite; overflow:hidden; display:inline-block; width:0; white-space:nowrap; }
.ul-typing-cursor::after { content:'|'; animation:ul-blink calc(var(--ul-speed)*0.5) step-end infinite; color:var(--ul-color); }

/* Circular Progress */
.ul-circular-progress { width:var(--ul-size); height:var(--ul-size); border-radius:50%; background:conic-gradient(var(--ul-color) var(--p, 0%), var(--ul-secondary-color) 0%); animation:ul-circ-prog calc(var(--ul-speed)*2) ease-in-out infinite; position:relative; }
.ul-circular-progress::after { content:''; position:absolute; inset:15%; border-radius:50%; background:var(--bg,#080d1a); }
@keyframes ul-circ-prog { 0%{background:conic-gradient(var(--ul-color) 0%, var(--ul-secondary-color) 0%);} 50%{background:conic-gradient(var(--ul-color) 100%, var(--ul-secondary-color) 0%);} 100%{background:conic-gradient(var(--ul-color) 0%, var(--ul-secondary-color) 0%);} }

/* Dual Ring Pulse */
.ul-dual-ring-pulse { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-dual-ring-pulse::before { content:''; position:absolute; inset:0; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite, ul-pulse-anim var(--ul-speed) ease-in-out infinite; }
.ul-dual-ring-pulse::after { content:''; position:absolute; inset:20%; border-radius:50%; border:var(--ul-border-width) solid var(--ul-color); animation:ul-spin var(--ul-speed) linear infinite reverse, ul-pulse-anim var(--ul-speed) ease-in-out infinite; opacity:.6; }

/* Stretching */
.ul-stretching { display:inline-flex; align-items:center; gap:4px; height:var(--ul-size); }
.ul-stretching .ul-d { width:calc(var(--ul-size)/6); border-radius:4px; background:var(--ul-color); animation:ul-stretch-anim var(--ul-speed) ease-in-out infinite; }
.ul-stretching .ul-d:nth-child(1){height:40%; animation-delay:0s;}
.ul-stretching .ul-d:nth-child(2){height:70%; animation-delay:calc(var(--ul-speed)*0.1);}
.ul-stretching .ul-d:nth-child(3){height:100%; animation-delay:calc(var(--ul-speed)*0.2);}
.ul-stretching .ul-d:nth-child(4){height:70%; animation-delay:calc(var(--ul-speed)*0.3);}
.ul-stretching .ul-d:nth-child(5){height:40%; animation-delay:calc(var(--ul-speed)*0.4);}
@keyframes ul-stretch-anim { 0%,100%{transform:scaleY(0.5); opacity:.5;} 50%{transform:scaleY(1); opacity:1;} }

/* Bouncing Bar */
.ul-bouncing-bar { width:calc(var(--ul-size)*1.5); height:var(--ul-size); position:relative; }
.ul-bouncing-bar::before { content:''; position:absolute; bottom:0; left:0; right:0; height:calc(var(--ul-border-width)*2); background:var(--ul-secondary-color); border-radius:2px; }
.ul-bouncing-bar::after { content:''; position:absolute; bottom:calc(var(--ul-border-width)*2); left:0; width:40%; height:40%; background:var(--ul-color); border-radius:4px 4px 0 0; animation:ul-bar-bounce var(--ul-speed) ease-in-out infinite; }
@keyframes ul-bar-bounce { 0%,100%{transform:translateX(0) scaleY(1);} 25%{transform:translateX(150%) scaleY(0.7);} 50%{transform:translateX(0) scaleY(1);} 75%{transform:translateX(-25%) scaleY(1.2);} }

/* Spiral In */
.ul-spiral-in { width:var(--ul-size); height:var(--ul-size); position:relative; }
.ul-spiral-in .ul-d { position:absolute; border-radius:50%; border:var(--ul-border-width) solid transparent; border-top-color:var(--ul-color); }
.ul-spiral-in .ul-d:nth-child(1){inset:0; animation:ul-spin var(--ul-speed) linear infinite; opacity:1;}
.ul-spiral-in .ul-d:nth-child(2){inset:15%; animation:ul-spin calc(var(--ul-speed)*0.8) linear infinite; opacity:.8; animation-delay:calc(var(--ul-speed)*-0.1);}
.ul-spiral-in .ul-d:nth-child(3){inset:30%; animation:ul-spin calc(var(--ul-speed)*0.6) linear infinite; opacity:.6; animation-delay:calc(var(--ul-speed)*-0.2);}
.ul-spiral-in .ul-d:nth-child(4){inset:45%; animation:ul-spin calc(var(--ul-speed)*0.4) linear infinite; opacity:.4;}

/* ── Unique Robotic, Science & Technology Loaders (290 total) ── */

.ul-robo-arm-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-1::before {
  content: '';
  position: absolute;
  left: 10%;
  width: 80%;
  height: var(--ul-border-width);
  background: var(--ul-color);
  transform-origin: left center;
  animation: ul-robo-arm-1 1.5s ease-in-out infinite alternate;
}

.ul-robo-arm-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-2::before, .ul-robo-arm-2::after {
  content: '';
  position: absolute;
  width: 35%;
  height: var(--ul-border-width);
  background: var(--ul-color);
}
.ul-robo-arm-2::before { left: 10%; transform-origin: left center; animation: ul-robo-claw-a 1.2s ease-in-out infinite alternate; }
.ul-robo-arm-2::after { right: 10%; transform-origin: right center; animation: ul-robo-claw-b 1.2s ease-in-out infinite alternate; }

.ul-robo-arm-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-3::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 80%;
  background: var(--ul-color);
  transform-origin: bottom center;
  animation: ul-robo-crane 2s ease-in-out infinite alternate;
}

.ul-robo-arm-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-4::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
  border-top-color: transparent;
  animation: ul-robo-gear 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.ul-robo-arm-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-5::before {
  content: '⚙️';
  font-size: calc(var(--ul-size) * 0.6);
  animation: ul-robo-pivot 1s steps(6) infinite;
}

.ul-robo-arm-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-6::before, .ul-robo-arm-6::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 4px;
  background: var(--ul-color);
  transform-origin: center;
  animation: ul-robo-sciss-a 1s ease-in-out infinite alternate;
}
.ul-robo-arm-6::after { animation-name: ul-robo-sciss-b; }

.ul-robo-arm-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-7::before {
  content: '';
  width: 70%;
  height: 10px;
  background: var(--ul-secondary-color);
  border-radius: 5px;
}
.ul-robo-arm-7::after {
  content: '🤖';
  position: absolute;
  left: 10%;
  font-size: 16px;
  animation: ul-robo-track 1.8s ease-in-out infinite alternate;
}

.ul-robo-arm-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-8::before {
  content: '';
  width: 50%;
  height: 50%;
  border-left: var(--ul-border-width) solid var(--ul-color);
  border-bottom: var(--ul-border-width) solid var(--ul-color);
  animation: ul-robo-l-arm 1.4s ease-in-out infinite alternate;
}

.ul-robo-arm-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-robo-arm-9::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ul-color);
  animation: ul-robo-suction 1.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.ul-robo-arm-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
  overflow: hidden;
}
.ul-robo-arm-10::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--ul-color);
  box-shadow: 0 0 8px var(--ul-color);
  animation: ul-robo-laser-scan 1.5s ease-in-out infinite alternate;
}

.ul-servo-turn-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-1::before {
  content: '';
  width: 80%;
  height: 80%;
  border: var(--ul-border-width) solid var(--ul-secondary-color);
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-servo-step 1.2s steps(8) infinite;
}

.ul-servo-turn-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-2::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 45%;
  background: var(--ul-color);
  bottom: 50%;
  transform-origin: bottom center;
  animation: ul-servo-sweep 1.4s ease-in-out infinite alternate;
}

.ul-servo-turn-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-3::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ul-color);
  animation: ul-servo-eccentric 1s linear infinite;
}

.ul-servo-turn-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-servo-vibrate 0.6s linear infinite;
}

.ul-servo-turn-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-5::before, .ul-servo-turn-5::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: var(--ul-border-width) solid transparent;
}
.ul-servo-turn-5::before { width: 85%; height: 85%; border-top-color: var(--ul-color); animation: ul-spin 1.5s linear infinite; }
.ul-servo-turn-5::after { width: 55%; height: 55%; border-bottom-color: var(--ul-secondary-color); animation: ul-spin 1s linear infinite reverse; }

.ul-servo-turn-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-6::before {
  content: '';
  width: 70%;
  height: 70%;
  background: conic-gradient(from 0deg, var(--ul-color), transparent 70%);
  border-radius: 50%;
  animation: ul-spin 1.2s linear infinite;
}

.ul-servo-turn-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-7::before {
  content: '👉';
  font-size: 22px;
  animation: ul-servo-pointing 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}

.ul-servo-turn-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-8::before {
  content: '';
  width: 80%;
  height: 80%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: ul-servo-morph 2s linear infinite alternate;
}

.ul-servo-turn-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-servo-turn-9::before {
  content: '';
  width: 8px;
  height: 50%;
  background: var(--ul-color);
  border-radius: 4px;
  animation: ul-servo-piston 0.8s ease-in-out infinite alternate;
}

.ul-servo-turn-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 6px;
}
.ul-servo-turn-10::before {
  content: '00';
  font-family: monospace;
  font-size: 16px;
  color: var(--ul-color);
  animation: ul-servo-digital 1.2s steps(4) infinite;
}

.ul-android-eye-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-android-eye-1::before {
  content: '';
  width: 50%;
  height: 50%;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--ul-color);
  animation: ul-eye-pulse 1.2s ease-in-out infinite alternate;
}

.ul-android-eye-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  overflow: hidden;
}
.ul-android-eye-2::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--ul-color);
  animation: ul-eye-scan 2s linear infinite;
}

.ul-android-eye-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
}
.ul-android-eye-3::before {
  content: '🎯';
  font-size: 20px;
  animation: ul-eye-shutter 1.5s ease-in-out infinite alternate;
}

.ul-android-eye-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-android-eye-4::before, .ul-android-eye-4::after {
  content: '';
  position: absolute;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-eye-ripple 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
.ul-android-eye-4::after { animation-delay: 0.8s; }

.ul-android-eye-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-android-eye-5::before {
  content: '';
  width: 60%;
  height: 60%;
  background: var(--ul-color);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  animation: ul-eye-aperture 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.ul-android-eye-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-eye-glitch 0.8s step-end infinite;
}

.ul-android-eye-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-eye-blink 2.2s linear infinite;
}

.ul-android-eye-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-android-eye-8::before {
  content: '🤖';
  font-size: 26px;
  animation: ul-eye-robot-bounce 1s ease-in-out infinite alternate;
}

.ul-android-eye-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-android-eye-9::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-eye-orbit-dot 1.2s linear infinite;
}

.ul-android-eye-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 3px double var(--ul-color);
  border-radius: 50%;
}
.ul-android-eye-10::before {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: var(--ul-secondary-color);
  animation: ul-eye-iris-glow 1.5s ease-in-out infinite alternate;
}

.ul-bot-face-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 8px;
}
.ul-bot-face-1::before {
  content: '● ●';
  color: var(--ul-color);
  font-size: 14px;
  animation: ul-face-blink 3s step-end infinite;
}

.ul-bot-face-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-bot-face-2::before {
  content: '';
  width: 50%;
  height: 8px;
  border: 2px solid var(--ul-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  animation: ul-face-smile 1.2s ease-in-out infinite alternate;
}

.ul-bot-face-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 6px;
}
.ul-bot-face-3::before {
  content: '...';
  font-family: monospace;
  font-size: 20px;
  color: var(--ul-color);
  animation: ul-face-typing 1.2s steps(4) infinite;
}

.ul-bot-face-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 6px;
}
.ul-bot-face-4::before {
  content: '';
  position: absolute;
  top: -8px;
  width: 2px;
  height: 8px;
  background: var(--ul-color);
}
.ul-bot-face-4::after {
  content: '';
  position: absolute;
  top: -12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ul-color);
  animation: ul-face-antenna 0.6s ease-in-out infinite alternate;
}

.ul-bot-face-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 8px;
  animation: ul-face-bob 1s ease-in-out infinite alternate;
}

.ul-bot-face-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 6px;
}
.ul-bot-face-6::before {
  content: '';
  width: 60%;
  height: 4px;
  background: var(--ul-color);
  animation: ul-face-mouth 0.8s ease-in-out infinite alternate;
}

.ul-bot-face-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-bot-face-7::before {
  content: '⚙️';
  font-size: 18px;
  animation: ul-face-eye-spin 1.5s linear infinite;
}

.ul-bot-face-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 12px;
}
.ul-bot-face-8::before {
  content: '❤️';
  font-size: 16px;
  animation: ul-face-love 0.8s ease-in-out infinite alternate;
}

.ul-bot-face-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-bot-face-9::before {
  content: '💬';
  font-size: 14px;
  animation: ul-face-chat 1.2s ease-in-out infinite alternate;
}

.ul-bot-face-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 8px;
  animation: ul-face-tilt 2s ease-in-out infinite alternate;
}

.ul-gear-train-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 3px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 2s linear infinite;
}

.ul-gear-train-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 3px dotted var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 1.5s linear infinite reverse;
}

.ul-gear-train-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gear-train-3::before {
  content: '⚙️';
  font-size: 28px;
  animation: ul-spin 2s linear infinite;
}

.ul-gear-train-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gear-train-4::before, .ul-gear-train-4::after {
  content: '⚙️';
  position: absolute;
  font-size: 16px;
}
.ul-gear-train-4::before { left: 4px; animation: ul-spin 1.2s linear infinite; }
.ul-gear-train-4::after { right: 4px; animation: ul-spin 1.2s linear infinite reverse; }

.ul-gear-train-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-gear-train-5::before {
  content: '';
  position: absolute;
  inset: 15%;
  border: 3px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 1s linear infinite;
}

.ul-gear-train-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gear-train-6::before {
  content: '⚙️';
  font-size: 22px;
  animation: ul-gear-step 1.8s steps(8) infinite;
}

.ul-gear-train-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.4);
  border: 2px solid var(--ul-secondary-color);
  border-radius: 20px;
}
.ul-gear-train-7::before {
  content: '';
  position: absolute;
  left: 4px;
  width: 14px;
  height: 14px;
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 1s linear infinite;
}
.ul-gear-train-7::after {
  content: '';
  position: absolute;
  right: 4px;
  width: 14px;
  height: 14px;
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 1s linear infinite;
}

.ul-gear-train-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 100px;
}
.ul-gear-train-8::before {
  content: '⚙️';
  font-size: 28px;
  transform: rotateX(60deg);
  animation: ul-gear-3d 2.5s linear infinite;
}

.ul-gear-train-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gear-train-9::before {
  content: '⚙️ ⚙️';
  font-size: 12px;
  animation: ul-gear-double 1.2s ease-in-out infinite alternate;
}

.ul-gear-train-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 4px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-gear-scale 1.2s ease-in-out infinite alternate;
}

.ul-actuator-x-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-actuator-x-1::before {
  content: '';
  position: absolute;
  left: 5%;
  width: 30%;
  height: 80%;
  background: var(--ul-color);
  animation: ul-act-piston 1.2s ease-in-out infinite alternate;
}

.ul-actuator-x-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-actuator-x-2::before, .ul-actuator-x-2::after {
  content: '';
  position: absolute;
  width: 25%;
  height: 80%;
  background: var(--ul-color);
}
.ul-actuator-x-2::before { left: 5%; animation: ul-act-opp-a 1.2s ease-in-out infinite alternate; }
.ul-actuator-x-2::after { right: 5%; animation: ul-act-opp-b 1.2s ease-in-out infinite alternate; }

.ul-actuator-x-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-actuator-x-3::before {
  content: '';
  position: absolute;
  bottom: 5%;
  width: 80%;
  height: 30%;
  background: var(--ul-color);
  animation: ul-act-vert 1s ease-in-out infinite alternate;
}

.ul-actuator-x-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-actuator-x-4::before {
  content: '';
  width: 60%;
  height: 60%;
  background: var(--ul-color);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: ul-act-diamond 1.4s ease-in-out infinite alternate;
}

.ul-actuator-x-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
}
.ul-actuator-x-5::before {
  content: '';
  position: absolute;
  inset: 20%;
  border: 2px solid var(--ul-color);
  animation: ul-spin 1.5s linear infinite;
}

.ul-actuator-x-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-left: 2px solid var(--ul-color);
  border-right: 2px solid var(--ul-color);
}
.ul-actuator-x-6::before {
  content: '';
  width: 6px;
  height: 80%;
  background: var(--ul-color);
  animation: ul-act-cross 0.8s ease-in-out infinite alternate;
}

.ul-actuator-x-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-actuator-x-7::before {
  content: '➔';
  color: var(--ul-color);
  font-size: 20px;
  animation: ul-act-arrow 1.2s ease-in-out infinite alternate;
}

.ul-actuator-x-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-actuator-x-8::before {
  content: '';
  width: 80%;
  height: 10px;
  background: var(--ul-secondary-color);
  border-radius: 5px;
}
.ul-actuator-x-8::after {
  content: '';
  position: absolute;
  left: 10%;
  width: 20%;
  height: 10px;
  background: var(--ul-color);
  border-radius: 5px;
  animation: ul-act-progress 1.2s linear infinite alternate;
}

.ul-actuator-x-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-actuator-x-9::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ul-color);
  animation: ul-act-spring 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}

.ul-actuator-x-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-top: 2px solid var(--ul-color);
  border-bottom: 2px solid var(--ul-color);
}
.ul-actuator-x-10::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 60%;
  background: var(--ul-color);
  animation: ul-act-slice 1.2s ease-in-out infinite alternate;
}

.ul-cyber-tread-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.3);
  height: calc(var(--ul-size) * 0.5);
  border: 2px solid var(--ul-color);
  border-radius: 10px;
}
.ul-cyber-tread-1::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px dashed var(--ul-color);
  border-radius: 8px;
  animation: ul-spin 1.2s linear infinite;
}

.ul-cyber-tread-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.3);
  height: calc(var(--ul-size) * 0.5);
  border: 2px solid var(--ul-secondary-color);
  border-radius: 10px;
}
.ul-cyber-tread-2::before {
  content: '';
  position: absolute;
  left: 2px;
  width: 8px;
  height: 80%;
  background: var(--ul-color);
  border-radius: 2px;
  animation: ul-tread-slide 1.2s ease-in-out infinite alternate;
}

.ul-cyber-tread-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyber-tread-3::before {
  content: '|||||';
  letter-spacing: 2px;
  color: var(--ul-color);
  font-family: monospace;
  animation: ul-tread-letters 0.6s linear infinite;
}

.ul-cyber-tread-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-bottom: 2px solid var(--ul-color);
  width: var(--ul-size);
  height: 20px;
}
.ul-cyber-tread-4::before {
  content: '• • •';
  color: var(--ul-color);
  animation: ul-tread-dots 1s linear infinite;
}

.ul-cyber-tread-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-cyber-tread-5::before {
  content: '';
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--ul-color), transparent);
  animation: ul-tread-gradient 1.2s linear infinite;
}

.ul-cyber-tread-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-cyber-tread-6::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed var(--ul-color);
  animation: ul-spin 1.5s linear infinite;
}

.ul-cyber-tread-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyber-tread-7::before {
  content: '';
  width: 80%;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--ul-color), var(--ul-color) 4px, transparent 4px, transparent 8px);
  animation: ul-tread-pattern 0.8s linear infinite;
}

.ul-cyber-tread-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-cyber-tread-8::before {
  content: '▼';
  color: var(--ul-color);
  animation: ul-tread-bounce 1.2s ease-in-out infinite;
}

.ul-cyber-tread-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.2);
  height: calc(var(--ul-size) * 0.6);
  border: 2px solid var(--ul-color);
  border-radius: 12px;
  overflow: hidden;
}
.ul-cyber-tread-9::before {
  content: '<<<<';
  color: var(--ul-secondary-color);
  letter-spacing: 2px;
  animation: ul-tread-chevron 1s linear infinite;
}

.ul-drone-flight-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-drone-flight-1::before {
  content: '';
  width: 90%;
  height: 2px;
  background: var(--ul-color);
  animation: ul-spin 0.2s linear infinite;
}

.ul-drone-flight-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-drone-flight-2::before {
  content: '';
  width: 90%;
  height: 90%;
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 0.3s linear infinite reverse;
}

.ul-drone-flight-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-drone-flight-3::before {
  content: '';
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--ul-color);
  border-bottom-color: var(--ul-color);
  animation: ul-spin 0.4s ease-in-out infinite;
}

.ul-drone-flight-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 150px;
}
.ul-drone-flight-4::before {
  content: '';
  width: 80%;
  height: 80%;
  border: 3px solid var(--ul-color);
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: ul-drone-rotor-3d 0.5s linear infinite;
}

.ul-drone-flight-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-drone-flight-5::before, .ul-drone-flight-5::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 2px;
  background: var(--ul-color);
  animation: ul-spin 0.3s linear infinite;
}
.ul-drone-flight-5::after { transform: rotate(90deg); }

.ul-drone-flight-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-drone-flight-6::before {
  content: '';
  position: absolute;
  inset: 15%;
  background: var(--ul-color);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: ul-drone-target 1s ease-in-out infinite alternate;
}

.ul-drone-flight-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-drone-flight-7::before {
  content: '✈️';
  font-size: 24px;
  animation: ul-drone-bounce 1.2s ease-in-out infinite alternate;
}

.ul-drone-flight-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-drone-flight-8::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-drone-gps 0.6s linear infinite alternate;
}

.ul-drone-flight-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-drone-flight-9::before {
  content: '';
  width: 90%;
  height: 90%;
  border: 4px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-drone-flight-9::after {
  content: '';
  position: absolute;
  top: 5px;
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-drone-orbit 0.4s linear infinite;
  transform-origin: center calc(var(--ul-size)/2 - 5px);
}

.ul-cyborg-heart-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  clip-path: polygon(50% 15%, 80% 0%, 100% 30%, 50% 95%, 0% 30%, 20% 0%);
  background: var(--ul-color);
  animation: ul-heart-pulse 1s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.ul-cyborg-heart-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  clip-path: polygon(50% 15%, 80% 0%, 100% 30%, 50% 95%, 0% 30%, 20% 0%);
  background: var(--ul-secondary-color);
}
.ul-cyborg-heart-2::before {
  content: '';
  position: absolute;
  inset: 4px;
  clip-path: polygon(50% 15%, 80% 0%, 100% 30%, 50% 95%, 0% 30%, 20% 0%);
  background: var(--ul-color);
  animation: ul-heart-pulse-inner 0.8s ease-in-out infinite alternate;
}

.ul-cyborg-heart-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyborg-heart-3::before {
  content: '❤️';
  font-size: 32px;
  animation: ul-heart-beat-steps 1.2s steps(3) infinite;
}

.ul-cyborg-heart-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyborg-heart-4::before {
  content: '❤️';
  font-size: 28px;
  animation: ul-spin 1.5s linear infinite;
}

.ul-cyborg-heart-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-cyborg-heart-5::before {
  content: '❤️';
  font-size: 20px;
  animation: ul-heart-tilt 0.5s ease-in-out infinite alternate;
}

.ul-cyborg-heart-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  clip-path: polygon(50% 15%, 80% 0%, 100% 30%, 50% 95%, 0% 30%, 20% 0%);
  background: var(--ul-color);
  animation: ul-heart-flicker 0.8s step-end infinite;
}

.ul-cyborg-heart-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyborg-heart-7::before {
  content: '❤️';
  font-size: 24px;
  text-shadow: 0 0 8px var(--ul-color);
  animation: ul-heart-glow 1.4s ease-in-out infinite;
}

.ul-cyborg-heart-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 100px;
}
.ul-cyborg-heart-8::before {
  content: '❤️';
  font-size: 30px;
  animation: ul-heart-3d 2s linear infinite;
}

.ul-cyborg-heart-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  clip-path: polygon(50% 15%, 80% 0%, 100% 30%, 50% 95%, 0% 30%, 20% 0%);
  background: linear-gradient(135deg, var(--ul-color), var(--ul-secondary-color));
  animation: ul-heart-skew 1.2s ease-in-out infinite alternate;
}

.ul-sensor-sonar-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-sensor-sonar-1::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-sonar-pulse-1 1.2s ease-out infinite;
}

.ul-sensor-sonar-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-sensor-sonar-2::before, .ul-sensor-sonar-2::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-sonar-pulse-1 1.6s ease-out infinite;
}
.ul-sensor-sonar-2::after { animation-delay: 0.8s; }

.ul-sensor-sonar-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-sensor-sonar-3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ul-color));
  transform-origin: left center;
  animation: ul-spin 1.5s linear infinite;
}

.ul-sensor-sonar-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-sensor-sonar-4::before {
  content: '🎯';
  font-size: 16px;
  animation: ul-sonar-target-pulse 1s ease-in-out infinite alternate;
}

.ul-sensor-sonar-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-sensor-sonar-5::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ul-color);
  animation: ul-sonar-ping 1.2s ease-out infinite;
}

.ul-sensor-sonar-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-sonar-ripple 2s infinite linear;
}

.ul-sensor-sonar-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-sensor-sonar-7::before {
  content: '';
  width: 80%;
  height: 80%;
  border: 3px solid transparent;
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-sonar-osc 1.2s ease-in-out infinite alternate;
}

.ul-sensor-sonar-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
}
.ul-sensor-sonar-8::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: -10px -10px var(--ul-color), 10px -10px var(--ul-color), -10px 10px var(--ul-color), 10px 10px var(--ul-color);
  animation: ul-sonar-grid-spin 1.4s ease-in-out infinite alternate;
}

.ul-sensor-sonar-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-sensor-sonar-9::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-sonar-sweep-dot 1.5s linear infinite;
  transform-origin: 50% 45%;
}

.ul-quantum-spin-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 120px;
}
.ul-quantum-spin-1::before {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  transform: rotateX(65deg);
  animation: ul-quantum-3d-spin 1.2s linear infinite;
}

.ul-quantum-spin-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 150px;
}
.ul-quantum-spin-2::before, .ul-quantum-spin-2::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  border: 2px solid transparent;
  border-radius: 50%;
}
.ul-quantum-spin-2::before { border-top-color: var(--ul-color); transform: rotateX(45deg); animation: ul-spin 1s linear infinite; }
.ul-quantum-spin-2::after { border-bottom-color: var(--ul-secondary-color); transform: rotateY(45deg); animation: ul-spin 1.5s linear infinite reverse; }

.ul-quantum-spin-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-quantum-spin-3::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-quantum-wave 1.5s ease-in-out infinite alternate;
}

.ul-quantum-spin-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-quantum-spin-4::before {
  content: '';
  width: 70%;
  height: 70%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
  animation: ul-quantum-flip-y 1.4s ease-in-out infinite;
}

.ul-quantum-spin-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-quantum-spin-5::before, .ul-quantum-spin-5::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
}
.ul-quantum-spin-5::before { animation: ul-quantum-entangled-a 1.2s ease-in-out infinite alternate; }
.ul-quantum-spin-5::after { animation: ul-quantum-entangled-b 1.2s ease-in-out infinite alternate;
  background: var(--ul-secondary-color);
}

.ul-quantum-spin-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-quantum-spin-6::before {
  content: '⚛️';
  font-size: 26px;
  animation: ul-quantum-icon-pulse 1.5s ease-in-out infinite alternate;
}

.ul-quantum-spin-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-quantum-spin-7::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-quantum-spin-orbit 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.ul-quantum-spin-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-quantum-spin-8::before {
  content: '';
  width: 60%;
  height: 60%;
  border: var(--ul-border-width) solid var(--ul-color);
  animation: ul-quantum-nest-square 1.5s ease-in-out infinite alternate;
}

.ul-quantum-spin-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-quantum-spin-9::before {
  content: 'Ψ';
  font-size: 22px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-quantum-psi-flip 1.8s steps(2) infinite;
}

.ul-quantum-spin-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-quantum-spin-10::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-quantum-tunneling 1s ease-out infinite;
}

.ul-molecule-bond-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-1::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: -15px 0 0 var(--ul-secondary-color), 15px 0 0 var(--ul-secondary-color);
  animation: ul-spin 1.5s linear infinite;
}

.ul-molecule-bond-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-2::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-mol-stretch 1s ease-in-out infinite alternate;
}

.ul-molecule-bond-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-molecule-bond-3::before {
  content: 'H2O';
  font-family: sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-mol-h2o 1.5s steps(2) infinite alternate;
}

.ul-molecule-bond-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-4::before {
  content: '';
  width: 60%;
  height: 60%;
  border: var(--ul-border-width) solid var(--ul-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: ul-spin 2s linear infinite;
}

.ul-molecule-bond-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-5::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-mol-ionic 1.4s ease-in-out infinite alternate;
}

.ul-molecule-bond-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-6::before {
  content: '';
  width: 90%;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--ul-color), var(--ul-color) 4px, transparent 4px, transparent 10px);
  animation: ul-mol-polymer 1s linear infinite;
}

.ul-molecule-bond-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-7::before {
  content: 'CO2';
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ul-color);
  animation: ul-mol-co2 1.2s ease-in-out infinite alternate;
}

.ul-molecule-bond-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-8::before, .ul-molecule-bond-8::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: var(--ul-border-width) solid var(--ul-color);
}
.ul-molecule-bond-8::before { animation: ul-mol-covalent-a 1.2s ease-in-out infinite alternate; }
.ul-molecule-bond-8::after { animation: ul-mol-covalent-b 1.2s ease-in-out infinite alternate; }

.ul-molecule-bond-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-9::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 -12px 0 var(--ul-color), 0 12px 0 var(--ul-color), -12px 0 0 var(--ul-color), 12px 0 0 var(--ul-color);
  animation: ul-mol-lattice 1.6s ease-in-out infinite alternate;
}

.ul-molecule-bond-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-molecule-bond-10::before {
  content: '⚛️';
  font-size: 24px;
  animation: ul-mol-shake 0.5s ease-in-out infinite alternate;
}

.ul-cosmic-orbit-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-cosmic-orbit-1::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-orbit-planetary 1.5s linear infinite;
  transform-origin: center calc(var(--ul-size)/2);
  top: 0;
}

.ul-cosmic-orbit-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cosmic-orbit-2::before {
  content: '☄️';
  font-size: 24px;
  animation: ul-spin 1s linear infinite;
}

.ul-cosmic-orbit-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cosmic-orbit-3::before {
  content: '';
  width: 70%;
  height: 70%;
  background: conic-gradient(from 180deg, var(--ul-color), transparent 70%);
  border-radius: 50%;
  animation: ul-spin 1.2s linear infinite;
}

.ul-cosmic-orbit-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cosmic-orbit-4::before, .ul-cosmic-orbit-4::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}
.ul-cosmic-orbit-4::before { width: 90%; height: 40%; border-top-color: var(--ul-color); border-bottom-color: var(--ul-color); transform: rotate(-30deg); animation: ul-spin 2s linear infinite; }
.ul-cosmic-orbit-4::after { width: 20%; height: 20%; background: var(--ul-color); }

.ul-cosmic-orbit-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cosmic-orbit-5::before {
  content: '☀️';
  font-size: 18px;
  animation: ul-orbit-sun 2s ease-in-out infinite alternate;
}
.ul-cosmic-orbit-5::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ul-secondary-color);
  border-radius: 50%;
  animation: ul-orbit-planet-fast 1s linear infinite;
  transform-origin: center 16px;
}

.ul-cosmic-orbit-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 120px;
}
.ul-cosmic-orbit-6::before {
  content: '';
  width: 80%;
  height: 80%;
  border: var(--ul-border-width) dashed var(--ul-color);
  border-radius: 50%;
  transform: rotateX(75deg);
  animation: ul-orbit-perspective-dash 2s linear infinite;
}

.ul-cosmic-orbit-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cosmic-orbit-7::before, .ul-cosmic-orbit-7::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.ul-cosmic-orbit-7::before { width: 60%; height: 60%; background: var(--ul-color); opacity: 0.9; }
.ul-cosmic-orbit-7::after { width: 64%; height: 64%; background: #000; animation: ul-orbit-eclipse 3s ease-in-out infinite alternate; }

.ul-cosmic-orbit-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cosmic-orbit-8::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 -14px 0 var(--ul-color), 0 14px 0 var(--ul-color);
  animation: ul-spin 2s linear infinite;
}

.ul-cosmic-orbit-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px dashed var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-cosmic-orbit-9::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-orbit-expanding 2s linear infinite;
}

.ul-cosmic-orbit-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cosmic-orbit-10::before {
  content: '✨';
  font-size: 20px;
  animation: ul-orbit-sparkles 1.2s ease-in-out infinite alternate;
}

.ul-particle-beam-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-1::before {
  content: '';
  width: 80%;
  height: 4px;
  background: var(--ul-secondary-color);
  border-radius: 2px;
}
.ul-particle-beam-1::after {
  content: '';
  position: absolute;
  left: 10%;
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ul-color);
  animation: ul-beam-particle 1s linear infinite;
}

.ul-particle-beam-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-2::before, .ul-particle-beam-2::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
}
.ul-particle-beam-2::before { left: 5%; animation: ul-beam-coll-a 1.2s ease-in infinite; }
.ul-particle-beam-2::after { right: 5%; animation: ul-beam-coll-b 1.2s ease-in infinite;
  background: var(--ul-secondary-color);
}

.ul-particle-beam-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-particle-beam-3::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--ul-color);
  animation: ul-beam-accelerator 0.6s linear infinite;
  transform-origin: center calc(var(--ul-size)/2 - 4px);
  top: 4px;
}

.ul-particle-beam-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-4::before {
  content: '';
  width: 80%;
  height: 80%;
  border: var(--ul-border-width) solid transparent;
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 0.5s linear infinite;
}

.ul-particle-beam-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-5::before {
  content: '';
  width: 10px;
  height: 80%;
  background: linear-gradient(180deg, var(--ul-color), transparent);
  animation: ul-beam-jet 0.8s ease-in-out infinite alternate;
}

.ul-particle-beam-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-particle-beam-6::before {
  content: '⚡';
  font-size: 20px;
  animation: ul-beam-charge 1.2s step-end infinite;
}

.ul-particle-beam-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-7::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: -10px -10px var(--ul-color), 10px 10px var(--ul-color), -10px 10px var(--ul-color), 10px -10px var(--ul-color);
  animation: ul-beam-scatter 1s linear infinite alternate;
}

.ul-particle-beam-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-8::before {
  content: '';
  width: 70%;
  height: 30%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
  animation: ul-beam-bending 1.2s ease-in-out infinite alternate;
}

.ul-particle-beam-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-9::before {
  content: '~~~~';
  color: var(--ul-color);
  font-family: serif;
  font-size: 22px;
  animation: ul-beam-frequency 0.8s ease-in-out infinite alternate;
}

.ul-particle-beam-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-particle-beam-10::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--ul-color);
  animation: ul-beam-foam 1s infinite ease-in-out;
}

.ul-gravity-wave-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-1::before, .ul-gravity-wave-1::after {
  content: '';
  position: absolute;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-gravity-ripples 2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.ul-gravity-wave-1::after { animation-delay: 1s; }

.ul-gravity-wave-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-gravity-wave-2::before {
  content: '';
  width: 80%;
  height: 80%;
  border: var(--ul-border-width) dashed var(--ul-color);
  animation: ul-gravity-distortion 2s ease-in-out infinite alternate;
}

.ul-gravity-wave-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-3::before, .ul-gravity-wave-3::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
}
.ul-gravity-wave-3::before { animation: ul-gravity-merge-a 1.5s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
.ul-gravity-wave-3::after { animation: ul-gravity-merge-b 1.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  background: var(--ul-secondary-color);
}

.ul-gravity-wave-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-4::before {
  content: '';
  width: 80%;
  height: 40%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
  animation: ul-gravity-pull 1.4s ease-in-out infinite alternate;
}

.ul-gravity-wave-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-5::before {
  content: '';
  width: 80%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--ul-color), transparent);
  animation: ul-gravity-packet 1.2s ease-in-out infinite;
}

.ul-gravity-wave-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-6::before {
  content: '';
  width: 70%;
  height: 70%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
  animation: ul-gravity-tidal 1.6s ease-in-out infinite alternate;
}

.ul-gravity-wave-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-7::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 90%;
  background: linear-gradient(180deg, transparent, var(--ul-color), transparent);
  animation: ul-spin 1.8s linear infinite;
}

.ul-gravity-wave-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-gravity-wave-8::before {
  content: '';
  position: absolute;
  inset: 15%;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ul-color);
  animation: ul-gravity-horizon 1.5s ease-in-out infinite alternate;
}

.ul-gravity-wave-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-9::before, .ul-gravity-wave-9::after {
  content: '';
  position: absolute;
  background: var(--ul-color);
}
.ul-gravity-wave-9::before { width: 80%; height: 2px; top: 50%; animation: ul-gravity-inter-a 1.2s steps(2) infinite alternate; }
.ul-gravity-wave-9::after { width: 2px; height: 80%; left: 50%; animation: ul-gravity-inter-b 1.2s steps(2) infinite alternate; }

.ul-gravity-wave-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-gravity-wave-10::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-gravity-well 1.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}

.ul-fusion-core-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 4px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-fusion-core-1::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 3px solid transparent;
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 0.8s linear infinite;
}

.ul-fusion-core-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-2::before, .ul-fusion-core-2::after {
  content: '';
  position: absolute;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
}
.ul-fusion-core-2::before { width: 80%; height: 80%; animation: ul-spin 1.2s linear infinite; }
.ul-fusion-core-2::after { width: 50%; height: 50%; border-color: var(--ul-secondary-color); animation: ul-spin 1.8s linear infinite reverse; }

.ul-fusion-core-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-3::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--ul-color);
  animation: ul-fusion-inject 1.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite;
}

.ul-fusion-core-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-4::before {
  content: '';
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--ul-color) 30%, var(--ul-secondary-color) 70%, transparent 100%);
  border-radius: 50%;
  animation: ul-fusion-glow 1.5s ease-in-out infinite alternate;
}

.ul-fusion-core-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-5::before {
  content: '💥';
  font-size: 26px;
  animation: ul-fusion-burst 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}

.ul-fusion-core-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-6::before {
  content: '';
  width: 80%;
  height: 80%;
  border: 3px double var(--ul-color);
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: ul-spin 1.8s linear infinite;
}

.ul-fusion-core-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-7::before, .ul-fusion-core-7::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: var(--ul-border-width) solid var(--ul-color);
  animation: ul-fusion-compress 1.4s ease-in-out infinite;
}
.ul-fusion-core-7::after { animation-delay: 0.7s;
  border-color: var(--ul-secondary-color);
}

.ul-fusion-core-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-8::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: -15px 0 var(--ul-color), 15px 0 var(--ul-color);
  animation: ul-fusion-deuterium 1.2s ease-in-out infinite alternate;
}

.ul-fusion-core-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-9::before {
  content: '';
  width: 70%;
  height: 70%;
  border: var(--ul-border-width) solid var(--ul-color);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  animation: ul-spin 2s linear infinite;
}

.ul-fusion-core-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-fusion-core-10::before {
  content: '';
  width: 80%;
  height: 80%;
  background: conic-gradient(from 0deg, var(--ul-color), transparent 60%);
  border-radius: 50%;
  animation: ul-spin 0.6s linear infinite;
}

.ul-magnetic-flux-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-1::before {
  content: '';
  width: 80%;
  height: 40%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
  animation: ul-flux-dipole 1.4s ease-in-out infinite alternate;
}

.ul-magnetic-flux-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-2::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-flux-transfer 1.6s ease-in-out infinite;
}

.ul-magnetic-flux-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-3::before {
  content: '🧭';
  font-size: 26px;
  animation: ul-flux-compass 2s ease-in-out infinite;
}

.ul-magnetic-flux-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-4::before {
  content: '';
  width: 70%;
  height: 70%;
  border: var(--ul-border-width) dashed var(--ul-color);
  animation: ul-spin 4s linear infinite;
}

.ul-magnetic-flux-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-5::before {
  content: 'Y';
  font-family: monospace;
  font-weight: bold;
  font-size: 28px;
  color: var(--ul-color);
  animation: ul-flux-capacitor 1.2s step-end infinite;
}

.ul-magnetic-flux-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-6::before, .ul-magnetic-flux-6::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 2px;
  background: var(--ul-color);
}
.ul-magnetic-flux-6::before { top: 30%; animation: ul-flux-wave-a 1s ease-in-out infinite alternate; }
.ul-magnetic-flux-6::after { bottom: 30%; animation: ul-flux-wave-b 1s ease-in-out infinite alternate; }

.ul-magnetic-flux-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-7::before {
  content: 'N  S';
  font-family: monospace;
  font-size: 15px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-flux-polar 1.4s steps(2) infinite alternate;
}

.ul-magnetic-flux-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-8::before {
  content: '';
  width: 60%;
  height: 60%;
  background: var(--ul-color);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  animation: ul-flux-ferro 1.2s ease-in-out infinite alternate;
}

.ul-magnetic-flux-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-9::before {
  content: '';
  width: 80%;
  height: 20px;
  border: 1px solid var(--ul-secondary-color);
  border-radius: 10px;
  overflow: hidden;
}
.ul-magnetic-flux-9::after {
  content: '';
  position: absolute;
  left: 10%;
  width: 12px;
  height: 12px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-flux-tube 1.2s ease-in-out infinite alternate;
}

.ul-magnetic-flux-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-magnetic-flux-10::before {
  content: '';
  width: 60%;
  height: 60%;
  border: var(--ul-border-width) solid var(--ul-color);
  border-radius: 50%;
  animation: ul-flux-hysteresis 1.8s ease-in-out infinite;
}

.ul-beaker-bubble-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-left: 2px solid var(--ul-color);
  border-right: 2px solid var(--ul-color);
  border-bottom: 2px solid var(--ul-color);
  border-radius: 0 0 10px 10px;
  width: calc(var(--ul-size) * 0.8);
}
.ul-beaker-bubble-1::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: -8px 10px var(--ul-color), 8px 6px var(--ul-color), -2px 14px var(--ul-color);
  animation: ul-beaker-boil 1s linear infinite;
}

.ul-beaker-bubble-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-beaker-bubble-2::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-beaker-pulse 1.2s ease-in-out infinite alternate;
}

.ul-beaker-bubble-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-beaker-bubble-3::before {
  content: '🧪';
  font-size: 26px;
  animation: ul-beaker-tilt 2s ease-in-out infinite alternate;
}

.ul-beaker-bubble-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-bottom: 3px solid var(--ul-color);
  width: var(--ul-size);
  height: 15px;
}
.ul-beaker-bubble-4::before {
  content: 'o O o';
  color: var(--ul-color);
  font-weight: bold;
  font-size: 14px;
  animation: ul-beaker-rise 0.8s ease-in-out infinite alternate;
}

.ul-beaker-bubble-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-beaker-bubble-5::before {
  content: '';
  width: 60%;
  height: 60%;
  background: var(--ul-color);
  animation: ul-beaker-stir 1.5s linear infinite;
  transform-origin: center;
}

.ul-beaker-bubble-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-beaker-bubble-6::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-beaker-bubble-rise-float 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}

.ul-beaker-bubble-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 2s linear infinite;
}

.ul-beaker-bubble-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-beaker-bubble-8::before {
  content: 'H₂';
  color: var(--ul-color);
  font-family: monospace;
  font-size: 16px;
  animation: ul-beaker-gas 1.2s ease-in-out infinite alternate;
}

.ul-beaker-bubble-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 0 0 15px 15px;
  width: calc(var(--ul-size) * 0.75);
  overflow: hidden;
}
.ul-beaker-bubble-9::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: var(--ul-secondary-color);
  animation: ul-beaker-fill-liquid 2s ease-in-out infinite alternate;
}

.ul-prism-refract-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  clip-path: polygon(50% 10%, 90% 80%, 10% 80%);
  background: var(--ul-secondary-color);
}
.ul-prism-refract-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #ff4757, #ffa502, #2ed573, #1e90ff);
  animation: ul-spin 2s linear infinite;
}

.ul-prism-refract-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  clip-path: polygon(50% 10%, 90% 80%, 10% 80%);
}
.ul-prism-refract-2::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--ul-color);
  animation: ul-prism-laser-scan 1.5s ease-in-out infinite alternate;
}

.ul-prism-refract-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-prism-refract-3::before {
  content: '💎';
  font-size: 28px;
  animation: ul-prism-gem-bounce 1s ease-in-out infinite alternate;
}

.ul-prism-refract-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-prism-refract-4::before {
  content: '';
  position: absolute;
  inset: 15%;
  background: radial-gradient(circle, var(--ul-color), transparent 70%);
  animation: ul-prism-glow-pulse 1.2s ease-in-out infinite alternate;
}

.ul-prism-refract-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 4px;
  transform: rotate(45deg);
}
.ul-prism-refract-5::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--ul-color);
  animation: ul-prism-cube 1.2s ease-in-out infinite alternate;
}

.ul-prism-refract-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-prism-refract-6::before {
  content: '';
  width: 90%;
  height: 90%;
  border: 3px solid transparent;
  border-top-color: #ff4757;
  border-right-color: #ffa502;
  border-bottom-color: #2ed573;
  border-left-color: #1e90ff;
  border-radius: 50%;
  animation: ul-spin 1s linear infinite;
}

.ul-prism-refract-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-prism-refract-7::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-prism-orbit 1.5s ease-in-out infinite;
}

.ul-prism-refract-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-prism-refract-8::before {
  content: '🔆';
  font-size: 26px;
  color: var(--ul-color);
  animation: ul-prism-light 1s ease-in-out infinite alternate;
}

.ul-prism-refract-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-prism-lens 1.2s ease-in-out infinite alternate;
}

.ul-string-theory-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  height: calc(var(--ul-size) * 0.5);
}
.ul-string-theory-1::before {
  content: '';
  width: 95%;
  height: 60%;
  border: 2px solid var(--ul-color);
  border-radius: 15px / 50%;
  animation: ul-string-vibrate 1s ease-in-out infinite alternate;
}

.ul-string-theory-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-string-theory-2::before {
  content: '~~~~';
  color: var(--ul-color);
  font-size: 20px;
  font-family: serif;
  animation: ul-string-wave 0.8s ease-in-out infinite alternate;
}

.ul-string-theory-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-string-theory-3::before {
  content: '';
  width: 80%;
  height: 80%;
  border: 2px solid var(--ul-color);
  border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
  animation: ul-spin 2s linear infinite;
}

.ul-string-theory-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-string-theory-4::before {
  content: '';
  width: 100%;
  height: 2px;
  background: var(--ul-color);
  animation: ul-string-line 1s ease-in-out infinite alternate;
}

.ul-string-theory-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 100px;
}
.ul-string-theory-5::before {
  content: '';
  width: 80%;
  height: 80%;
  border: 3px double var(--ul-color);
  border-radius: 50%;
  transform: rotateY(45deg);
  animation: ul-string-3d 1.5s linear infinite;
}

.ul-string-theory-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-string-theory-6::before {
  content: '∞';
  font-size: 32px;
  color: var(--ul-color);
  animation: ul-string-inf 1.2s ease-in-out infinite alternate;
}

.ul-string-theory-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-string-theory-7::before {
  content: '';
  position: absolute;
  inset: 10%;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-string-pulse 1s ease-in-out infinite alternate;
}

.ul-string-theory-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-string-theory-8::before {
  content: '|||||';
  letter-spacing: -2px;
  color: var(--ul-color);
  font-weight: bold;
  animation: ul-string-vib-vertical 0.5s ease-in-out infinite alternate;
}

.ul-string-theory-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-string-morph-shapes 2s ease-in-out infinite alternate;
}

.ul-neural-synapse-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-neural-synapse-1::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: -12px -12px var(--ul-color), 12px 12px var(--ul-color);
  animation: ul-neural-pulse 1.2s ease-in-out infinite alternate;
}

.ul-neural-synapse-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-neural-synapse-2::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-neural-orbit 1.4s ease-in-out infinite;
}

.ul-neural-synapse-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-neural-synapse-3::before {
  content: '::';
  font-family: monospace;
  font-size: 24px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-neural-letter-spacing 0.8s ease-in-out infinite alternate;
}

.ul-neural-synapse-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 2s linear infinite;
}

.ul-neural-synapse-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-neural-synapse-5::before {
  content: '';
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--ul-color) 30%, transparent 70%);
  animation: ul-neural-radial-pulse 1.2s ease-in-out infinite alternate;
}

.ul-neural-synapse-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-neural-synapse-6::before {
  content: '';
  position: absolute;
  inset: 15%;
  border: 2px solid var(--ul-color);
  animation: ul-neural-inset-bounce 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}

.ul-neural-synapse-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-neural-synapse-7::before {
  content: '🧠';
  font-size: 26px;
  animation: ul-neural-brain-scale 1.2s ease-in-out infinite alternate;
}

.ul-neural-synapse-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-radius: 50%;
}
.ul-neural-synapse-8::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 0.8s linear infinite;
}

.ul-neural-synapse-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 4px;
}
.ul-neural-synapse-9::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  animation: ul-neural-box-jump 1s steps(2) infinite alternate;
}

.ul-neural-synapse-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-neural-synapse-10::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ul-color);
  animation: ul-neural-expand-waves 1s ease-out infinite;
}

.ul-processor-core-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-processor-core-1::before {
  content: '';
  width: 70%;
  height: 70%;
  background: var(--ul-color);
  animation: ul-processor-scale 1s steps(2) infinite alternate;
}

.ul-processor-core-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 8px;
}
.ul-processor-core-2::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--ul-color);
  animation: ul-spin 4s linear infinite;
}

.ul-processor-core-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-processor-core-3::before {
  content: 'CPU';
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-processor-text-glow 1.5s ease-in-out infinite alternate;
}

.ul-processor-core-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-processor-core-4::before {
  content: '';
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--ul-color);
  animation: ul-processor-split 1s steps(2) infinite alternate;
}

.ul-processor-core-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-processor-core-5::before {
  content: '';
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: var(--ul-color);
  border-right-color: var(--ul-color);
  animation: ul-processor-double-spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.ul-processor-core-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 8px;
}
.ul-processor-core-6::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-processor-bounce 0.6s infinite alternate;
}

.ul-processor-core-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-processor-core-7::before {
  content: '';
  width: 100%;
  height: 100%;
  border: 2px solid var(--ul-secondary-color);
  border-radius: 6px;
}
.ul-processor-core-7::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid var(--ul-color);
  border-radius: 4px;
  animation: ul-processor-border 1.5s ease-in-out infinite alternate;
}

.ul-processor-core-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 100px;
}
.ul-processor-core-8::before {
  content: '';
  width: 70%;
  height: 70%;
  border: 3px solid var(--ul-color);
  border-radius: 4px;
  transform: rotateX(45deg) rotateY(45deg);
  animation: ul-processor-3d 2s linear infinite;
}

.ul-processor-core-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-processor-core-9::before {
  content: '░';
  font-size: 28px;
  color: var(--ul-color);
  animation: ul-processor-grid-char 0.5s step-end infinite;
}

.ul-processor-core-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 8px;
  animation: ul-processor-glitch 1s steps(5) infinite;
}

.ul-cyber-shield-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ul-secondary-color);
}
.ul-cyber-shield-1::before {
  content: '';
  position: absolute;
  inset: 3px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ul-color);
  animation: ul-shield-glow-pulse 1s ease-in-out infinite alternate;
}

.ul-cyber-shield-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-cyber-shield-2::before {
  content: '🛡️';
  font-size: 20px;
  animation: ul-shield-icon-shake 1.2s ease-in-out infinite alternate;
}

.ul-cyber-shield-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-color);
  border-radius: 8px;
  animation: ul-spin 3s linear infinite;
}

.ul-cyber-shield-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyber-shield-4::before, .ul-cyber-shield-4::after {
  content: '';
  position: absolute;
  border: 2px solid var(--ul-color);
  border-radius: 4px;
  animation: ul-shield-nest 1.5s infinite;
}
.ul-cyber-shield-4::after { animation-delay: 0.75s; }

.ul-cyber-shield-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-cyber-shield-5::before {
  content: '';
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, var(--ul-color) 40%, transparent 70%);
  animation: ul-shield-radial 0.8s ease-in-out infinite alternate;
}

.ul-cyber-shield-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyber-shield-6::before {
  content: '🔒';
  font-size: 24px;
  animation: ul-shield-lock-bounce 1.5s steps(3) infinite;
}

.ul-cyber-shield-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50% 50% 0 0;
  height: calc(var(--ul-size) * 0.75);
  animation: ul-shield-dome 1s ease-in-out infinite alternate;
}

.ul-cyber-shield-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cyber-shield-8::before {
  content: '';
  width: 80%;
  height: 80%;
  border: 3px solid var(--ul-color);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  animation: ul-shield-half 1.2s ease-in-out infinite alternate;
}

.ul-cyber-shield-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 12px;
}
.ul-cyber-shield-9::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 4px;
  background: var(--ul-color);
  animation: ul-shield-bar-scan 1.2s ease-in-out infinite alternate;
}

.ul-cyber-shield-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  overflow: hidden;
}
.ul-cyber-shield-10::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ul-color) 50%, transparent 50%);
  animation: ul-spin 1s linear infinite;
}

.ul-binary-matrix-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  font-family: monospace;
  font-size: 16px;
  color: var(--ul-color);
  overflow: hidden;
}
.ul-binary-matrix-1::before {
  content: '1\A 0\A 1';
  white-space: pre;
  animation: ul-binary-matrix-rain-a 1s linear infinite;
}

.ul-binary-matrix-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  font-family: monospace;
  font-size: 16px;
  color: var(--ul-color);
  overflow: hidden;
}
.ul-binary-matrix-2::before {
  content: '0\A 1\A 0';
  white-space: pre;
  animation: ul-binary-matrix-rain-b 1.4s linear infinite reverse;
}

.ul-binary-matrix-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-binary-matrix-3::before {
  content: '0101';
  font-family: monospace;
  font-size: 12px;
  color: var(--ul-color);
  animation: ul-binary-matrix-flicker 0.8s step-end infinite;
}

.ul-binary-matrix-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  width: calc(var(--ul-size) * 1.3);
  height: 20px;
  overflow: hidden;
}
.ul-binary-matrix-4::before {
  content: '101010101';
  font-family: monospace;
  color: var(--ul-color);
  font-size: 11px;
  position: absolute;
  animation: ul-binary-matrix-scroll 1.5s linear infinite;
}

.ul-binary-matrix-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-binary-matrix-5::before {
  content: '{ }';
  font-family: monospace;
  font-size: 20px;
  color: var(--ul-color);
  animation: ul-binary-matrix-brackets 1s ease-in-out infinite alternate;
}

.ul-binary-matrix-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-binary-matrix-6::before {
  content: 'BIN';
  font-family: monospace;
  font-size: 14px;
  color: var(--ul-color);
  animation: ul-binary-matrix-scale 1.2s ease-in-out infinite alternate;
}

.ul-binary-matrix-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-binary-matrix-7::before {
  content: '1';
  font-family: monospace;
  font-size: 16px;
  color: var(--ul-color);
  animation: ul-binary-matrix-digit-toggle 1s steps(2) infinite;
}

.ul-binary-matrix-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-binary-matrix-8::before {
  content: '0 1';
  font-family: monospace;
  font-size: 18px;
  color: var(--ul-color);
  animation: ul-spin 1.5s linear infinite;
}

.ul-binary-matrix-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-binary-matrix-9::before {
  content: '0xFF';
  font-family: monospace;
  font-size: 12px;
  color: var(--ul-color);
  animation: ul-binary-matrix-hex 1.2s steps(4) infinite;
}

.ul-binary-matrix-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-binary-matrix-10::before {
  content: '•';
  font-size: 32px;
  color: var(--ul-color);
  animation: ul-binary-matrix-blink-dot 0.5s step-end infinite;
}

.ul-data-pipeline-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.5);
  height: 8px;
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-data-pipeline-1::before {
  content: '';
  position: absolute;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 12px 0 var(--ul-color), 24px 0 var(--ul-color);
  animation: ul-pipeline-shift 1s linear infinite;
}

.ul-data-pipeline-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.5);
  height: 8px;
  border: 1px solid var(--ul-color);
  border-radius: 4px;
}
.ul-data-pipeline-2::before {
  content: '';
  position: absolute;
  left: 0;
  width: 40%;
  height: 100%;
  background: var(--ul-color);
  animation: ul-pipeline-slide 1.2s ease-in-out infinite alternate;
}

.ul-data-pipeline-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-data-pipeline-3::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid var(--ul-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ul-spin 1s linear infinite;
}

.ul-data-pipeline-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-data-pipeline-4::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: -12px 0 var(--ul-secondary-color), 12px 0 var(--ul-secondary-color);
  animation: ul-pipeline-bounce 0.6s infinite alternate;
}

.ul-data-pipeline-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.5);
  height: 15px;
  border-left: 2px solid var(--ul-color);
  border-right: 2px solid var(--ul-color);
}
.ul-data-pipeline-5::before {
  content: '';
  width: 12px;
  height: 2px;
  background: var(--ul-color);
  animation: ul-pipeline-gate-slide 1s ease-in-out infinite alternate;
}

.ul-data-pipeline-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-data-pipeline-6::before {
  content: 'DATA';
  font-size: 11px;
  color: var(--ul-color);
  font-weight: bold;
  letter-spacing: 1px;
  animation: ul-pipeline-text 1.2s steps(4) infinite alternate;
}

.ul-data-pipeline-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-data-pipeline-7::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-pipeline-radial 1.5s cubic-bezier(0.12, 0, 0.39, 0) infinite;
}

.ul-data-pipeline-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  width: calc(var(--ul-size) * 1.5);
  height: 10px;
  background: var(--ul-secondary-color);
  border-radius: 5px;
  overflow: hidden;
}
.ul-data-pipeline-8::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--ul-color), var(--ul-color) 10px, transparent 10px, transparent 20px);
  animation: ul-pipeline-stripes 1s linear infinite;
}

.ul-data-pipeline-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-data-pipeline-9::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-pipeline-orbit-helix 1.2s linear infinite;
}

.ul-data-pipeline-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 4px;
}
.ul-data-pipeline-10::before {
  content: '';
  width: 60%;
  height: 60%;
  border: 2px solid var(--ul-color);
  animation: ul-spin 1.5s ease-in-out infinite;
}

.ul-hologram-grid-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 100px;
}
.ul-hologram-grid-1::before {
  content: '';
  width: 80%;
  height: 80%;
  border: 2px solid var(--ul-color);
  transform: rotateX(60deg);
  animation: ul-holo-glow 1s ease-in-out infinite alternate;
}

.ul-hologram-grid-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 100px;
}
.ul-hologram-grid-2::before {
  content: '';
  width: 70%;
  height: 70%;
  border: 2px dashed var(--ul-color);
  transform: rotateY(60deg);
  animation: ul-holo-spin-y 1.5s linear infinite;
}

.ul-hologram-grid-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-hologram-grid-3::before {
  content: '▲';
  font-size: 26px;
  color: var(--ul-color);
  animation: ul-holo-triangle 1.2s ease-in-out infinite alternate;
}

.ul-hologram-grid-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-hologram-grid-4::before {
  content: '';
  position: absolute;
  inset: 15%;
  background: repeating-linear-gradient(0deg, var(--ul-color), var(--ul-color) 2px, transparent 2px, transparent 4px);
  animation: ul-holo-grid-scan 2s linear infinite;
}

.ul-hologram-grid-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  perspective: 120px;
}
.ul-hologram-grid-5::before {
  content: '';
  width: 60%;
  height: 60%;
  border: 3px double var(--ul-color);
  transform: rotateX(45deg) rotateY(45deg);
  animation: ul-holo-cube-spin 2s linear infinite;
}

.ul-hologram-grid-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-hologram-grid-6::before {
  content: '░▒▓';
  color: var(--ul-color);
  font-size: 16px;
  animation: ul-holo-glitch-char 0.5s step-end infinite;
}

.ul-hologram-grid-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-bottom: 3px solid var(--ul-color);
  border-radius: 50%;
}
.ul-hologram-grid-7::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 80%;
  background: linear-gradient(180deg, var(--ul-color), transparent);
  animation: ul-holo-beam 1s ease-in-out infinite alternate;
}

.ul-hologram-grid-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-hologram-grid-8::before {
  content: '★';
  color: var(--ul-color);
  font-size: 20px;
  animation: ul-holo-star-scale 1s ease-in-out infinite alternate;
}

.ul-hologram-grid-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ul-hologram-grid-9::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-holo-cone 1.2s ease-in-out infinite alternate;
}

.ul-hologram-grid-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 6px;
}
.ul-hologram-grid-10::before {
  content: 'HOL';
  font-family: monospace;
  font-size: 11px;
  color: var(--ul-color);
  animation: ul-holo-txt-flicker 1s steps(3) infinite alternate;
}

.ul-biometric-scan-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-biometric-scan-1::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ul-color);
  box-shadow: 0 0 8px var(--ul-color);
  animation: ul-bio-scan-line-1 1.5s ease-in-out infinite alternate;
}

.ul-biometric-scan-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 8px;
}
.ul-biometric-scan-2::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ul-color);
  box-shadow: 0 0 6px var(--ul-color);
  animation: ul-bio-scan-line-2 1.2s ease-in-out infinite alternate;
}

.ul-biometric-scan-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-biometric-scan-3::before {
  content: '👁️';
  font-size: 20px;
  animation: ul-bio-eye-pulse 1s ease-in-out infinite alternate;
}

.ul-biometric-scan-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 2s linear infinite;
}

.ul-biometric-scan-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-biometric-scan-5::before {
  content: '👍';
  font-size: 22px;
  animation: ul-bio-thumb 1.5s ease-in-out infinite alternate;
}

.ul-biometric-scan-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-biometric-scan-6::before {
  content: '';
  position: absolute;
  inset: 15%;
  border: 2px solid transparent;
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

.ul-biometric-scan-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-biometric-scan-7::before {
  content: '👤';
  font-size: 24px;
  animation: ul-bio-user 1.2s ease-in-out infinite alternate;
}

.ul-biometric-scan-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-biometric-scan-8::before, .ul-biometric-scan-8::after {
  content: '';
  position: absolute;
  border: 2px solid var(--ul-color);
  border-radius: 50%;
  animation: ul-bio-double-ripple 1.8s ease-out infinite;
}
.ul-biometric-scan-8::after { animation-delay: 0.9s; }

.ul-biometric-scan-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 50%;
}
.ul-biometric-scan-9::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-top: 2px solid var(--ul-color);
  animation: ul-spin 1.2s steps(4) infinite;
}

.ul-biometric-scan-10 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-color);
  border-radius: 4px;
  overflow: hidden;
}
.ul-biometric-scan-10::before {
  content: 'OK';
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-bio-ok 1.2s steps(2) infinite alternate;
}

.ul-cloud-sync-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cloud-sync-1::before {
  content: '☁️';
  font-size: 32px;
  animation: ul-cloud-sync-scale 1.5s ease-in-out infinite alternate;
}
.ul-cloud-sync-1::after {
  content: '↑';
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-cloud-sync-up 1s linear infinite;
}

.ul-cloud-sync-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cloud-sync-2::before {
  content: '☁️';
  font-size: 32px;
  animation: ul-cloud-sync-scale 1.5s ease-in-out infinite alternate;
}
.ul-cloud-sync-2::after {
  content: '↓';
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-cloud-sync-down 1s linear infinite;
}

.ul-cloud-sync-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cloud-sync-3::before {
  content: '🔄';
  font-size: 26px;
  animation: ul-spin 1.5s linear infinite;
}

.ul-cloud-sync-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cloud-sync-4::before {
  content: '☁️';
  font-size: 28px;
  color: var(--ul-color);
  animation: ul-cloud-bounce-y 1s ease-in-out infinite alternate;
}

.ul-cloud-sync-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-cloud-sync-5::before {
  content: '☁️';
  font-size: 20px;
  animation: ul-spin 3s linear infinite;
}

.ul-cloud-sync-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cloud-sync-6::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-cloud-sync-distrib 1.5s ease-in-out infinite alternate;
}

.ul-cloud-sync-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cloud-sync-7::before {
  content: '☁️';
  font-size: 26px;
  z-index: 2;
}
.ul-cloud-sync-7::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  border: var(--ul-border-width) solid transparent;
  border-top-color: var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 1s linear infinite;
}

.ul-cloud-sync-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-cloud-sync-8::before, .ul-cloud-sync-8::after {
  content: '☁️';
  position: absolute;
  font-size: 20px;
  animation: ul-cloud-duo-a 1.4s ease-in-out infinite alternate;
}
.ul-cloud-sync-8::after { animation-name: ul-cloud-duo-b;
  color: var(--ul-secondary-color);
}

.ul-cloud-sync-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px dashed var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-cloud-sync-9::before {
  content: '☁️';
  font-size: 24px;
  animation: ul-cloud-sync-rotate-y 2s linear infinite;
}

.ul-laser-optics-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-1::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ul-color);
  box-shadow: 0 0 10px var(--ul-color);
  animation: ul-laser-beam-reflect 1.2s ease-in-out infinite alternate;
}

.ul-laser-optics-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-2::before, .ul-laser-optics-2::after {
  content: '';
  position: absolute;
  width: 45%;
  height: 2px;
  background: var(--ul-color);
  box-shadow: 0 0 6px var(--ul-color);
}
.ul-laser-optics-2::before { left: 5%; transform: rotate(30deg); animation: ul-laser-converge-a 1.2s ease-in-out infinite alternate; }
.ul-laser-optics-2::after { right: 5%; transform: rotate(-30deg); animation: ul-laser-converge-b 1.2s ease-in-out infinite alternate; }

.ul-laser-optics-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-3::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--ul-color);
  animation: ul-laser-spark 0.6s linear infinite alternate;
}

.ul-laser-optics-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-4::before {
  content: '';
  width: 2px;
  height: 80%;
  background: var(--ul-color);
  box-shadow: 0 0 8px var(--ul-color);
  animation: ul-spin 1.5s linear infinite;
}

.ul-laser-optics-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-5::before, .ul-laser-optics-5::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 80%;
  background: var(--ul-color);
  box-shadow: 0 0 8px var(--ul-color);
}
.ul-laser-optics-5::before { left: 35%; transform: rotate(45deg); animation: ul-laser-cross-a 1.5s ease-in-out infinite alternate; }
.ul-laser-optics-5::after { right: 35%; transform: rotate(-45deg); animation: ul-laser-cross-b 1.5s ease-in-out infinite alternate; }

.ul-laser-optics-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-6::before {
  content: '';
  width: 80%;
  height: 80%;
  border: var(--ul-border-width) solid transparent;
  border-top-color: var(--ul-color);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px var(--ul-color));
  animation: ul-spin 0.8s linear infinite;
}

.ul-laser-optics-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-7::before {
  content: '';
  width: 80%;
  height: 20px;
  background: var(--ul-secondary-color);
  border-radius: 10px;
  overflow: hidden;
}
.ul-laser-optics-7::after {
  content: '';
  position: absolute;
  left: 0;
  width: 30%;
  height: 100%;
  background: var(--ul-color);
  box-shadow: 0 0 10px var(--ul-color);
  animation: ul-laser-fiber 1.2s ease-in-out infinite alternate;
}

.ul-laser-optics-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-8::before {
  content: '🔴';
  font-size: 22px;
  animation: ul-laser-modulation 0.6s step-end infinite;
}

.ul-laser-optics-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-laser-optics-9::before {
  content: '';
  width: 80%;
  height: 4px;
  background: var(--ul-color);
  box-shadow: 0 0 8px var(--ul-color);
  animation: ul-laser-collimator 1s ease-in-out infinite alternate;
}

.ul-telecom-wave-1 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-telecom-wave-1::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ul-color);
  border-radius: 50%;
  animation: ul-telecom-wave-expanding 1.2s ease-out infinite;
}

.ul-telecom-wave-2 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 50%;
}
.ul-telecom-wave-2::before {
  content: '📡';
  font-size: 20px;
  animation: ul-telecom-dish-wobble 1.5s ease-in-out infinite alternate;
}

.ul-telecom-wave-3 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-telecom-wave-3::before {
  content: '(( • ))';
  color: var(--ul-color);
  font-size: 16px;
  font-weight: bold;
  animation: ul-telecom-signal-bars 0.8s ease-in-out infinite alternate;
}

.ul-telecom-wave-4 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border-bottom: 3px solid var(--ul-color);
  width: var(--ul-size);
  height: 20px;
}
.ul-telecom-wave-4::before {
  content: '▲';
  color: var(--ul-color);
  font-size: 16px;
  animation: ul-telecom-antenna-scale 1s steps(3) infinite alternate;
}

.ul-telecom-wave-5 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px dashed var(--ul-color);
  border-radius: 50%;
  animation: ul-spin 2.5s linear infinite;
}

.ul-telecom-wave-6 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 2px solid var(--ul-secondary-color);
  border-radius: 8px;
}
.ul-telecom-wave-6::before {
  content: 'WIFI';
  font-family: sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: var(--ul-color);
  animation: ul-telecom-wifi-flicker 1.2s steps(2) infinite alternate;
}

.ul-telecom-wave-7 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-telecom-wave-7::before {
  content: '';
  width: 60%;
  height: 60%;
  border: 3px solid var(--ul-color);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  animation: ul-telecom-arc-pulse 1s ease-in-out infinite alternate;
}

.ul-telecom-wave-8 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
  border: 1px solid var(--ul-secondary-color);
  border-radius: 4px;
}
.ul-telecom-wave-8::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ul-color);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ul-color);
  animation: ul-telecom-core-pulse 1.2s ease-in-out infinite alternate;
}

.ul-telecom-wave-9 {
  width: var(--ul-size);
  height: var(--ul-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ul-telecom-wave-9::before {
  content: '📶';
  font-size: 22px;
  animation: ul-telecom-strength-bars 1.5s steps(4) infinite alternate;
}


/* ── Shared/Dynamic Keyframes ── */


@keyframes ul-spin {
  100% { transform: rotate(360deg); }
}
@keyframes ul-robo-arm-1 {
  0% { transform: rotate(-50deg); }
  100% { transform: rotate(50deg); }
}

@keyframes ul-robo-claw-a {
  0% { transform: rotate(-30deg); }
  100% { transform: rotate(30deg); }
}

@keyframes ul-robo-claw-b {
  0% { transform: rotate(30deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes ul-robo-crane {
  0% { transform: rotate(-40deg) scaleY(0.7); }
  100% { transform: rotate(40deg) scaleY(1.1); }
}

@keyframes ul-robo-gear {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ul-robo-pivot {
  100% { transform: rotate(360deg); }
}

@keyframes ul-robo-sciss-a {
  0% { transform: rotate(-25deg) translateY(-4px); }
  100% { transform: rotate(25deg) translateY(-4px); }
}

@keyframes ul-robo-sciss-b {
  0% { transform: rotate(25deg) translateY(4px); }
  100% { transform: rotate(-25deg) translateY(4px); }
}

@keyframes ul-robo-track {
  0% { left: 10%; transform: scaleX(1); }
  100% { left: 60%; transform: scaleX(-1); }
}

@keyframes ul-robo-l-arm {
  0% { transform: skewX(-15deg) rotate(0deg); }
  100% { transform: skewX(15deg) rotate(90deg); }
}

@keyframes ul-robo-suction {
  0%, 100% { transform: translate(-15px, -15px) scale(0.6); opacity: 0.4; }
  50% { transform: translate(15px, 15px) scale(1.4); opacity: 1; }
}

@keyframes ul-robo-laser-scan {
  0% { top: 5%; }
  100% { top: 90%; }
}

@keyframes ul-servo-step {
  100% { transform: rotate(360deg); }
}

@keyframes ul-servo-sweep {
  0% { transform: rotate(-80deg); }
  100% { transform: rotate(80deg); }
}

@keyframes ul-servo-eccentric {
  0% { transform: rotate(0deg) translate(12px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(12px) rotate(-360deg); }
}

@keyframes ul-servo-vibrate {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(15deg); }
}

@keyframes ul-servo-pointing {
  0% { transform: rotate(-45deg) scale(0.8); }
  100% { transform: rotate(45deg) scale(1.2); }
}

@keyframes ul-servo-morph {
  100% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; transform: rotate(180deg); }
}

@keyframes ul-servo-piston {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(12px); }
}

@keyframes ul-servo-digital {
  0% { content: '00'; opacity: 0.3; }
  25% { content: '45'; opacity: 0.7; }
  50% { content: '90'; opacity: 1; }
  75% { content: '30'; opacity: 0.5; }
}

@keyframes ul-eye-pulse {
  0% { transform: scale(0.6); }
  100% { transform: scale(1.1); }
}

@keyframes ul-eye-scan {
  0% { top: -10%; }
  100% { top: 110%; }
}

@keyframes ul-eye-shutter {
  0% { transform: rotate(0deg) scale(0.8); }
  100% { transform: rotate(180deg) scale(1.2); }
}

@keyframes ul-eye-ripple {
  0% { width: 0%; height: 0%; opacity: 1; }
  100% { width: 95%; height: 95%; opacity: 0; }
}

@keyframes ul-eye-aperture {
  0% { transform: scale(0.4) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
  100% { transform: scale(0.4) rotate(360deg); }
}

@keyframes ul-eye-glitch {
  0%, 100% { transform: translate(0, 0) skewX(0deg); opacity: 1; }
  20% { transform: translate(-2px, 1px) skewX(10deg); opacity: 0.85; }
  40% { transform: translate(1px, -2px) skewX(-10deg); opacity: 0.9; }
  60% { transform: translate(3px, 2px) skewY(5deg); }
  80% { transform: translate(-1px, -1px) skewY(-5deg); }
}

@keyframes ul-eye-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.05); }
}

@keyframes ul-eye-robot-bounce {
  0% { transform: translateY(-5px) scale(0.9); }
  100% { transform: translateY(5px) scale(1.1); }
}

@keyframes ul-eye-orbit-dot {
  0% { transform: rotate(0deg) translate(14px); }
  100% { transform: rotate(360deg) translate(14px); }
}

@keyframes ul-eye-iris-glow {
  0% { opacity: 0.3; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1.1); }
}

@keyframes ul-face-blink {
  0%, 90%, 100% { content: '● ●'; }
  95% { content: '— —'; }
}

@keyframes ul-face-smile {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.3); }
}

@keyframes ul-face-typing {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}

@keyframes ul-face-antenna {
  0% { transform: scale(0.6); opacity: 0.3; }
  100% { transform: scale(1.4); opacity: 1; }
}

@keyframes ul-face-bob {
  0% { transform: translateY(-4px) rotate(-3deg); }
  100% { transform: translateY(4px) rotate(3deg); }
}

@keyframes ul-face-mouth {
  0% { transform: scaleX(0.2); }
  100% { transform: scaleX(1); }
}

@keyframes ul-face-eye-spin {
  100% { transform: rotate(360deg); }
}

@keyframes ul-face-love {
  0% { transform: scale(0.8); }
  100% { transform: scale(1.3); }
}

@keyframes ul-face-chat {
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.1); }
}

@keyframes ul-face-tilt {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

@keyframes ul-gear-step {
  100% { transform: rotate(360deg); }
}

@keyframes ul-gear-3d {
  100% { transform: rotateX(60deg) rotateZ(360deg); }
}

@keyframes ul-gear-double {
  0% { transform: scale(0.9) rotate(-15deg); }
  100% { transform: scale(1.15) rotate(15deg); }
}

@keyframes ul-gear-scale {
  0% { transform: rotate(0deg) scale(0.85); }
  100% { transform: rotate(180deg) scale(1.1); }
}

@keyframes ul-act-piston {
  0% { left: 5%; }
  100% { left: 65%; }
}

@keyframes ul-act-opp-a {
  0% { transform: translateX(0); }
  100% { transform: translateX(12px); }
}

@keyframes ul-act-opp-b {
  0% { transform: translateX(0); }
  100% { transform: translateX(-12px); }
}

@keyframes ul-act-vert {
  0% { bottom: 5%; }
  100% { bottom: 65%; }
}

@keyframes ul-act-diamond {
  0% { transform: scale(0.5) rotate(0deg); }
  100% { transform: scale(1.1) rotate(90deg); }
}

@keyframes ul-act-cross {
  0% { transform: scaleX(0.2); }
  100% { transform: scaleX(4); }
}

@keyframes ul-act-arrow {
  0% { transform: translateX(-8px); opacity: 0.2; }
  100% { transform: translateX(8px); opacity: 1; }
}

@keyframes ul-act-progress {
  0% { left: 10%; }
  100% { left: 70%; }
}

@keyframes ul-act-spring {
  0% { transform: translateY(-12px) scale(0.6); }
  100% { transform: translateY(12px) scale(1.3); }
}

@keyframes ul-act-slice {
  0% { transform: translateX(-15px); }
  100% { transform: translateX(15px); }
}

@keyframes ul-tread-slide {
  0% { left: 2px; }
  100% { left: calc(100% - 10px); }
}

@keyframes ul-tread-letters {
  0% { transform: translateX(-4px); }
  100% { transform: translateX(4px); }
}

@keyframes ul-tread-dots {
  0% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}

@keyframes ul-tread-gradient {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes ul-tread-pattern {
  0% { background-position: 0 0; }
  100% { background-position: 8px 0; }
}

@keyframes ul-tread-bounce {
  0%, 100% { transform: translateY(-8px); opacity: 0.2; }
  50% { transform: translateY(8px); opacity: 1; }
}

@keyframes ul-tread-chevron {
  0% { transform: translateX(12px); }
  100% { transform: translateX(-12px); }
}

@keyframes ul-drone-rotor-3d {
  100% { transform: rotateX(70deg) rotateZ(360deg); }
}

@keyframes ul-drone-target {
  0% { transform: scale(0.6) rotate(0deg); }
  100% { transform: scale(1.1) rotate(360deg); }
}

@keyframes ul-drone-bounce {
  0% { transform: translate(-10px, -10px); }
  100% { transform: translate(10px, 10px); }
}

@keyframes ul-drone-gps {
  0% { transform: scale(0.5); opacity: 0.3; }
  100% { transform: scale(1.5); opacity: 1; }
}

@keyframes ul-drone-orbit {
  100% { transform: rotate(360deg); }
}

@keyframes ul-heart-pulse {
  0%, 100% { transform: scale(0.85); }
  50% { transform: scale(1.15); }
}

@keyframes ul-heart-pulse-inner {
  0% { transform: scale(0.8); }
  100% { transform: scale(1.1); }
}

@keyframes ul-heart-beat-steps {
  0%, 100% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
}

@keyframes ul-heart-tilt {
  0% { transform: scale(0.7) rotate(-15deg); }
  100% { transform: scale(1.3) rotate(15deg); }
}

@keyframes ul-heart-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes ul-heart-glow {
  0%, 100% { text-shadow: 0 0 2px var(--ul-color); }
  50% { text-shadow: 0 0 15px var(--ul-color); transform: scale(1.2); }
}

@keyframes ul-heart-3d {
  100% { transform: rotateY(360deg); }
}

@keyframes ul-heart-skew {
  0% { transform: skewX(-10deg) scale(0.9); }
  100% { transform: skewX(10deg) scale(1.1); }
}

@keyframes ul-sonar-pulse-1 {
  0% { transform: scale(0.1); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}

@keyframes ul-sonar-target-pulse {
  0% { transform: scale(0.8); opacity: 0.4; }
  100% { transform: scale(1.3); opacity: 1; }
}

@keyframes ul-sonar-ping {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes ul-sonar-ripple {
  0% { box-shadow: 0 0 0 0 var(--ul-secondary-color), 0 0 0 4px var(--ul-secondary-color); }
  100% { box-shadow: 0 0 0 8px transparent, 0 0 0 16px transparent; }
}

@keyframes ul-sonar-osc {
  0% { transform: rotate(-60deg); }
  100% { transform: rotate(240deg); }
}

@keyframes ul-sonar-grid-spin {
  0% { transform: scale(0.6) rotate(0deg); }
  100% { transform: scale(1.2) rotate(45deg); }
}

@keyframes ul-sonar-sweep-dot {
  100% { transform: rotate(360deg); }
}

@keyframes ul-quantum-3d-spin {
  100% { transform: rotateX(65deg) rotateZ(360deg); }
}

@keyframes ul-quantum-wave {
  0% { transform: translateX(-15px) scale(0.6); opacity: 0.3; }
  100% { transform: translateX(15px) scale(1.4); opacity: 1; }
}

@keyframes ul-quantum-flip-y {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

@keyframes ul-quantum-entangled-a {
  0% { transform: translate(-12px, -12px); }
  100% { transform: translate(12px, 12px); }
}

@keyframes ul-quantum-entangled-b {
  0% { transform: translate(12px, 12px); }
  100% { transform: translate(-12px, -12px); }
}

@keyframes ul-quantum-icon-pulse {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.4; }
  100% { transform: scale(1.2) rotate(360deg); opacity: 1; }
}

@keyframes ul-quantum-spin-orbit {
  0% { transform: rotate(0deg) translate(14px) scale(0.6); }
  50% { transform: rotate(180deg) translate(14px) scale(1.3); }
  100% { transform: rotate(360deg) translate(14px) scale(0.6); }
}

@keyframes ul-quantum-nest-square {
  0% { transform: rotate(0deg) scale(0.6); border-radius: 0%; }
  100% { transform: rotate(180deg) scale(1.1); border-radius: 50%; }
}

@keyframes ul-quantum-psi-flip {
  0% { transform: rotate(0deg) scale(0.9); }
  100% { transform: rotate(180deg) scale(1.2); }
}

@keyframes ul-quantum-tunneling {
  0% { transform: scale(0.3); opacity: 1; box-shadow: 0 0 0 0 var(--ul-color); }
  100% { transform: scale(2.8); opacity: 0; box-shadow: 0 0 0 16px transparent; }
}

@keyframes ul-mol-stretch {
  0% { box-shadow: -12px -12px 0 var(--ul-secondary-color), 12px 12px 0 var(--ul-secondary-color); }
  100% { box-shadow: -6px -6px 0 var(--ul-secondary-color), 6px 6px 0 var(--ul-secondary-color); }
}

@keyframes ul-mol-h2o {
  0% { transform: scale(0.9); opacity: 0.4; }
  100% { transform: scale(1.25); opacity: 1; }
}

@keyframes ul-mol-ionic {
  0% { transform: translateX(-15px); box-shadow: 24px 0 0 var(--ul-secondary-color); }
  100% { transform: translateX(15px); box-shadow: -24px 0 0 var(--ul-secondary-color); }
}

@keyframes ul-mol-polymer {
  100% { background-position: 10px 0; }
}

@keyframes ul-mol-co2 {
  0% { transform: rotate(-10deg) skewX(-15deg); }
  100% { transform: rotate(10deg) skewX(15deg); }
}

@keyframes ul-mol-covalent-a {
  0% { transform: translateX(-8px); }
  100% { transform: translateX(2px); }
}

@keyframes ul-mol-covalent-b {
  0% { transform: translateX(8px); }
  100% { transform: translateX(-2px); }
}

@keyframes ul-mol-lattice {
  0% { transform: rotate(0deg) scale(0.7); }
  100% { transform: rotate(90deg) scale(1.15); }
}

@keyframes ul-mol-shake {
  0% { transform: translate(-2px, -2px) rotate(-5deg); }
  100% { transform: translate(2px, 2px) rotate(5deg); }
}

@keyframes ul-orbit-planetary {
  100% { transform: rotate(360deg); }
}

@keyframes ul-orbit-sun {
  0% { transform: scale(0.85); text-shadow: 0 0 4px var(--ul-color); }
  100% { transform: scale(1.15); text-shadow: 0 0 12px var(--ul-color); }
}

@keyframes ul-orbit-planet-fast {
  100% { transform: rotate(360deg); }
}

@keyframes ul-orbit-perspective-dash {
  100% { transform: rotateX(75deg) rotateZ(360deg); }
}

@keyframes ul-orbit-eclipse {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(40px); }
}

@keyframes ul-orbit-expanding {
  0% { transform: rotate(0deg) translate(6px) scale(0.6); }
  50% { transform: rotate(180deg) translate(18px) scale(1.4); }
  100% { transform: rotate(360deg) translate(6px) scale(0.6); }
}

@keyframes ul-orbit-sparkles {
  0% { opacity: 0.2; transform: scale(0.8) rotate(-15deg); }
  100% { opacity: 1; transform: scale(1.25) rotate(15deg); }
}

@keyframes ul-beam-particle {
  0% { left: 10%; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 70%; opacity: 0; }
}

@keyframes ul-beam-coll-a {
  0% { transform: translateX(0); opacity: 0.2; }
  40% { opacity: 1; }
  50% { transform: translateX(12px) scale(1.6); opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes ul-beam-coll-b {
  0% { transform: translateX(0); opacity: 0.2; }
  40% { opacity: 1; }
  50% { transform: translateX(-12px) scale(1.6); opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes ul-beam-accelerator {
  100% { transform: rotate(360deg); }
}

@keyframes ul-beam-jet {
  0% { transform: scaleY(0.4); opacity: 0.3; }
  100% { transform: scaleY(1.1); opacity: 1; }
}

@keyframes ul-beam-charge {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes ul-beam-scatter {
  0% { transform: scale(0.6) rotate(0deg); opacity: 0.3; }
  100% { transform: scale(1.2) rotate(90deg); opacity: 1; }
}

@keyframes ul-beam-bending {
  0% { transform: skewY(-15deg); }
  100% { transform: skewY(15deg); }
}

@keyframes ul-beam-frequency {
  0% { transform: skewX(-20deg) scaleY(0.7); }
  100% { transform: skewX(20deg) scaleY(1.3); }
}

@keyframes ul-beam-foam {
  0%, 100% { transform: scale(0.5); opacity: 0.2; }
  50% { transform: scale(1.8); opacity: 1; }
}

@keyframes ul-gravity-ripples {
  0% { width: 0%; height: 0%; opacity: 1; }
  100% { width: 95%; height: 95%; opacity: 0; }
}

@keyframes ul-gravity-distortion {
  0% { transform: skewX(-15deg) skewY(-5deg) scale(0.85); }
  100% { transform: skewX(15deg) skewY(5deg) scale(1.1); }
}

@keyframes ul-gravity-merge-a {
  0% { transform: rotate(0deg) translate(16px); }
  80% { transform: rotate(720deg) translate(2px); }
  100% { transform: rotate(900deg) translate(2px) scale(0); opacity: 0; }
}

@keyframes ul-gravity-merge-b {
  0% { transform: rotate(180deg) translate(16px); }
  80% { transform: rotate(900deg) translate(2px); }
  100% { transform: rotate(1080deg) translate(2px) scale(0); opacity: 0; }
}

@keyframes ul-gravity-pull {
  0% { transform: scale(0.7); opacity: 0.3; }
  100% { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

@keyframes ul-gravity-packet {
  0% { transform: scaleX(0.2); opacity: 0.2; }
  50% { transform: scaleX(1.2); opacity: 1; }
  100% { transform: scaleX(0.2); opacity: 0.2; }
}

@keyframes ul-gravity-tidal {
  0% { transform: scaleX(0.5) scaleY(1.1); }
  100% { transform: scaleX(1.2) scaleY(0.6); }
}

@keyframes ul-gravity-horizon {
  0% { transform: scale(0.8); }
  100% { transform: scale(1.15); }
}

@keyframes ul-gravity-inter-a {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes ul-gravity-inter-b {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes ul-gravity-well {
  0% { transform: rotate(0deg) translate(20px) scale(1.2); opacity: 1; }
  100% { transform: rotate(720deg) translate(0) scale(0.2); opacity: 0; }
}

@keyframes ul-fusion-inject {
  0% { transform: scale(0.2); opacity: 0.1; }
  50% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0.1; }
}

@keyframes ul-fusion-glow {
  0% { transform: scale(0.7); opacity: 0.4; }
  100% { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 10px var(--ul-color)); }
}

@keyframes ul-fusion-burst {
  0% { transform: scale(0.6) rotate(-15deg); }
  100% { transform: scale(1.3) rotate(15deg); }
}

@keyframes ul-fusion-compress {
  0% { width: 95%; height: 95%; opacity: 0.2; }
  100% { width: 10%; height: 10%; opacity: 1; }
}

@keyframes ul-fusion-deuterium {
  0% { transform: rotate(0deg) scale(0.8); }
  100% { transform: rotate(180deg) scale(1.2); }
}

@keyframes ul-flux-dipole {
  0% { transform: scale(0.7) rotate(-20deg); }
  100% { transform: scale(1.15) rotate(20deg); }
}

@keyframes ul-flux-transfer {
  0% { transform: translate(-20px, 0); opacity: 0; }
  50% { transform: translate(0, -10px); opacity: 1; }
  100% { transform: translate(20px, 0); opacity: 0; }
}

@keyframes ul-flux-compass {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  70% { transform: rotate(160deg); }
}

@keyframes ul-flux-capacitor {
  0%, 100% { opacity: 0.3; text-shadow: none; }
  33% { opacity: 0.7; text-shadow: 0 0 6px var(--ul-color); }
  66% { opacity: 1; text-shadow: 0 0 15px var(--ul-color); }
}

@keyframes ul-flux-wave-a {
  0% { transform: scaleX(0.3); opacity: 0.2; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes ul-flux-wave-b {
  0% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.3); opacity: 0.2; }
}

@keyframes ul-flux-polar {
  0% { transform: rotate(0deg); color: var(--ul-color); }
  100% { transform: rotate(180deg); color: var(--ul-secondary-color); }
}

@keyframes ul-flux-ferro {
  0% { transform: scale(0.7) rotate(0deg); border-radius: 50%; }
  100% { transform: scale(1.1) rotate(45deg); border-radius: 10%; }
}

@keyframes ul-flux-tube {
  0% { left: 10%; }
  100% { left: calc(90% - 12px); }
}

@keyframes ul-flux-hysteresis {
  0%, 100% { transform: scale(0.6) skewX(-10deg); opacity: 0.3; }
  50% { transform: scale(1.15) skewX(10deg); opacity: 1; }
}

@keyframes ul-beaker-boil {
  0% { transform: translateY(12px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

@keyframes ul-beaker-pulse {
  0% { transform: scale(0.4); opacity: 0.3; }
  100% { transform: scale(1.5); opacity: 1; }
}

@keyframes ul-beaker-tilt {
  0% { transform: rotate(-12deg); }
  100% { transform: rotate(12deg); }
}

@keyframes ul-beaker-rise {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@keyframes ul-beaker-stir {
  0% { transform: rotate(0deg) scaleX(0.3); }
  50% { transform: rotate(180deg) scaleX(1.2); }
  100% { transform: rotate(360deg) scaleX(0.3); }
}

@keyframes ul-beaker-bubble-rise-float {
  0% { transform: translateY(18px) scale(0.4); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-18px) scale(1.3); opacity: 0; }
}

@keyframes ul-beaker-gas {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.3); }
}

@keyframes ul-beaker-fill-liquid {
  0% { height: 20%; }
  100% { height: 85%; }
}

@keyframes ul-prism-laser-scan {
  0% { top: 20%; }
  100% { top: 75%; }
}

@keyframes ul-prism-gem-bounce {
  0% { transform: scale(0.8) rotate(-10deg); opacity: 0.5; }
  100% { transform: scale(1.2) rotate(10deg); opacity: 1; }
}

@keyframes ul-prism-glow-pulse {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

@keyframes ul-prism-cube {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

@keyframes ul-prism-orbit {
  0% { transform: rotate(0deg) translate(14px) scale(0.6); }
  50% { transform: rotate(180deg) translate(14px) scale(1.3); }
  100% { transform: rotate(360deg) translate(14px) scale(0.6); }
}

@keyframes ul-prism-light {
  0% { opacity: 0.4; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(45deg); }
}

@keyframes ul-prism-lens {
  0% { transform: scale(0.8) scaleY(0.4); }
  100% { transform: scale(1.15) scaleY(1.15); }
}

@keyframes ul-string-vibrate {
  0% { transform: skewX(-12deg) scaleY(0.75); }
  100% { transform: skewX(12deg) scaleY(1.2); }
}

@keyframes ul-string-wave {
  0% { transform: skewX(-20deg); }
  100% { transform: skewX(20deg); }
}

@keyframes ul-string-line {
  0% { transform: scaleX(0.1) rotate(-30deg); }
  100% { transform: scaleX(1) rotate(30deg); }
}

@keyframes ul-string-3d {
  100% { transform: rotateY(45deg) rotateZ(360deg); }
}

@keyframes ul-string-inf {
  0% { transform: scale(0.8) rotate(-15deg); }
  100% { transform: scale(1.2) rotate(15deg); }
}

@keyframes ul-string-pulse {
  0% { transform: scale(0.7); opacity: 0.3; }
  100% { transform: scale(1.3); opacity: 1; }
}

@keyframes ul-string-vib-vertical {
  0% { letter-spacing: -3px; transform: scaleX(0.8); }
  100% { letter-spacing: 2px; transform: scaleX(1.25); }
}

@keyframes ul-string-morph-shapes {
  0% { border-radius: 50%; }
  100% { border-radius: 0%; transform: rotate(135deg); }
}

@keyframes ul-neural-pulse {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

@keyframes ul-neural-orbit {
  0% { transform: rotate(0deg) translate(12px); }
  100% { transform: rotate(360deg) translate(12px); }
}

@keyframes ul-neural-letter-spacing {
  0% { letter-spacing: -2px; }
  100% { letter-spacing: 8px; }
}

@keyframes ul-neural-radial-pulse {
  0% { opacity: 0.3; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1.3); }
}

@keyframes ul-neural-inset-bounce {
  0% { transform: scale(0.5); }
  100% { transform: scale(1.15); }
}

@keyframes ul-neural-brain-scale {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

@keyframes ul-neural-box-jump {
  0% { transform: translate(-8px, -8px); }
  100% { transform: translate(8px, 8px); }
}

@keyframes ul-neural-expand-waves {
  0% { transform: scale(0.2); opacity: 1; box-shadow: 0 0 0 0 var(--ul-color); }
  100% { transform: scale(3); opacity: 0; box-shadow: 0 0 0 16px transparent; }
}

@keyframes ul-processor-scale {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1.05); opacity: 1; }
}

@keyframes ul-processor-text-glow {
  0% { transform: scale(0.8); opacity: 0.3; text-shadow: 0 0 2px var(--ul-color); }
  100% { transform: scale(1.2); opacity: 1; text-shadow: 0 0 10px var(--ul-color); }
}

@keyframes ul-processor-split {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes ul-processor-double-spin {
  100% { transform: rotate(360deg); }
}

@keyframes ul-processor-bounce {
  0% { transform: translate(-8px, -8px); }
  100% { transform: translate(8px, 8px); }
}

@keyframes ul-processor-border {
  0% { transform: scale(0.85); opacity: 0.3; }
  100% { transform: scale(1.05); opacity: 1; }
}

@keyframes ul-processor-3d {
  100% { transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg); }
}

@keyframes ul-processor-grid-char {
  0%, 100% { content: '░'; }
  50% { content: '▓'; }
}

@keyframes ul-processor-glitch {
  0%, 100% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(20% 0 40% 0); transform: skewX(5deg); }
  60% { clip-path: inset(60% 0 10% 0); transform: skewX(-5deg); }
}

@keyframes ul-shield-glow-pulse {
  0% { transform: scale(0.85); }
  100% { transform: scale(1.05); }
}

@keyframes ul-shield-icon-shake {
  0% { transform: scale(0.8) rotate(-15deg); }
  100% { transform: scale(1.2) rotate(15deg); }
}

@keyframes ul-shield-nest {
  0% { width: 0%; height: 0%; opacity: 1; }
  100% { width: 90%; height: 90%; opacity: 0; }
}

@keyframes ul-shield-radial {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

@keyframes ul-shield-lock-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); opacity: 0.75; }
}

@keyframes ul-shield-dome {
  0% { transform: scaleX(0.8); opacity: 0.5; }
  100% { transform: scaleX(1.25); opacity: 1; }
}

@keyframes ul-shield-half {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(225deg); }
}

@keyframes ul-shield-bar-scan {
  0% { left: 4px; }
  100% { left: calc(100% - 8px); }
}

@keyframes ul-binary-matrix-rain-a {
  0% { transform: translateY(-33%); }
  100% { transform: translateY(33%); }
}

@keyframes ul-binary-matrix-rain-b {
  0% { transform: translateY(-33%); }
  100% { transform: translateY(33%); }
}

@keyframes ul-binary-matrix-flicker {
  0%, 100% { content: '0101'; }
  25% { content: '1010'; }
  50% { content: '1100'; }
  75% { content: '0011'; }
}

@keyframes ul-binary-matrix-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes ul-binary-matrix-brackets {
  0% { letter-spacing: -2px; }
  100% { letter-spacing: 6px; }
}

@keyframes ul-binary-matrix-scale {
  0% { transform: scale(0.8) skewX(-10deg); opacity: 0.3; }
  100% { transform: scale(1.2) skewX(10deg); opacity: 1; }
}

@keyframes ul-binary-matrix-digit-toggle {
  0% { content: '1'; }
  100% { content: '0'; }
}

@keyframes ul-binary-matrix-hex {
  0% { content: '0x00'; }
  25% { content: '0x3F'; }
  50% { content: '0x7F'; }
  75% { content: '0xFF'; }
}

@keyframes ul-binary-matrix-blink-dot {
  0%, 100% { visibility: visible; }
  50% { visibility: hidden; }
}

@keyframes ul-pipeline-shift {
  100% { transform: translateX(12px); }
}

@keyframes ul-pipeline-slide {
  0% { left: 0%; }
  100% { left: 60%; }
}

@keyframes ul-pipeline-bounce {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(6px); }
}

@keyframes ul-pipeline-gate-slide {
  0% { transform: translateX(-15px); }
  100% { transform: translateX(15px); }
}

@keyframes ul-pipeline-text {
  0% { opacity: 0.2; letter-spacing: 0px; }
  100% { opacity: 1; letter-spacing: 4px; }
}

@keyframes ul-pipeline-radial {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes ul-pipeline-stripes {
  100% { transform: translateX(20px); }
}

@keyframes ul-pipeline-orbit-helix {
  0% { transform: rotate(0deg) translateY(-12px); }
  100% { transform: rotate(360deg) translateY(-12px); }
}

@keyframes ul-holo-glow {
  0% { transform: rotateX(60deg) scale(0.9); opacity: 0.3; }
  100% { transform: rotateX(60deg) scale(1.15); opacity: 1; box-shadow: 0 0 12px var(--ul-color); }
}

@keyframes ul-holo-spin-y {
  100% { transform: rotateY(60deg) rotateZ(360deg); }
}

@keyframes ul-holo-triangle {
  0% { transform: rotate(0deg) scale(0.8); opacity: 0.3; }
  100% { transform: rotate(180deg) scale(1.2); opacity: 1; }
}

@keyframes ul-holo-grid-scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

@keyframes ul-holo-cube-spin {
  100% { transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg); }
}

@keyframes ul-holo-glitch-char {
  0% { transform: translate(-2px, 1px) scale(0.9); }
  33% { transform: translate(2px, -2px) scale(1.1); }
  66% { transform: translate(-1px, 2px) scale(1); }
}

@keyframes ul-holo-beam {
  0% { transform: scaleY(0.2); opacity: 0.2; }
  100% { transform: scaleY(1.15); opacity: 0.9; }
}

@keyframes ul-holo-star-scale {
  0% { transform: scale(0.7); opacity: 0.4; }
  100% { transform: scale(1.3); opacity: 1; }
}

@keyframes ul-holo-cone {
  0% { transform: scale(0.6); }
  100% { transform: scale(1.1); }
}

@keyframes ul-holo-txt-flicker {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes ul-bio-scan-line-1 {
  0% { top: 10%; }
  100% { top: 90%; }
}

@keyframes ul-bio-scan-line-2 {
  0% { top: 5%; }
  100% { top: 95%; }
}

@keyframes ul-bio-eye-pulse {
  0% { transform: scale(0.85); }
  100% { transform: scale(1.2); }
}

@keyframes ul-bio-thumb {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.15); }
}

@keyframes ul-bio-user {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1.15); opacity: 1; }
}

@keyframes ul-bio-double-ripple {
  0% { width: 0%; height: 0%; opacity: 1; }
  100% { width: 95%; height: 95%; opacity: 0; }
}

@keyframes ul-bio-ok {
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 6px var(--ul-color); }
}

@keyframes ul-cloud-sync-scale {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

@keyframes ul-cloud-sync-up {
  0% { transform: translateY(8px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}

@keyframes ul-cloud-sync-down {
  0% { transform: translateY(-8px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

@keyframes ul-cloud-bounce-y {
  0% { transform: translateY(-5px); }
  100% { transform: translateY(5px); }
}

@keyframes ul-cloud-sync-distrib {
  0% { box-shadow: -15px 0 var(--ul-secondary-color), 15px 0 var(--ul-secondary-color); }
  100% { box-shadow: -6px 0 var(--ul-secondary-color), 6px 0 var(--ul-secondary-color); }
}

@keyframes ul-cloud-duo-a {
  0% { transform: translate(-10px, -4px) scale(0.8); opacity: 0.5; }
  100% { transform: translate(10px, 4px) scale(1.1); opacity: 1; }
}

@keyframes ul-cloud-duo-b {
  0% { transform: translate(10px, 4px) scale(1.1); opacity: 1; }
  100% { transform: translate(-10px, -4px) scale(0.8); opacity: 0.5; }
}

@keyframes ul-cloud-sync-rotate-y {
  100% { transform: rotateY(360deg); }
}

@keyframes ul-laser-beam-reflect {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

@keyframes ul-laser-converge-a {
  0% { transform: rotate(45deg); }
  100% { transform: rotate(0deg); }
}

@keyframes ul-laser-converge-b {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}

@keyframes ul-laser-spark {
  0% { transform: scale(0.5); opacity: 0.3; }
  100% { transform: scale(1.8); opacity: 1; box-shadow: 0 0 25px var(--ul-color); }
}

@keyframes ul-laser-cross-a {
  0% { transform: rotate(30deg); }
  100% { transform: rotate(60deg); }
}

@keyframes ul-laser-cross-b {
  0% { transform: rotate(-30deg); }
  100% { transform: rotate(-60deg); }
}

@keyframes ul-laser-fiber {
  0% { left: -5%; }
  100% { left: 75%; }
}

@keyframes ul-laser-modulation {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 10px red); }
}

@keyframes ul-laser-collimator {
  0% { transform: scaleX(0.2) scaleY(4); }
  100% { transform: scaleX(1.1) scaleY(0.4); }
}

@keyframes ul-telecom-wave-expanding {
  0% { transform: scale(0.2); box-shadow: 0 0 0 0 var(--ul-color); opacity: 1; }
  100% { transform: scale(2.8); box-shadow: 0 0 0 16px transparent; opacity: 0; }
}

@keyframes ul-telecom-dish-wobble {
  0% { transform: rotate(-15deg) scale(0.9); }
  100% { transform: rotate(15deg) scale(1.15); }
}

@keyframes ul-telecom-signal-bars {
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.2); }
}

@keyframes ul-telecom-antenna-scale {
  0% { transform: scaleY(0.6); opacity: 0.4; }
  100% { transform: scaleY(1.3); opacity: 1; }
}

@keyframes ul-telecom-wifi-flicker {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}

@keyframes ul-telecom-arc-pulse {
  0% { transform: scale(0.6); opacity: 0.3; }
  100% { transform: scale(1.2); opacity: 1; }
}

@keyframes ul-telecom-core-pulse {
  0% { transform: scale(0.5); opacity: 0.3; }
  100% { transform: scale(1.3); opacity: 1; }
}

@keyframes ul-telecom-strength-bars {
  0% { opacity: 0.25; }
  100% { opacity: 1; }
}