/* =========================================================
   LIVEOP LUNA AVATAR, static-site port
   ---------------------------------------------------------
   Ported 1:1 from the Angular component
     UILibraries/projects/liveop/components/src/liveopcomponents/
     lo-luna-avatar/lo-luna-avatar.component.scss
   Only these mechanical changes were made:
     1. nesting flattened (the prototype ships plain CSS)
     2. `:host` becomes `.lo-luna-avatar`
     3. em-dashes stripped from the comments (house rule)
   Everything else, all ten states and nine animation presets,
   is byte-identical to the shipped component. Re-port rather
   than hand-edit when the Angular component changes.

   Markup contract (see luna.js -> avatarMarkup):
     <div class="lo-luna-avatar" style="--lo-luna-avatar-size:96px">
       <div class="lo-luna-avatar__stack">
         <div class="lo-luna-avatar__scene lo-luna-avatar__scene--steady"
              data-state="idle" data-animation="default"> ... </div>
   States:     idle listening locating thinking connecting
               loading sending executing success error
   Animations: default wave morph radar travel transport
               exclamation spin pulse
   ========================================================= */

/* Register the size var so consumers can transition it smoothly
   (e.g. `transition: --lo-luna-avatar-size 320ms ease`). Falls back
   to a regular custom property in browsers without @property. */

@property --lo-luna-avatar-size {
  syntax: '<length>';
  inherits: true;
  initial-value: 96px;
}

.lo-luna-avatar {
  --lo-luna-state-blend: 420ms;
  --lo-luna-glow-cyan: #71e7ff;
  --lo-luna-glow-blue: #4494ff;
  --lo-luna-glow-violet: #7f58ff;
  --lo-luna-glow-magenta: #d455ff;
  --lo-luna-blob-saturate: 138%;
  --lo-luna-aura-opacity: 1;
  --lo-luna-dur-aura: 6s;
  --lo-luna-dur-spin: 18s;
  --lo-luna-dur-fluid: 9.5s;
  --lo-luna-dur-shimmer: 7s;
  --lo-luna-dur-blob1: 9s;
  --lo-luna-dur-blob2: 10.5s;
  --lo-luna-dur-blob3: 11s;
  --lo-luna-dur-blob4: 8.5s;
  --lo-luna-dur-core: 4s;
  --lo-luna-dur-wave: 8s;
  --lo-luna-dur-wave-rev: 10s;
  --lo-luna-dur-synapse: 4.4s;
  --lo-luna-dur-orbit: 11s;
  --lo-luna-dur-orbit-rev: 8.5s;
  --lo-luna-dur-border: 7.5s;
  display: inline-block;
  width: var(--lo-luna-avatar-size);
  height: var(--lo-luna-avatar-size);
  background: transparent;
  line-height: 0;
  pointer-events: none;
  contain: layout paint;
}

.lo-luna-avatar__stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.lo-luna-avatar__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  opacity: 1;
  transform: scale(1);
  will-change: opacity, transform;
}

.lo-luna-avatar__scene--enter {
  animation: loLunaSceneEnter var(--lo-luna-state-blend) ease both;
}

.lo-luna-avatar__scene--exit {
  animation: loLunaSceneExit var(--lo-luna-state-blend) ease both;
}

.lo-luna-avatar__scene::before,
.lo-luna-avatar__scene::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.07));
  opacity: calc(0.85 * var(--lo-luna-aura-opacity));
  pointer-events: none;
}

.lo-luna-avatar__scene::before {
  background:
    radial-gradient(circle at 30% 45%, color-mix(in srgb, var(--lo-luna-glow-cyan) 24%, transparent), transparent 28%),
    radial-gradient(circle at 66% 36%, color-mix(in srgb, var(--lo-luna-glow-violet) 22%, transparent), transparent 30%),
    radial-gradient(circle at 48% 68%, color-mix(in srgb, var(--lo-luna-glow-magenta) 18%, transparent), transparent 35%);
  animation: loLunaAuraPulse var(--lo-luna-dur-aura) ease-in-out infinite;
}

.lo-luna-avatar__scene::after {
  inset: -6%;
  background: conic-gradient(
    from 0deg,
    transparent,
    color-mix(in srgb, var(--lo-luna-glow-cyan) 10%, transparent),
    transparent 26%,
    color-mix(in srgb, var(--lo-luna-glow-violet) 12%, transparent),
    transparent 54%,
    color-mix(in srgb, var(--lo-luna-glow-blue) 14%, transparent),
    transparent 78%,
    color-mix(in srgb, var(--lo-luna-glow-magenta) 12%, transparent),
    transparent
  );
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.05));
  animation: loLunaSlowSpin var(--lo-luna-dur-spin) linear infinite;
}

.lo-luna-avatar__orb {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.14) 10%, transparent 20%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03) 42%, rgba(0, 0, 0, 0.16) 74%, rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 calc(var(--lo-luna-avatar-size) * 0.029) rgba(255, 255, 255, 0.03),
    inset 0 calc(var(--lo-luna-avatar-size) * -0.088) calc(var(--lo-luna-avatar-size) * 0.147) rgba(15, 18, 32, 0.35),
    0 calc(var(--lo-luna-avatar-size) * 0.07) calc(var(--lo-luna-avatar-size) * 0.205) rgba(0, 0, 0, 0.45),
    0 0 calc(var(--lo-luna-avatar-size) * 0.1) rgba(108, 168, 255, 0.18);
}

.lo-luna-avatar__orb::before,
.lo-luna-avatar__orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.lo-luna-avatar__orb::before {
  inset: 1.1%;
  border: 1px solid rgba(235, 246, 255, 0.16);
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.2), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 28%, transparent 70%, rgba(170, 220, 255, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(120, 160, 255, 0.06),
    0 0 calc(var(--lo-luna-avatar-size) * 0.053) rgba(171, 228, 255, 0.06);
}

.lo-luna-avatar__orb::after {
  inset: auto 12% 7% 12%;
  height: 18%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.42), transparent 72%);
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.041));
  transform: scaleY(0.55);
}

.lo-luna-avatar__fluid {
  position: absolute;
  inset: 7.25%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(29, 39, 72, 0.85), rgba(12, 14, 28, 0.98) 64%),
    linear-gradient(180deg, rgba(52, 69, 124, 0.4), rgba(13, 15, 29, 0.95));
  box-shadow:
    inset 0 calc(var(--lo-luna-avatar-size) * 0.053) calc(var(--lo-luna-avatar-size) * 0.088) rgba(255, 255, 255, 0.08),
    inset 0 calc(var(--lo-luna-avatar-size) * -0.059) calc(var(--lo-luna-avatar-size) * 0.082) rgba(0, 0, 0, 0.44);
}

.lo-luna-avatar__fluid::before,
.lo-luna-avatar__fluid::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
}

.lo-luna-avatar__fluid::before {
  background:
    radial-gradient(circle at 28% 42%, color-mix(in srgb, var(--lo-luna-glow-cyan) 90%, transparent), transparent 16%),
    radial-gradient(circle at 72% 35%, color-mix(in srgb, var(--lo-luna-glow-violet) 95%, transparent), transparent 18%),
    radial-gradient(circle at 48% 67%, color-mix(in srgb, var(--lo-luna-glow-blue) 88%, transparent), transparent 16%),
    radial-gradient(circle at 62% 58%, color-mix(in srgb, var(--lo-luna-glow-magenta) 82%, transparent), transparent 22%);
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.053)) saturate(130%);
  animation: loLunaFluidShift var(--lo-luna-dur-fluid) ease-in-out infinite alternate;
}

.lo-luna-avatar__fluid::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 24%),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.1), transparent 18%),
    radial-gradient(circle at 70% 72%, rgba(255, 255, 255, 0.08), transparent 16%);
  mix-blend-mode: screen;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.023));
  animation: loLunaShimmer var(--lo-luna-dur-shimmer) ease-in-out infinite;
}

.lo-luna-avatar__blob,
.lo-luna-avatar__wave,
.lo-luna-avatar__synapse {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.lo-luna-avatar__blob {
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.041)) saturate(var(--lo-luna-blob-saturate));
  opacity: 0.94;
  mix-blend-mode: screen;
}

.lo-luna-avatar__blob--1 {
  width: 40%;
  height: 38%;
  left: 14%;
  top: 24%;
  background: radial-gradient(
    circle at 35% 35%,
    color-mix(in srgb, var(--lo-luna-glow-cyan) 96%, white),
    color-mix(in srgb, var(--lo-luna-glow-blue) 68%, transparent) 52%,
    transparent 78%
  );
  animation: loLunaBlobFloat1 var(--lo-luna-dur-blob1) ease-in-out infinite;
}

.lo-luna-avatar__blob--2 {
  width: 46%;
  height: 34%;
  right: 7%;
  top: 16%;
  background: radial-gradient(
    circle at 40% 45%,
    color-mix(in srgb, var(--lo-luna-glow-violet) 94%, white),
    color-mix(in srgb, var(--lo-luna-glow-violet) 72%, black) 48%,
    transparent 76%
  );
  animation: loLunaBlobFloat2 var(--lo-luna-dur-blob2) ease-in-out infinite;
}

.lo-luna-avatar__blob--3 {
  width: 42%;
  height: 42%;
  left: 28%;
  bottom: 8%;
  background: radial-gradient(
    circle at 55% 30%,
    color-mix(in srgb, var(--lo-luna-glow-cyan) 92%, white),
    color-mix(in srgb, var(--lo-luna-glow-blue) 70%, transparent) 48%,
    transparent 78%
  );
  animation: loLunaBlobFloat3 var(--lo-luna-dur-blob3) ease-in-out infinite;
}

.lo-luna-avatar__blob--4 {
  width: 34%;
  height: 30%;
  right: 18%;
  bottom: 18%;
  background: radial-gradient(
    circle at 45% 48%,
    color-mix(in srgb, var(--lo-luna-glow-magenta) 86%, white),
    color-mix(in srgb, var(--lo-luna-glow-violet) 64%, transparent) 45%,
    transparent 78%
  );
  animation: loLunaBlobFloat4 var(--lo-luna-dur-blob4) ease-in-out infinite;
}

.lo-luna-avatar__blob--5 {
  width: 26%;
  height: 24%;
  left: 42%;
  top: 39%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(228, 255, 255, 0.92),
    color-mix(in srgb, var(--lo-luna-glow-cyan) 52%, transparent) 44%,
    transparent 74%
  );
  animation: loLunaCoreBreath var(--lo-luna-dur-core) ease-in-out infinite;
}

.lo-luna-avatar__wave {
  inset: 18% -8%;
  border-radius: 45% 55% 50% 50%;
  border: 1px solid rgba(182, 235, 255, 0.16);
  border-left-color: transparent;
  border-right-color: transparent;
  opacity: 0.55;
}

.lo-luna-avatar__wave--1 {
  transform: rotate(9deg);
  animation: loLunaWaveDrift var(--lo-luna-dur-wave) ease-in-out infinite;
}

.lo-luna-avatar__wave--2 {
  inset: 28% -16%;
  border-color: rgba(181, 131, 255, 0.16);
  border-left-color: transparent;
  border-right-color: transparent;
  transform: rotate(-12deg);
  animation: loLunaWaveDriftReverse var(--lo-luna-dur-wave-rev) ease-in-out infinite;
}

.lo-luna-avatar__wave--3 {
  inset: 38% -10%;
  border-color: rgba(96, 216, 255, 0.12);
  border-left-color: transparent;
  border-right-color: transparent;
  transform: rotate(14deg);
  animation: loLunaWaveDrift var(--lo-luna-dur-wave) ease-in-out infinite reverse;
}

.lo-luna-avatar__synapse {
  width: 7%;
  height: 7%;
  background: radial-gradient(circle, rgba(245, 252, 255, 0.96), color-mix(in srgb, var(--lo-luna-glow-cyan) 45%, transparent) 42%, transparent 72%);
  box-shadow:
    0 0 calc(var(--lo-luna-avatar-size) * 0.035) color-mix(in srgb, var(--lo-luna-glow-cyan) 72%, transparent),
    0 0 calc(var(--lo-luna-avatar-size) * 0.082) color-mix(in srgb, var(--lo-luna-glow-violet) 24%, transparent);
  opacity: 0.8;
}

.lo-luna-avatar__synapse--1 {
  left: 28%;
  top: 32%;
  animation: loLunaSynapseBlink calc(var(--lo-luna-dur-synapse) * 0.86) ease-in-out infinite;
}

.lo-luna-avatar__synapse--2 {
  right: 24%;
  top: 37%;
  animation: loLunaSynapseBlink calc(var(--lo-luna-dur-synapse) * 1.05) ease-in-out infinite 0.8s;
}

.lo-luna-avatar__synapse--3 {
  left: 34%;
  bottom: 26%;
  animation: loLunaSynapseBlink calc(var(--lo-luna-dur-synapse) * 0.95) ease-in-out infinite 1.1s;
}

.lo-luna-avatar__synapse--4 {
  right: 30%;
  bottom: 22%;
  animation: loLunaSynapseBlink calc(var(--lo-luna-dur-synapse) * 1.16) ease-in-out infinite 0.5s;
}

.lo-luna-avatar__glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 22%, transparent 70%, rgba(255, 255, 255, 0.12)),
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.52), transparent 20%),
    radial-gradient(circle at 70% 74%, rgba(255, 255, 255, 0.12), transparent 14%),
    radial-gradient(circle at 50% 50%, transparent 68%, rgba(198, 235, 255, 0.09) 76%, rgba(255, 255, 255, 0.16) 84%, rgba(255, 255, 255, 0.04) 91%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.lo-luna-avatar__ring {
  position: absolute;
  inset: 1.3%;
  border-radius: 50%;
  border: 1px solid rgba(228, 245, 255, 0.14);
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.34), transparent 16%),
    radial-gradient(circle at 74% 76%, rgba(141, 222, 255, 0.14), transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 76.5%, rgba(255, 255, 255, 0.04) 80.5%, rgba(204, 239, 255, 0.18) 85%, rgba(255, 255, 255, 0.08) 89%, transparent 93%);
  box-shadow:
    0 0 calc(var(--lo-luna-avatar-size) * 0.076) rgba(86, 166, 255, 0.1),
    0 0 calc(var(--lo-luna-avatar-size) * 0.123) rgba(127, 88, 255, 0.06),
    inset 0 0 calc(var(--lo-luna-avatar-size) * 0.035) rgba(204, 239, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-mask: radial-gradient(circle, transparent 76%, #000 80%, #000 92%, transparent 96%);
  mask: radial-gradient(circle, transparent 76%, #000 80%, #000 92%, transparent 96%);
  animation: loLunaBorderMorph var(--lo-luna-dur-border) ease-in-out infinite;
}

.lo-luna-avatar__ring::before,
.lo-luna-avatar__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 75%, #000 79%, #000 92%, transparent 96%);
  mask: radial-gradient(circle, transparent 75%, #000 79%, #000 92%, transparent 96%);
}

.lo-luna-avatar__ring::before {
  inset: -1.2%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.2) 8%,
    color-mix(in srgb, var(--lo-luna-glow-cyan) 10%, transparent) 16%,
    rgba(255, 255, 255, 0.02) 24%,
    color-mix(in srgb, var(--lo-luna-glow-violet) 12%, transparent) 38%,
    rgba(255, 255, 255, 0.03) 50%,
    color-mix(in srgb, var(--lo-luna-glow-cyan) 16%, transparent) 66%,
    rgba(255, 255, 255, 0.02) 78%,
    color-mix(in srgb, var(--lo-luna-glow-magenta) 14%, transparent) 88%,
    rgba(255, 255, 255, 0.06)
  );
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.023)) saturate(120%);
  mix-blend-mode: screen;
  animation: loLunaLiquidOrbit var(--lo-luna-dur-orbit) linear infinite;
}

.lo-luna-avatar__ring::after {
  inset: 0.6%;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.52), transparent 10%),
    radial-gradient(circle at 84% 72%, rgba(255, 255, 255, 0.22), transparent 12%),
    conic-gradient(
      from 180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.01) 18%,
      color-mix(in srgb, var(--lo-luna-glow-cyan) 8%, transparent) 32%,
      rgba(255, 255, 255, 0.02) 46%,
      color-mix(in srgb, var(--lo-luna-glow-violet) 10%, transparent) 64%,
      rgba(255, 255, 255, 0.02) 82%,
      rgba(255, 255, 255, 0.08)
    );
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.009));
  opacity: 0.9;
  animation: loLunaLiquidOrbitReverse var(--lo-luna-dur-orbit-rev) ease-in-out infinite;
}

/* ------------------------------------------------------------------ */

/* States                                                             */

/* ------------------------------------------------------------------ */

.lo-luna-avatar__scene[data-state="listening"] {
  --lo-luna-glow-cyan: #8af2ff;
  --lo-luna-glow-blue: #4fa6ff;
  --lo-luna-glow-violet: #6f6cff;
  --lo-luna-glow-magenta: #b07cff;
  --lo-luna-blob-saturate: 120%;
  --lo-luna-aura-opacity: 0.85;
  --lo-luna-dur-aura: 8s;
  --lo-luna-dur-spin: 22s;
  --lo-luna-dur-fluid: 12s;
  --lo-luna-dur-shimmer: 9s;
  --lo-luna-dur-blob1: 11s;
  --lo-luna-dur-blob2: 12.5s;
  --lo-luna-dur-blob3: 13s;
  --lo-luna-dur-blob4: 10.5s;
  --lo-luna-dur-core: 5.5s;
  --lo-luna-dur-wave: 10s;
  --lo-luna-dur-wave-rev: 12s;
  --lo-luna-dur-synapse: 5.4s;
  --lo-luna-dur-orbit: 13s;
  --lo-luna-dur-orbit-rev: 10.5s;
  --lo-luna-dur-border: 9.5s;
}

.lo-luna-avatar__scene[data-state="locating"] {
  --lo-luna-glow-cyan: #92f6ff;
  --lo-luna-glow-blue: #55b0ff;
  --lo-luna-glow-violet: #7a86ff;
  --lo-luna-glow-magenta: #9f9cff;
  --lo-luna-blob-saturate: 128%;
  --lo-luna-aura-opacity: 0.94;
  --lo-luna-dur-aura: 6.5s;
  --lo-luna-dur-spin: 16s;
  --lo-luna-dur-fluid: 8.5s;
  --lo-luna-dur-shimmer: 7s;
  --lo-luna-dur-blob1: 8.5s;
  --lo-luna-dur-blob2: 9.3s;
  --lo-luna-dur-blob3: 9.6s;
  --lo-luna-dur-blob4: 8.1s;
  --lo-luna-dur-core: 4.2s;
  --lo-luna-dur-wave: 7.2s;
  --lo-luna-dur-wave-rev: 8.4s;
  --lo-luna-dur-synapse: 3.8s;
  --lo-luna-dur-orbit: 9.2s;
  --lo-luna-dur-orbit-rev: 7.6s;
  --lo-luna-dur-border: 7.4s;
}

.lo-luna-avatar__scene[data-state="thinking"] {
  --lo-luna-glow-cyan: #71e7ff;
  --lo-luna-glow-blue: #4494ff;
  --lo-luna-glow-violet: #7f58ff;
  --lo-luna-glow-magenta: #d455ff;
  --lo-luna-blob-saturate: 165%;
  --lo-luna-aura-opacity: 1.1;
  --lo-luna-dur-aura: 3.2s;
  --lo-luna-dur-spin: 9s;
  --lo-luna-dur-fluid: 4.5s;
  --lo-luna-dur-shimmer: 3.4s;
  --lo-luna-dur-blob1: 4.2s;
  --lo-luna-dur-blob2: 4.8s;
  --lo-luna-dur-blob3: 5s;
  --lo-luna-dur-blob4: 3.8s;
  --lo-luna-dur-core: 1.8s;
  --lo-luna-dur-wave: 4s;
  --lo-luna-dur-wave-rev: 4.6s;
  --lo-luna-dur-synapse: 1.6s;
  --lo-luna-dur-orbit: 5.5s;
  --lo-luna-dur-orbit-rev: 4.2s;
  --lo-luna-dur-border: 3.6s;
}

.lo-luna-avatar__scene[data-state="connecting"] {
  --lo-luna-glow-cyan: #70f4ff;
  --lo-luna-glow-blue: #2f8fff;
  --lo-luna-glow-violet: #53c4ff;
  --lo-luna-glow-magenta: #93eeff;
  --lo-luna-blob-saturate: 172%;
  --lo-luna-aura-opacity: 1.12;
  --lo-luna-dur-aura: 2.8s;
  --lo-luna-dur-spin: 7.8s;
  --lo-luna-dur-fluid: 4s;
  --lo-luna-dur-shimmer: 3.1s;
  --lo-luna-dur-blob1: 3.8s;
  --lo-luna-dur-blob2: 4.2s;
  --lo-luna-dur-blob3: 4.5s;
  --lo-luna-dur-blob4: 3.5s;
  --lo-luna-dur-core: 1.6s;
  --lo-luna-dur-wave: 3.5s;
  --lo-luna-dur-wave-rev: 4s;
  --lo-luna-dur-synapse: 1.3s;
  --lo-luna-dur-orbit: 4.8s;
  --lo-luna-dur-orbit-rev: 3.8s;
  --lo-luna-dur-border: 3.2s;
}

.lo-luna-avatar__scene[data-state="loading"] {
  --lo-luna-glow-cyan: #8fdfff;
  --lo-luna-glow-blue: #4a8eff;
  --lo-luna-glow-violet: #6f72ff;
  --lo-luna-glow-magenta: #a27cff;
  --lo-luna-blob-saturate: 150%;
  --lo-luna-aura-opacity: 1.02;
  --lo-luna-dur-aura: 3.6s;
  --lo-luna-dur-spin: 6.2s;
  --lo-luna-dur-fluid: 3.8s;
  --lo-luna-dur-shimmer: 3s;
  --lo-luna-dur-blob1: 3.6s;
  --lo-luna-dur-blob2: 4.1s;
  --lo-luna-dur-blob3: 4.4s;
  --lo-luna-dur-blob4: 3.3s;
  --lo-luna-dur-core: 1.5s;
  --lo-luna-dur-wave: 3.2s;
  --lo-luna-dur-wave-rev: 3.8s;
  --lo-luna-dur-synapse: 1.2s;
  --lo-luna-dur-orbit: 4.5s;
  --lo-luna-dur-orbit-rev: 3.6s;
  --lo-luna-dur-border: 3s;
}

.lo-luna-avatar__scene[data-state="executing"] {
  --lo-luna-glow-cyan: #5cf2ff;
  --lo-luna-glow-blue: #2e7dff;
  --lo-luna-glow-violet: #4fb8ff;
  --lo-luna-glow-magenta: #74e8ff;
  --lo-luna-blob-saturate: 175%;
  --lo-luna-aura-opacity: 1.2;
  --lo-luna-dur-aura: 2s;
  --lo-luna-dur-spin: 5s;
  --lo-luna-dur-fluid: 2.6s;
  --lo-luna-dur-shimmer: 2.2s;
  --lo-luna-dur-blob1: 2.6s;
  --lo-luna-dur-blob2: 3s;
  --lo-luna-dur-blob3: 3.2s;
  --lo-luna-dur-blob4: 2.4s;
  --lo-luna-dur-core: 1.2s;
  --lo-luna-dur-wave: 2.4s;
  --lo-luna-dur-wave-rev: 2.8s;
  --lo-luna-dur-synapse: 1s;
  --lo-luna-dur-orbit: 3.4s;
  --lo-luna-dur-orbit-rev: 2.6s;
  --lo-luna-dur-border: 2.4s;
}

.lo-luna-avatar__scene[data-state="sending"] {
  --lo-luna-glow-cyan: #70f4ff;
  --lo-luna-glow-blue: #2f8fff;
  --lo-luna-glow-violet: #53c4ff;
  --lo-luna-glow-magenta: #93eeff;
  --lo-luna-blob-saturate: 178%;
  --lo-luna-aura-opacity: 1.24;
  --lo-luna-dur-aura: 1.7s;
  --lo-luna-dur-spin: 4.2s;
  --lo-luna-dur-fluid: 2.2s;
  --lo-luna-dur-shimmer: 1.9s;
  --lo-luna-dur-blob1: 2.2s;
  --lo-luna-dur-blob2: 2.6s;
  --lo-luna-dur-blob3: 2.8s;
  --lo-luna-dur-blob4: 2s;
  --lo-luna-dur-core: 1s;
  --lo-luna-dur-wave: 2s;
  --lo-luna-dur-wave-rev: 2.4s;
  --lo-luna-dur-synapse: 0.92s;
  --lo-luna-dur-orbit: 3s;
  --lo-luna-dur-orbit-rev: 2.3s;
  --lo-luna-dur-border: 2.1s;
}

.lo-luna-avatar__scene[data-state="success"] {
  --lo-luna-glow-cyan: #6dffc4;
  --lo-luna-glow-blue: #34e3a4;
  --lo-luna-glow-violet: #6ee0ff;
  --lo-luna-glow-magenta: #aaffd9;
  --lo-luna-blob-saturate: 140%;
  --lo-luna-aura-opacity: 1.05;
  --lo-luna-dur-aura: 4.4s;
  --lo-luna-dur-spin: 14s;
  --lo-luna-dur-fluid: 7s;
  --lo-luna-dur-shimmer: 5s;
  --lo-luna-dur-blob1: 6.5s;
  --lo-luna-dur-blob2: 7.2s;
  --lo-luna-dur-blob3: 7.8s;
  --lo-luna-dur-blob4: 6s;
  --lo-luna-dur-core: 2.8s;
  --lo-luna-dur-wave: 6s;
  --lo-luna-dur-wave-rev: 7s;
  --lo-luna-dur-synapse: 3.2s;
  --lo-luna-dur-orbit: 8s;
  --lo-luna-dur-orbit-rev: 6.4s;
  --lo-luna-dur-border: 5.4s;
}

.lo-luna-avatar__scene[data-state="error"] {
  --lo-luna-glow-cyan: #ffb56b;
  --lo-luna-glow-blue: #ff6b6b;
  --lo-luna-glow-violet: #ff4f7a;
  --lo-luna-glow-magenta: #ff8a5c;
  --lo-luna-blob-saturate: 170%;
  --lo-luna-aura-opacity: 1.15;
  --lo-luna-dur-aura: 1.6s;
  --lo-luna-dur-spin: 7s;
  --lo-luna-dur-fluid: 3s;
  --lo-luna-dur-shimmer: 2.4s;
  --lo-luna-dur-blob1: 3s;
  --lo-luna-dur-blob2: 3.4s;
  --lo-luna-dur-blob3: 3.6s;
  --lo-luna-dur-blob4: 2.8s;
  --lo-luna-dur-core: 1.1s;
  --lo-luna-dur-wave: 2.8s;
  --lo-luna-dur-wave-rev: 3.2s;
  --lo-luna-dur-synapse: 0.9s;
  --lo-luna-dur-orbit: 4s;
  --lo-luna-dur-orbit-rev: 3s;
  --lo-luna-dur-border: 2.6s;
}

/* ------------------------------------------------------------------ */

/* Animation choreography presets                                      */

/* Each preset swaps blob/wave/core keyframes (the cloud structure     */

/* stays, only how it moves changes). Durations remain controlled by  */

/* the [data-state] block so "fast/active" states stay snappy.         */

/* ------------------------------------------------------------------ */

/* Each preset takes full control of animation-name + duration + timing on
   the four big blobs and the core. The state still drives colour/saturation,
   so the same motion language can still inherit the current state palette. */

/* wave, clouds gather into a blurred sine ribbon, colour travels through the
   ribbon, then the structure relaxes back into the original cloud field. */

.lo-luna-avatar__scene[data-animation="wave"] {
  --lo-luna-wave-cycle: 5.2s;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobWaveMorph1 var(--lo-luna-wave-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobWaveMorph2 var(--lo-luna-wave-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobWaveMorph3 var(--lo-luna-wave-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobWaveMorph4 var(--lo-luna-wave-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__blob--5 {
  animation: loLunaBlobWaveMorph5 var(--lo-luna-wave-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__wave {
  inset: 29% 8%;
  border: 0;
  border-radius: 999px;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.026)) saturate(185%);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__wave--1,
.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__wave--2,
.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__wave--3 {
  background-repeat: repeat-x;
  background-image:
      radial-gradient(38% 154% at 50% 158%, transparent 63%, var(--lo-luna-wave-color) 66% 97%, transparent 100%),
      radial-gradient(38% 154% at 50% -58%, transparent 63%, var(--lo-luna-wave-color) 66% 97%, transparent 100%);
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__wave--1 {
  --lo-luna-wave-color: color-mix(in srgb, var(--lo-luna-glow-cyan) 88%, white);
  inset: 30% 8%;
  background-size: 46% 51%;
  background-position: 0 0, 23% 100%;
  animation: loLunaWaveRibbonFlow1 var(--lo-luna-wave-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__wave--2 {
  --lo-luna-wave-color: color-mix(in srgb, var(--lo-luna-glow-violet) 86%, white);
  inset: 26% 10%;
  background-size: 50% 49%;
  background-position: 4% 0, 29% 100%;
  animation: loLunaWaveRibbonFlow2 var(--lo-luna-wave-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__wave--3 {
  --lo-luna-wave-color: color-mix(in srgb, var(--lo-luna-glow-magenta) 76%, white);
  inset: 34% 7%;
  background-size: 42% 56%;
  background-position: 0 0, 21% 100%;
  animation: loLunaWaveRibbonFlow3 var(--lo-luna-wave-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__synapse {
  animation-name: loLunaSynapseWaveBlink;
  animation-duration: var(--lo-luna-wave-cycle);
  animation-timing-function: ease-in-out;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__fluid::before {
  animation-duration: 14s;
}

.lo-luna-avatar__scene[data-animation="wave"] .lo-luna-avatar__fluid::after {
  animation-duration: 10s;
}

/* default, pure scale pulse, no translate. Calm idle baseline. */

.lo-luna-avatar__scene[data-animation="default"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobBreathe 6s ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="default"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobBreathe 6s ease-in-out infinite -1.5s;
}

.lo-luna-avatar__scene[data-animation="default"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobBreathe 6s ease-in-out infinite -3s;
}

.lo-luna-avatar__scene[data-animation="default"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobBreathe 6s ease-in-out infinite -4.5s;
}

.lo-luna-avatar__scene[data-animation="default"] .lo-luna-avatar__blob--5 {
  animation: loLunaCoreBreatheDeep 4s ease-in-out infinite;
}

/* morph, organic blurred cloud field that keeps reshaping itself, inspired
   by a single blob continuously changing border radii. */

.lo-luna-avatar__scene[data-animation="morph"] {
  --lo-luna-morph-cycle: 3.6s;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__blob {
  transform-origin: 50% 50%;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__blob--1 {
  width: 56%;
  height: 56%;
  left: 22%;
  top: 22%;
  background: radial-gradient(
      circle at 38% 38%,
      color-mix(in srgb, var(--lo-luna-glow-cyan) 98%, white),
      color-mix(in srgb, var(--lo-luna-glow-blue) 78%, transparent) 54%,
      transparent 80%
    );
  opacity: 0.3;
  animation:
      loLunaMorphBlobPrimary var(--lo-luna-morph-cycle) linear infinite,
      loLunaMorphProminence var(--lo-luna-morph-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__blob--2 {
  width: 56%;
  height: 56%;
  left: 22%;
  top: 22%;
  background: radial-gradient(
      circle at 44% 40%,
      color-mix(in srgb, var(--lo-luna-glow-violet) 96%, white),
      color-mix(in srgb, var(--lo-luna-glow-blue) 74%, transparent) 52%,
      transparent 80%
    );
  opacity: 0.28;
  animation:
      loLunaMorphBlobPrimary var(--lo-luna-morph-cycle) linear infinite -1.2s,
      loLunaMorphProminence var(--lo-luna-morph-cycle) ease-in-out infinite -1.2s;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__blob--3 {
  width: 56%;
  height: 56%;
  left: 22%;
  top: 22%;
  background: radial-gradient(
      circle at 46% 42%,
      color-mix(in srgb, var(--lo-luna-glow-magenta) 94%, white),
      color-mix(in srgb, var(--lo-luna-glow-violet) 72%, transparent) 50%,
      transparent 79%
    );
  opacity: 0.26;
  animation:
      loLunaMorphBlobPrimary var(--lo-luna-morph-cycle) linear infinite -2.4s,
      loLunaMorphProminence var(--lo-luna-morph-cycle) ease-in-out infinite -2.4s;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__blob--4 {
  width: 68%;
  height: 68%;
  left: 16%;
  top: 16%;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.05)) saturate(145%);
  opacity: 0.22;
  animation: loLunaMorphBlobAura calc(var(--lo-luna-morph-cycle) * 1.08) linear infinite -0.45s;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__blob--5 {
  width: 34%;
  height: 34%;
  left: 33%;
  top: 33%;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.022)) saturate(190%);
  opacity: 0.9;
  animation: loLunaMorphCore calc(var(--lo-luna-morph-cycle) * 0.9) linear infinite -0.35s;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__wave {
  border: 0;
  clip-path: none;
  mix-blend-mode: screen;
  opacity: 0;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__wave--1 {
  inset: 18%;
  background:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16), transparent 64%),
      linear-gradient(135deg, color-mix(in srgb, var(--lo-luna-glow-cyan) 44%, transparent), color-mix(in srgb, var(--lo-luna-glow-violet) 42%, transparent));
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.03)) saturate(175%);
  opacity: 0.3;
  animation: loLunaMorphHalo calc(var(--lo-luna-morph-cycle) * 1.04) linear infinite;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__wave--2 {
  opacity: 0;
  animation: none;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__wave--3 {
  opacity: 0;
  animation: none;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__synapse {
  opacity: 0;
  animation: none;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__fluid::before {
  animation-duration: 5.8s;
}

.lo-luna-avatar__scene[data-animation="morph"] .lo-luna-avatar__fluid::after {
  animation-duration: 4.4s;
}

/* radar, blurred locator ring with a soft rotating beacon dot. */

.lo-luna-avatar__scene[data-animation="radar"] {
  --lo-luna-locating-cycle: 1.5s;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobBreathe 5.5s ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobBreathe 5.5s ease-in-out infinite -1.35s;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobBreathe 5.5s ease-in-out infinite -2.7s;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobBreathe 5.5s ease-in-out infinite -4.05s;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__blob--5 {
  animation: loLunaCoreBreatheDeep 3.8s ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__wave {
  border: 0;
  clip-path: none;
  mix-blend-mode: screen;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__wave--1,
.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__wave--2 {
  inset: 16%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent 47%, #000 49% 71%, transparent 73%);
  mask: radial-gradient(farthest-side, transparent 47%, #000 49% 71%, transparent 73%);
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__wave--1 {
  background: conic-gradient(
      transparent 0 34%,
      color-mix(in srgb, var(--lo-luna-glow-cyan) 92%, white) 46%,
      color-mix(in srgb, var(--lo-luna-glow-blue) 84%, white) 58%,
      transparent 68% 100%
    );
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.014)) saturate(190%);
  opacity: 0.92;
  animation: loLunaLocatingSpin var(--lo-luna-locating-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__wave--2 {
  inset: 12%;
  background: conic-gradient(
      transparent 0 24%,
      color-mix(in srgb, var(--lo-luna-glow-violet) 46%, transparent) 42%,
      transparent 60% 100%
    );
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.02));
  opacity: 0.44;
  animation: loLunaLocatingSpin calc(var(--lo-luna-locating-cycle) * 1.35) linear infinite reverse;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__wave--3 {
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 8%,
      rgba(255, 255, 255, 0.98) 0 7%,
      color-mix(in srgb, var(--lo-luna-glow-cyan) 90%, white) 8% 12%,
      transparent 19%
    );
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.032));
  opacity: 0.94;
  animation: loLunaLocatingSpin var(--lo-luna-locating-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="radar"] .lo-luna-avatar__synapse {
  animation-name: loLunaSynapseLocatingBlink;
  animation-duration: calc(var(--lo-luna-locating-cycle) * 2);
  animation-timing-function: ease-in-out;
}

/* travel, blurred node panel with a bright contact point cycling
   around the cardinal anchors. */

.lo-luna-avatar__scene[data-animation="travel"] {
  --lo-luna-connecting-cycle: 2s;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobBreathe 4.8s ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobBreathe 4.8s ease-in-out infinite -1.2s;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobBreathe 4.8s ease-in-out infinite -2.4s;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobBreathe 4.8s ease-in-out infinite -3.6s;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__blob--5 {
  animation: loLunaCoreBreatheDeep 3.2s ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__wave {
  border: 0;
  clip-path: none;
  mix-blend-mode: screen;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__wave--1,
.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__wave--2 {
  inset: 22%;
  border-radius: 26%;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__wave--1 {
  background:
      radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.94) 0 7%, transparent 9%),
      radial-gradient(circle at 88% 50%, rgba(255, 255, 255, 0.94) 0 7%, transparent 9%),
      radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.94) 0 7%, transparent 9%),
      radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.94) 0 7%, transparent 9%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
      color-mix(in srgb, var(--lo-luna-glow-blue) 16%, rgba(8, 10, 20, 0.9));
  box-shadow: inset 0 0 0 calc(var(--lo-luna-avatar-size) * 0.018) color-mix(in srgb, var(--lo-luna-glow-cyan) 28%, transparent);
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.01)) contrast(1.18);
  opacity: 0.7;
  z-index: 1;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__wave--2 {
  inset: 24%;
  border-radius: 30%;
  background:
      radial-gradient(
        circle,
        rgba(255, 255, 255, 0.98) 0 30%,
        color-mix(in srgb, var(--lo-luna-glow-cyan) 94%, white) 31% 48%,
        color-mix(in srgb, var(--lo-luna-glow-violet) 68%, transparent) 58%,
        transparent 76%
      );
  background-repeat: no-repeat;
  background-size: 20% 20%;
  background-position: center 6%;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.015)) saturate(1.18);
  box-shadow: 0 0 calc(var(--lo-luna-avatar-size) * 0.04) color-mix(in srgb, var(--lo-luna-glow-cyan) 34%, transparent);
  opacity: 0.98;
  z-index: 3;
  animation: loLunaConnectingHop var(--lo-luna-connecting-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__wave--3 {
  inset: 26%;
  border-radius: 24%;
  background:
      linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, 0.1) 18% 22%, transparent 22% 78%, rgba(255, 255, 255, 0.1) 78% 82%, transparent 82% 100%),
      linear-gradient(180deg, transparent 0 18%, rgba(255, 255, 255, 0.1) 18% 22%, transparent 22% 78%, rgba(255, 255, 255, 0.1) 78% 82%, transparent 82% 100%);
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.012));
  opacity: 0.28;
  z-index: 2;
}

.lo-luna-avatar__scene[data-animation="travel"] .lo-luna-avatar__synapse {
  animation-name: loLunaSynapseConnectingBlink;
  animation-duration: var(--lo-luna-connecting-cycle);
  animation-timing-function: ease-in-out;
}

/* transport, blurred transport channel with a bright packet that shoots
   left-to-right through a soft frame. */

.lo-luna-avatar__scene[data-animation="transport"] {
  --lo-luna-sending-cycle: 1.15s;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobPulse calc(var(--lo-luna-sending-cycle) * 2.8) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobPulse calc(var(--lo-luna-sending-cycle) * 2.8) ease-in-out infinite -0.28s;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobPulse calc(var(--lo-luna-sending-cycle) * 2.8) ease-in-out infinite -0.56s;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobPulse calc(var(--lo-luna-sending-cycle) * 2.8) ease-in-out infinite -0.84s;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__blob--5 {
  animation: loLunaCorePulse calc(var(--lo-luna-sending-cycle) * 2.3) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__wave {
  border: 0;
  clip-path: none;
  mix-blend-mode: screen;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__wave--1 {
  inset: 24% 10%;
  border-radius: 999px;
  background:
      radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.94) 0 7%, transparent 9%),
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0 7%, transparent 9%),
      radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.94) 0 7%, transparent 9%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
      color-mix(in srgb, var(--lo-luna-glow-blue) 18%, rgba(8, 10, 20, 0.88));
  box-shadow: inset 0 0 0 calc(var(--lo-luna-avatar-size) * 0.018) color-mix(in srgb, var(--lo-luna-glow-cyan) 26%, transparent);
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.01)) contrast(1.2);
  opacity: 0.74;
  z-index: 1;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__wave--2 {
  inset: 26% 12%;
  border-radius: 999px;
  background:
      radial-gradient(
        circle,
        rgba(255, 255, 255, 0.99) 0 28%,
        color-mix(in srgb, var(--lo-luna-glow-cyan) 94%, white) 29% 46%,
        color-mix(in srgb, var(--lo-luna-glow-violet) 70%, transparent) 58%,
        transparent 76%
      );
  background-repeat: no-repeat;
  background-size: 14% 34%;
  background-position: left center;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.014)) saturate(1.22);
  box-shadow: 0 0 calc(var(--lo-luna-avatar-size) * 0.046) color-mix(in srgb, var(--lo-luna-glow-cyan) 38%, transparent);
  opacity: 0.98;
  z-index: 3;
  animation: loLunaSendingTravel var(--lo-luna-sending-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__wave--3 {
  inset: 31% 16%;
  border-radius: 999px;
  background:
      linear-gradient(90deg, transparent 0 6%, rgba(255, 255, 255, 0.1) 6% 14%, transparent 14% 42%, rgba(255, 255, 255, 0.16) 42% 58%, transparent 58% 86%, rgba(255, 255, 255, 0.1) 86% 94%, transparent 94% 100%);
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.012));
  opacity: 0.34;
  z-index: 2;
  animation: loLunaSendingTrail calc(var(--lo-luna-sending-cycle) * 1.1) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="transport"] .lo-luna-avatar__synapse {
  animation-name: loLunaSynapseSendingBlink;
  animation-duration: var(--lo-luna-sending-cycle);
  animation-timing-function: ease-in-out;
}

/* exclamation, clouds gather into a warning glyph while a blurred
   triangular sweep rotates underneath it. */

.lo-luna-avatar__scene[data-animation="exclamation"] {
  --lo-luna-exclamation-cycle: 2.8s;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobExclamation1 var(--lo-luna-exclamation-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobExclamation2 var(--lo-luna-exclamation-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobExclamation3 var(--lo-luna-exclamation-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobExclamation4 var(--lo-luna-exclamation-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__blob--5 {
  animation: loLunaBlobExclamation5 var(--lo-luna-exclamation-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__wave {
  border: 0;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.041)) saturate(190%);
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__wave--1,
.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__wave--2 {
  inset: 17% 15% 14% 15%;
  border-radius: 0;
  clip-path: polygon(
      50% 0%,
      100% 100%,
      0% 100%,
      50% 0%,
      50% 23%,
      21% 83%,
      79% 83%,
      50% 23%
    );
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__wave--1 {
  opacity: 0;
  animation: none;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__wave--2 {
  inset: 13% 11% 11% 11%;
  background: conic-gradient(
      from 180deg,
      transparent 0 31%,
      color-mix(in srgb, var(--lo-luna-glow-magenta) 82%, white) 43%,
      color-mix(in srgb, var(--lo-luna-glow-violet) 84%, white) 56%,
      transparent 68% 100%
    );
  opacity: 0.54;
  animation: loLunaExclamationTriangleB var(--lo-luna-exclamation-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__wave--3 {
  inset: 16% 35% 16% 35%;
  border-radius: 999px;
  clip-path: none;
  background:
      radial-gradient(circle at 50% 86%, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--lo-luna-glow-cyan) 80%, transparent) 19%, transparent 26%),
      linear-gradient(
        180deg,
        transparent 0 6%,
        color-mix(in srgb, var(--lo-luna-glow-cyan) 88%, white) 6% 58%,
        color-mix(in srgb, var(--lo-luna-glow-violet) 74%, white) 58% 72%,
        transparent 72% 100%
      );
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.024)) saturate(210%);
  animation: loLunaExclamationGlyphGlow var(--lo-luna-exclamation-cycle) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__synapse {
  animation-name: loLunaSynapseExclamationBlink;
  animation-duration: var(--lo-luna-exclamation-cycle);
  animation-timing-function: ease-in-out;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__fluid::before {
  animation-duration: 6.5s;
}

.lo-luna-avatar__scene[data-animation="exclamation"] .lo-luna-avatar__fluid::after {
  animation-duration: 4.8s;
}

/* spin, blurred circular spinner, inspired by a half-turn border loader.
   Best paired with: thinking / executing. */

.lo-luna-avatar__scene[data-animation="spin"] {
  --lo-luna-spin-cycle: 1.2s;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobSpinSettle calc(var(--lo-luna-spin-cycle) * 2.2) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobSpinSettle calc(var(--lo-luna-spin-cycle) * 2.2) ease-in-out infinite -0.35s;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobSpinSettle calc(var(--lo-luna-spin-cycle) * 2.2) ease-in-out infinite -0.7s;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobSpinSettle calc(var(--lo-luna-spin-cycle) * 2.2) ease-in-out infinite -1.05s;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__blob--5 {
  animation: loLunaCoreSpin calc(var(--lo-luna-spin-cycle) * 1.8) ease-in-out infinite;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__wave {
  background: none;
  border-style: solid;
  border-radius: 50%;
  clip-path: none;
  mix-blend-mode: screen;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__wave--1 {
  inset: 15%;
  border-width: calc(var(--lo-luna-avatar-size) * 0.055);
  border-color:
      color-mix(in srgb, var(--lo-luna-glow-cyan) 96%, white)
      transparent
      color-mix(in srgb, var(--lo-luna-glow-blue) 82%, white)
      transparent;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.01)) saturate(190%);
  opacity: 0.9;
  animation: loLunaSpinHalfTurn var(--lo-luna-spin-cycle) linear infinite;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__wave--2 {
  inset: 23%;
  border-width: calc(var(--lo-luna-avatar-size) * 0.042);
  border-color:
      transparent
      color-mix(in srgb, var(--lo-luna-glow-violet) 90%, white)
      transparent
      color-mix(in srgb, var(--lo-luna-glow-magenta) 74%, white);
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.013)) saturate(185%);
  opacity: 0.72;
  animation: loLunaSpinHalfTurn calc(var(--lo-luna-spin-cycle) * 1.35) linear infinite reverse;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__wave--3 {
  inset: 31%;
  border-width: calc(var(--lo-luna-avatar-size) * 0.026);
  border-color:
      color-mix(in srgb, rgba(255, 255, 255, 0.92) 72%, transparent)
      transparent
      rgba(255, 255, 255, 0.12)
      transparent;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.008));
  opacity: 0.55;
  animation: loLunaSpinHalfTurn calc(var(--lo-luna-spin-cycle) * 1.8) linear infinite;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__synapse {
  animation-name: loLunaSynapseSpinBlink;
  animation-duration: calc(var(--lo-luna-spin-cycle) * 2);
  animation-timing-function: ease-in-out;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__fluid::before {
  animation-duration: 8s;
}

.lo-luna-avatar__scene[data-animation="spin"] .lo-luna-avatar__fluid::after {
  animation-duration: 6s;
}

/* pulse, synchronized rhythmic beat (heart-rate-ish). All blobs pump together.
   Best paired with: executing / success. */

.lo-luna-avatar__scene[data-animation="pulse"] {
  --lo-luna-pulse-cycle: 1.1s;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__fluid {
  animation: loLunaPulseSpin calc(var(--lo-luna-pulse-cycle) * 4) linear infinite;
  transform-origin: 50% 50%;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__wave {
  border: 0;
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: blur(calc(var(--lo-luna-avatar-size) * 0.03)) saturate(180%);
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__wave--1 {
  inset: 18% 44% 43% 14%;
  border-radius: 50% 46% 58% 42%;
  background: radial-gradient(
      circle at 46% 48%,
      color-mix(in srgb, var(--lo-luna-glow-cyan) 92%, white),
      color-mix(in srgb, var(--lo-luna-glow-blue) 72%, transparent) 44%,
      transparent 74%
    );
  animation: loLunaPulseSpotDrift1 calc(var(--lo-luna-pulse-cycle) * 5.5) ease-in-out infinite alternate;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__wave--2 {
  inset: 24% 14% 24% 46%;
  border-radius: 44% 58% 48% 54%;
  background: radial-gradient(
      circle at 52% 44%,
      color-mix(in srgb, var(--lo-luna-glow-violet) 92%, white),
      color-mix(in srgb, var(--lo-luna-glow-magenta) 72%, transparent) 46%,
      transparent 76%
    );
  animation: loLunaPulseSpotDrift2 calc(var(--lo-luna-pulse-cycle) * 6.2) ease-in-out infinite alternate;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__wave--3 {
  inset: 42% 26% 12% 28%;
  border-radius: 58% 42% 52% 48%;
  background: radial-gradient(
      circle at 50% 40%,
      color-mix(in srgb, var(--lo-luna-glow-blue) 88%, white),
      color-mix(in srgb, var(--lo-luna-glow-cyan) 68%, transparent) 42%,
      transparent 72%
    );
  animation: loLunaPulseSpotDrift3 calc(var(--lo-luna-pulse-cycle) * 5.8) ease-in-out infinite alternate;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__blob--1 {
  animation: loLunaBlobPulse var(--lo-luna-pulse-cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__blob--2 {
  animation: loLunaBlobPulse var(--lo-luna-pulse-cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__blob--3 {
  animation: loLunaBlobPulse var(--lo-luna-pulse-cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__blob--4 {
  animation: loLunaBlobPulse var(--lo-luna-pulse-cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.lo-luna-avatar__scene[data-animation="pulse"] .lo-luna-avatar__blob--5 {
  animation: loLunaCorePulse var(--lo-luna-pulse-cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

/* Accessibility, kill motion when the OS asks for it. */

@media (prefers-reduced-motion: reduce) {
  .lo-luna-avatar {
    --lo-luna-dur-aura: 0s;
    --lo-luna-dur-spin: 0s;
    --lo-luna-dur-fluid: 0s;
    --lo-luna-dur-shimmer: 0s;
    --lo-luna-dur-blob1: 0s;
    --lo-luna-dur-blob2: 0s;
    --lo-luna-dur-blob3: 0s;
    --lo-luna-dur-blob4: 0s;
    --lo-luna-dur-core: 0s;
    --lo-luna-dur-wave: 0s;
    --lo-luna-dur-wave-rev: 0s;
    --lo-luna-dur-synapse: 0s;
    --lo-luna-dur-orbit: 0s;
    --lo-luna-dur-orbit-rev: 0s;
    --lo-luna-dur-border: 0s;
  }
}

/* ------------------------------------------------------------------ */

/* Animations                                                         */

/* ------------------------------------------------------------------ */

@keyframes loLunaSceneEnter {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loLunaSceneExit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.015);
  }
}

@keyframes loLunaAuraPulse {
  0%, 100% { transform: scale(0.95); opacity: calc(0.75 * var(--lo-luna-aura-opacity, 1)); }
  50%      { transform: scale(1.04); opacity: calc(1 * var(--lo-luna-aura-opacity, 1)); }
}

@keyframes loLunaSlowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes loLunaFluidShift {
  0%   { transform: translate(-3%, -2%) scale(1.02) rotate(0deg); }
  50%  { transform: translate(2%, 3%) scale(1.08) rotate(8deg); }
  100% { transform: translate(4%, -4%) scale(1.04) rotate(-6deg); }
}

@keyframes loLunaShimmer {
  0%, 100% { transform: translateY(0) scale(1);     opacity: 0.6; }
  50%      { transform: translateY(-3%) scale(1.06); opacity: 0.95; }
}

@keyframes loLunaBlobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(9%, -8%) scale(1.1, 0.92); }
  70%      { transform: translate(-4%, 10%) scale(0.95, 1.12); }
}

@keyframes loLunaBlobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(-11%, 7%) scale(1.08, 0.94); }
  75%      { transform: translate(2%, -8%) scale(0.92, 1.08); }
}

@keyframes loLunaBlobFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  45%      { transform: translate(7%, -10%) scale(1.08, 0.9); }
  75%      { transform: translate(-8%, 4%) scale(0.96, 1.1); }
}

@keyframes loLunaBlobFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-10%, -6%) scale(1.12, 0.94); }
  80%      { transform: translate(5%, 5%) scale(0.9, 1.1); }
}

@keyframes loLunaCoreBreath {
  0%, 100% { transform: scale(0.9);  opacity: 0.72; }
  50%      { transform: scale(1.26); opacity: 1; }
}

@keyframes loLunaWaveDrift {
  0%, 100% { transform: rotate(9deg) translateY(0) scaleX(1);   opacity: 0.38; }
  50%      { transform: rotate(4deg) translateY(-4%) scaleX(1.06); opacity: 0.72; }
}

@keyframes loLunaWaveDriftReverse {
  0%, 100% { transform: rotate(-12deg) translateY(0) scaleX(1);    opacity: 0.28; }
  50%      { transform: rotate(-18deg) translateY(5%) scaleX(0.94); opacity: 0.6; }
}

@keyframes loLunaSynapseBlink {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  25%      { opacity: 1;    transform: scale(1.15); }
  40%      { opacity: 0.6;  transform: scale(0.92); }
}

@keyframes loLunaLiquidOrbit {
  0%   { transform: rotate(0deg)   scale(1);     opacity: 0.76; }
  50%  { transform: rotate(180deg) scale(1.03);  opacity: 1; }
  100% { transform: rotate(360deg) scale(1);     opacity: 0.76; }
}

@keyframes loLunaLiquidOrbitReverse {
  0%   { transform: rotate(360deg) scale(0.995); opacity: 0.7; }
  50%  { transform: rotate(180deg) scale(1.02);  opacity: 1; }
  100% { transform: rotate(0deg)   scale(0.995); opacity: 0.7; }
}

@keyframes loLunaBorderMorph {
  0%, 100% { transform: scale(1);     opacity: 0.88; }
  50%      { transform: scale(1.012); opacity: 1; }
}

/* ------------------------------------------------------------------ */

/* Preset keyframes, wave (cloud -> sine -> cloud)                   */

/* The five blurred blobs collapse into overlapping sine segments,    */

/* hold long enough for colour ribbons to travel across them, then    */

/* return to the original cloud cluster.                              */

/* ------------------------------------------------------------------ */

@keyframes loLunaBlobWaveMorph1 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.94;
  }
  30%, 72% {
    transform: translate(calc(var(--lo-luna-avatar-size) * -0.09), calc(var(--lo-luna-avatar-size) * 0.08)) scale(0.94, 0.49) rotate(-3deg);
    opacity: 0.98;
  }
}

@keyframes loLunaBlobWaveMorph2 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.94;
  }
  30%, 72% {
    transform: translate(calc(var(--lo-luna-avatar-size) * -0.22), calc(var(--lo-luna-avatar-size) * -0.01)) scale(0.98, 0.48) rotate(2deg);
    opacity: 0.96;
  }
}

@keyframes loLunaBlobWaveMorph3 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.94;
  }
  30%, 72% {
    transform: translate(calc(var(--lo-luna-avatar-size) * 0.24), calc(var(--lo-luna-avatar-size) * -0.19)) scale(0.94, 0.48) rotate(6deg);
    opacity: 0.95;
  }
}

@keyframes loLunaBlobWaveMorph4 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.94;
  }
  30%, 72% {
    transform: translate(calc(var(--lo-luna-avatar-size) * -0.01), calc(var(--lo-luna-avatar-size) * -0.04)) scale(1.26, 0.5) rotate(2deg);
    opacity: 0.98;
  }
}

@keyframes loLunaBlobWaveMorph5 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.92;
  }
  30%, 72% {
    transform: translate(calc(var(--lo-luna-avatar-size) * -0.01), calc(var(--lo-luna-avatar-size) * -0.04)) scale(2.42, 0.62) rotate(0deg);
    opacity: 1;
  }
}

@keyframes loLunaWaveRibbonFlow1 {
  0%, 10% {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 999px);
    background-position: 0 0, 23% 100%;
    transform: translateY(8%) scaleX(0.72);
  }
  30% {
    opacity: 0.72;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: -12% 0, 11% 100%;
    transform: translateY(0) scaleX(1);
  }
  72% {
    opacity: 0.96;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: -60% 0, -37% 100%;
    transform: translateY(-1%) scaleX(1.03);
  }
  90% {
    opacity: 0.52;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: -68% 0, -45% 100%;
    transform: translateY(2%) scaleX(0.96);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100% round 999px);
    background-position: -72% 0, -49% 100%;
    transform: translateY(-8%) scaleX(0.76);
  }
}

@keyframes loLunaWaveRibbonFlow2 {
  0%, 10% {
    opacity: 0;
    clip-path: inset(0 0 0 100% round 999px);
    background-position: 4% 0, 29% 100%;
    transform: translateY(-8%) scaleX(0.74);
  }
  28% {
    opacity: 0.5;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: 18% 0, 43% 100%;
    transform: translateY(-1%) scaleX(0.98);
  }
  72% {
    opacity: 0.82;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: 66% 0, 91% 100%;
    transform: translateY(0) scaleX(1.05);
  }
  90% {
    opacity: 0.42;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: 74% 0, 99% 100%;
    transform: translateY(3%) scaleX(0.96);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 999px);
    background-position: 80% 0, 105% 100%;
    transform: translateY(7%) scaleX(0.78);
  }
}

@keyframes loLunaWaveRibbonFlow3 {
  0%, 10% {
    opacity: 0;
    clip-path: inset(0 52% 0 52% round 999px);
    background-position: 0 0, 21% 100%;
    transform: translateY(10%) scaleX(0.62);
  }
  30% {
    opacity: 0.4;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: -14% 0, 7% 100%;
    transform: translateY(1%) scaleX(0.98);
  }
  72% {
    opacity: 0.6;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: -50% 0, -29% 100%;
    transform: translateY(0) scaleX(1.08);
  }
  90% {
    opacity: 0.3;
    clip-path: inset(0 0 0 0 round 999px);
    background-position: -58% 0, -37% 100%;
    transform: translateY(4%) scaleX(0.92);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 52% 0 52% round 999px);
    background-position: -60% 0, -39% 100%;
    transform: translateY(-8%) scaleX(0.64);
  }
}

@keyframes loLunaSynapseWaveBlink {
  0%, 12%, 100% {
    opacity: 0.4;
    transform: scale(0.82);
  }
  30%, 72% {
    opacity: 0.14;
    transform: scale(0.66);
  }
  90% {
    opacity: 0.26;
    transform: scale(0.74);
  }
}

/* ------------------------------------------------------------------ */

/* Preset keyframes, morph (organic border-radius cycling)           */

/* ------------------------------------------------------------------ */

@keyframes loLunaMorphBlobPrimary {
  0%, 100% {
    border-radius: 50%;
    transform: scale(0.96, 1.02);
    opacity: 0.9;
  }
  12.5% {
    border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%;
    transform: scale(0.88, 1.1);
    opacity: 0.94;
  }
  25% {
    border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%;
    transform: scale(0.94, 1.08);
    opacity: 0.98;
  }
  37.5% {
    border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%;
    transform: scale(1.1, 0.84);
    opacity: 1;
  }
  50% {
    border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%;
    transform: scale(1.14, 0.82);
    opacity: 1;
  }
  62.5% {
    border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%;
    transform: scale(1.08, 0.9);
    opacity: 0.96;
  }
  75% {
    border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%;
    transform: scale(1.16, 0.8);
    opacity: 0.92;
  }
  87.5% {
    border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%;
    transform: scale(0.82, 1.16);
    opacity: 0.88;
  }
}

@keyframes loLunaMorphProminence {
  0%, 100% {
    opacity: 0.26;
    filter: blur(calc(var(--lo-luna-avatar-size) * 0.04)) saturate(150%) brightness(0.92);
  }
  8% {
    opacity: 0.48;
    filter: blur(calc(var(--lo-luna-avatar-size) * 0.032)) saturate(182%) brightness(1);
  }
  18%, 28% {
    opacity: 0.98;
    filter: blur(calc(var(--lo-luna-avatar-size) * 0.022)) saturate(235%) brightness(1.14);
  }
  40% {
    opacity: 0.38;
    filter: blur(calc(var(--lo-luna-avatar-size) * 0.034)) saturate(165%) brightness(0.98);
  }
  65% {
    opacity: 0.24;
    filter: blur(calc(var(--lo-luna-avatar-size) * 0.042)) saturate(142%) brightness(0.9);
  }
}

@keyframes loLunaMorphBlobSoft {
  0%, 100% {
    border-radius: 50%;
    transform: scale(0.94, 1.01);
    opacity: 0.42;
  }
  12.5% {
    border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%;
    transform: scale(0.9, 1.06);
  }
  25% {
    border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%;
    transform: scale(0.95, 1.04);
    opacity: 0.52;
  }
  37.5% {
    border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%;
    transform: scale(1.05, 0.9);
  }
  50% {
    border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%;
    transform: scale(1.08, 0.88);
    opacity: 0.58;
  }
  62.5% {
    border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%;
    transform: scale(1.02, 0.93);
  }
  75% {
    border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%;
    transform: scale(1.1, 0.86);
    opacity: 0.5;
  }
  87.5% {
    border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%;
    transform: scale(0.86, 1.08);
  }
}

@keyframes loLunaMorphBlobAura {
  0%, 100% {
    border-radius: 50%;
    transform: scale(0.94);
    opacity: 0.18;
  }
  12.5% { border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%; }
  25% { border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%; }
  37.5% { border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%; }
  50% {
    border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%;
    transform: scale(1.03);
    opacity: 0.24;
  }
  62.5% { border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%; }
  75% { border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%; }
  87.5% { border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%; }
}

@keyframes loLunaMorphCore {
  0%, 100% {
    border-radius: 50%;
    transform: scale(0.72, 0.8);
    opacity: 0.62;
  }
  12.5% {
    border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%;
    transform: scale(0.74, 0.9);
    opacity: 0.76;
  }
  25% {
    border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%;
    transform: scale(0.8, 0.94);
    opacity: 0.9;
  }
  37.5% {
    border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%;
    transform: scale(0.96, 0.76);
    opacity: 1;
  }
  50% {
    border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%;
    transform: scale(1.02, 0.72);
    opacity: 1;
  }
  62.5% {
    border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%;
    transform: scale(0.92, 0.8);
    opacity: 0.88;
  }
  75% {
    border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%;
    transform: scale(1, 0.7);
    opacity: 0.72;
  }
  87.5% {
    border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%;
    transform: scale(0.68, 1);
    opacity: 0.62;
  }
}

@keyframes loLunaMorphHalo {
  0%, 100% {
    border-radius: 50%;
    transform: scale(0.94);
    opacity: 0.14;
  }
  12.5% { border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%; }
  25% {
    border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%;
    opacity: 0.2;
  }
  37.5% { border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%; }
  50% {
    border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%;
    transform: scale(1.02);
    opacity: 0.28;
  }
  62.5% { border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%; }
  75% {
    border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%;
    opacity: 0.18;
  }
  87.5% { border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%; }
}

@keyframes loLunaSynapseMorphBlink {
  0%, 100% { opacity: 0.2; transform: scale(0.66); }
  25%      { opacity: 0.48; transform: scale(0.84); }
  50%      { opacity: 0.16; transform: scale(0.6); }
  75%      { opacity: 0.42; transform: scale(0.8); }
}

/* ------------------------------------------------------------------ */

/* Preset keyframes, exclamation (warning triangle + glyph)          */

/* ------------------------------------------------------------------ */

@keyframes loLunaBlobExclamation1 {
  0%, 100% {
    transform: translate(0, 0) scale(0.7) rotate(0deg);
    opacity: 0.7;
  }
  28%, 70% {
    transform: translate(calc(var(--lo-luna-avatar-size) * 0.14), calc(var(--lo-luna-avatar-size) * -0.05)) scale(0.34, 0.56) rotate(-2deg);
    opacity: 1;
  }
}

@keyframes loLunaBlobExclamation2 {
  0%, 100% {
    transform: translate(0, 0) scale(0.7) rotate(0deg);
    opacity: 0.7;
  }
  28%, 70% {
    transform: translate(calc(var(--lo-luna-avatar-size) * -0.17), calc(var(--lo-luna-avatar-size) * 0.02)) scale(0.42, 0.6) rotate(2deg);
    opacity: 0.98;
  }
}

@keyframes loLunaBlobExclamation3 {
  0%, 100% {
    transform: translate(0, 0) scale(0.7) rotate(0deg);
    opacity: 0.7;
  }
  28%, 70% {
    transform: translate(calc(var(--lo-luna-avatar-size) * 0.01), calc(var(--lo-luna-avatar-size) * -0.16)) scale(0.32, 0.36) rotate(0deg);
    opacity: 0.92;
  }
}

@keyframes loLunaBlobExclamation4 {
  0%, 100% {
    transform: translate(0, 0) scale(0.7) rotate(0deg);
    opacity: 0.7;
  }
  28%, 70% {
    transform: translate(calc(var(--lo-luna-avatar-size) * -0.06), calc(var(--lo-luna-avatar-size) * -0.03)) scale(1.95, 1.75) rotate(0deg);
    opacity: 0.42;
  }
}

@keyframes loLunaBlobExclamation5 {
  0%, 100% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.55;
  }
  28%, 70% {
    transform: translate(calc(var(--lo-luna-avatar-size) * -0.01), calc(var(--lo-luna-avatar-size) * 0.15)) scale(0.72);
    opacity: 1;
  }
}

@keyframes loLunaExclamationTriangleA {
  0%, 100% { transform: scale(0.92); opacity: 0.12; }
  18%      { transform: scale(0.97); opacity: 0.38; }
  34%      { transform: scale(1.03); opacity: 0.86; }
  50%      { transform: scale(1.07); opacity: 0.96; }
  66%      { transform: scale(1.01); opacity: 0.42; }
  82%      { transform: scale(0.95); opacity: 0.14; }
}

@keyframes loLunaExclamationTriangleB {
  0%, 16%, 100% { transform: scale(1.02); opacity: 0; }
  32%           { transform: scale(0.98); opacity: 0.38; }
  50%           { transform: scale(0.94); opacity: 0.66; }
  70%           { transform: scale(0.99); opacity: 0.82; }
  86%           { transform: scale(1.02); opacity: 0.18; }
}

@keyframes loLunaExclamationGlyphGlow {
  0%, 18%, 100% { transform: scale(0.82); opacity: 0; }
  34%           { transform: scale(0.96); opacity: 0.72; }
  52%           { transform: scale(1.04); opacity: 0.96; }
  70%           { transform: scale(1.06); opacity: 1; }
  86%           { transform: scale(0.92); opacity: 0.12; }
}

@keyframes loLunaSynapseExclamationBlink {
  0%, 100% { opacity: 0.42; transform: scale(0.8); }
  20%      { opacity: 0.14; transform: scale(0.6); }
  36%      { opacity: 0.05; transform: scale(0.5); }
  54%      { opacity: 0.18; transform: scale(0.64); }
  70%      { opacity: 0.06; transform: scale(0.5); }
}

/* ------------------------------------------------------------------ */

/* Preset keyframes, locating / connecting / sending                 */

/* ------------------------------------------------------------------ */

@keyframes loLunaLocatingSpin {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loLunaSynapseLocatingBlink {
  0%, 100% { opacity: 0.12; transform: scale(0.62); }
  35%      { opacity: 0.46; transform: scale(0.88); }
  70%      { opacity: 0.18; transform: scale(0.68); }
}

@keyframes loLunaConnectingHop {
  0%, 100% {
    background-position: center 6%;
    transform: scale(1);
  }
  25% {
    background-position: 94% center;
    transform: scale(1.05);
  }
  50% {
    background-position: center 94%;
    transform: scale(1);
  }
  75% {
    background-position: 6% center;
    transform: scale(1.05);
  }
}

@keyframes loLunaSynapseConnectingBlink {
  0%, 100% { opacity: 0.16; transform: scale(0.68); }
  25%      { opacity: 0.5;  transform: scale(0.88); }
  50%      { opacity: 0.22; transform: scale(0.72); }
  75%      { opacity: 0.56; transform: scale(0.9); }
}

@keyframes loLunaSendingTravel {
  0% {
    background-position: 0% 50%;
    transform: translateX(0%) scale(0.92);
    opacity: 0.7;
  }
  22% {
    background-position: 24% 50%;
    transform: translateX(0%) scale(1);
    opacity: 0.98;
  }
  50% {
    background-position: 50% 50%;
    transform: translateX(0%) scale(1.04);
    opacity: 1;
  }
  78% {
    background-position: 76% 50%;
    transform: translateX(0%) scale(1);
    opacity: 0.98;
  }
  100% {
    background-position: 100% 50%;
    transform: translateX(0%) scale(0.92);
    opacity: 0.7;
  }
}

@keyframes loLunaSendingTrail {
  0%, 100% { opacity: 0.2; transform: scaleX(0.94); }
  50%      { opacity: 0.46; transform: scaleX(1.04); }
}

@keyframes loLunaSynapseSendingBlink {
  0%, 100% { opacity: 0.18; transform: scale(0.68); }
  25%      { opacity: 0.42; transform: scale(0.82); }
  50%      { opacity: 0.62; transform: scale(0.94); }
  75%      { opacity: 0.36; transform: scale(0.76); }
}

/* ------------------------------------------------------------------ */

/* Preset keyframes, default idle pulse (pure scale, NO translate)   */

/* ------------------------------------------------------------------ */

@keyframes loLunaBlobBreathe {
  0%, 100% { transform: scale(0.7);  opacity: 0.7; }
  50%      { transform: scale(1.25); opacity: 1; }
}

@keyframes loLunaCoreBreatheDeep {
  0%, 100% { transform: scale(0.6); opacity: 0.55; }
  50%      { transform: scale(1.5); opacity: 1; }
}

/* ------------------------------------------------------------------ */

/* Preset keyframes, spin (blurred ring loader)                      */

/* ------------------------------------------------------------------ */

@keyframes loLunaSpinHalfTurn {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loLunaBlobSpinSettle {
  0%, 100% { transform: scale(0.8);  opacity: 0.74; }
  50%      { transform: scale(1.02); opacity: 0.96; }
}

@keyframes loLunaCoreSpin {
  0%, 100% { transform: scale(0.74); opacity: 0.62; }
  50%      { transform: scale(1.16); opacity: 1; }
}

@keyframes loLunaSynapseSpinBlink {
  0%, 100% { opacity: 0.26; transform: scale(0.72); }
  40%      { opacity: 0.58; transform: scale(0.9); }
  60%      { opacity: 0.12; transform: scale(0.6); }
}

/* ------------------------------------------------------------------ */

/* Preset keyframes, pulse (synchronized sharp beat)                 */

/* All blobs scale together, like a heartbeat.                        */

/* ------------------------------------------------------------------ */

@keyframes loLunaPulseSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes loLunaPulseSpotDrift1 {
  0%   { transform: translate(-3%, -2%) scale(0.94); opacity: 0.34; }
  50%  { transform: translate(5%, 3%) scale(1.04);  opacity: 0.54; }
  100% { transform: translate(2%, -4%) scale(0.98); opacity: 0.42; }
}

@keyframes loLunaPulseSpotDrift2 {
  0%   { transform: translate(2%, -3%) scale(1.02); opacity: 0.38; }
  50%  { transform: translate(-4%, 4%) scale(0.96); opacity: 0.56; }
  100% { transform: translate(3%, 1%) scale(1.05);  opacity: 0.44; }
}

@keyframes loLunaPulseSpotDrift3 {
  0%   { transform: translate(-2%, 2%) scale(0.92); opacity: 0.3; }
  50%  { transform: translate(4%, -3%) scale(1.02); opacity: 0.48; }
  100% { transform: translate(-3%, -1%) scale(0.96); opacity: 0.36; }
}

@keyframes loLunaBlobPulse {
  0%, 60%, 100% { transform: scale(0.8); }
  20%           { transform: scale(1.25); }
  40%           { transform: scale(0.92); }
}

@keyframes loLunaCorePulse {
  0%, 60%, 100% { transform: scale(0.75); opacity: 0.6; }
  20%           { transform: scale(1.5);  opacity: 1; }
  40%           { transform: scale(0.95); opacity: 0.8; }
}