.fenix-orb {
  --fo-color: #1F3BEB;

  --fo-fill: 0.74;
  --fo-d: calc(var(--fo-fill) * 100cqw);
  --fo-ring-max: calc(0.97 / var(--fo-fill));
  --fo-dot: 0.0955;
  --fo-hmax: calc(var(--fo-d) * 0.44);
  --fo-bw: calc(var(--fo-hmax) * var(--fo-dot));
  --fo-gap: calc(var(--fo-bw) * 0.74);
  --fo-half: calc((var(--fo-hmax) - var(--fo-bw)) / 2);

  --fo-level: 0.35;
  --fo-pulse: 0;
  --fo-lx: 0;
  --fo-ly: 0;
  --fo-fy: 1;

  --fo-light: color-mix(in srgb, var(--fo-color) 62%, #fff);
  --fo-ring: color-mix(in srgb, var(--fo-color) 55%, #fff);

  --fo-bar: #FCFCFC;
  --fo-grain: 0.26;
  --fo-sheen: rgb(255 255 255 / 0.16);
  --fo-core-base: 0.12;
  --fo-core-gain: 0.45;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  isolation: isolate;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.fenix-orb__rings {
  position: absolute;
  inset: 0;
}

.fenix-orb__ring {
  --rp: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fo-d);
  height: var(--fo-d);
  margin: calc(var(--fo-d) / -2) 0 0 calc(var(--fo-d) / -2);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    transparent 94.4%,
    var(--fo-ring) 97.4%,
    var(--fo-ring) 98.3%,
    transparent 100%);
  opacity: 0;
  transform: scale(calc(1 + var(--rp) * (var(--fo-ring-max) - 1)));
}

.fenix-orb__floor {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--fo-fill) * 50%);
  width: calc(var(--fo-fill) * 78%);
  height: calc(var(--fo-fill) * 15%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--fo-color) 36%, transparent) 0%, transparent 100%);
  opacity: calc(0.7 + var(--fo-level) * 0.5 + var(--fo-pulse) * 0.25);
  transform: translate(-50%, -50%) scale(calc(1 + var(--fo-pulse) * 0.04));
}

.fenix-orb__sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fo-d);
  height: var(--fo-d);
  margin: calc(var(--fo-d) / -2) 0 0 calc(var(--fo-d) / -2);
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
  transform: scale(calc(1 + var(--fo-pulse) * 0.022));
}

.fenix-orb__body,
.fenix-orb__core,
.fenix-orb__glow,
.fenix-orb__shade,
.fenix-orb__grain,
.fenix-orb__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.fenix-orb__core {
  background: radial-gradient(50% 50% at 50% 52%,
    color-mix(in srgb, var(--fo-light) 90%, transparent) 0%,
    color-mix(in srgb, var(--fo-light) 35%, transparent) 40%,
    transparent 72%);
  mix-blend-mode: screen;
  opacity: calc(var(--fo-core-base) + var(--fo-level) * var(--fo-core-gain));
  transform:
    translate(calc(var(--fo-lx) * var(--fo-d) * 0.11), calc(var(--fo-ly) * var(--fo-d) * 0.11))
    scale(calc(0.78 + var(--fo-level) * 0.42));
}

.fenix-orb__glow {
  display: none;
  filter: blur(calc(var(--fo-bw) * 1.3));
  mix-blend-mode: screen;
  opacity: calc(0.45 + var(--fo-level) * 1.4);
}

.fenix-orb__glow .fenix-orb__eq {
  transform:
    translate(calc(-50% + var(--fo-lx) * var(--fo-d) * 0.095), calc(-50% + var(--fo-ly) * var(--fo-d) * 0.095))
    perspective(calc(var(--fo-d) * 1.6))
    rotateY(calc(var(--fo-lx) * 40deg)) scaleY(var(--fo-fy))
    scale(1.16, 1.08);
}

.fenix-orb__eq {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: var(--fo-gap);
  height: var(--fo-hmax);
  transform:
    translate(calc(-50% + var(--fo-lx) * var(--fo-d) * 0.095), calc(-50% + var(--fo-ly) * var(--fo-d) * 0.095))
    perspective(calc(var(--fo-d) * 1.6))
    rotateY(calc(var(--fo-lx) * 40deg)) scaleY(var(--fo-fy));
}

.fenix-orb__bar {
  --v: 0.5;
  --k: max(0, (var(--v) - var(--fo-dot)) / (1 - var(--fo-dot)));
  position: relative;
  flex: none;
  width: var(--fo-bw);
  height: 100%;
}

.fenix-orb__stem,
.fenix-orb__cap {
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--fo-bar);
}

.fenix-orb__stem {
  top: calc(50% - var(--fo-half));
  height: calc(var(--fo-half) * 2);
  transform: scaleY(var(--k));
}

.fenix-orb__cap {
  top: calc(50% - var(--fo-bw) / 2);
  height: var(--fo-bw);
  border-radius: 50%;
}

.fenix-orb__cap--top { transform: translateY(calc(var(--k) * var(--fo-half) * -1)); }
.fenix-orb__cap--bottom { transform: translateY(calc(var(--k) * var(--fo-half))); }

.fenix-orb__bar:nth-child(1) { --v: var(--v1, 0.30); }
.fenix-orb__bar:nth-child(2) { --v: var(--v2, 0.56); }
.fenix-orb__bar:nth-child(3) { --v: var(--v3, 0.81); }
.fenix-orb__bar:nth-child(4) { --v: var(--v4, 1); }
.fenix-orb__bar:nth-child(5) { --v: var(--v5, 0.70); }
.fenix-orb__bar:nth-child(6) { --v: var(--v6, 0.44); }
.fenix-orb__bar:nth-child(7) { --v: var(--v7, 0.30); }

.fenix-orb__shade {
  inset: -10%;
  background: radial-gradient(50% 50% at 50% 50%, transparent 47%,
    color-mix(in srgb, color-mix(in srgb, var(--fo-color) 12%, #000) 14%, transparent) 66%,
    color-mix(in srgb, color-mix(in srgb, var(--fo-color) 12%, #000) 42%, transparent) 86%,
    color-mix(in srgb, color-mix(in srgb, var(--fo-color) 12%, #000) 48%, transparent) 100%);
  transform: translate(calc(var(--fo-lx) * var(--fo-d) * -0.07), calc(var(--fo-ly) * var(--fo-d) * -0.07));
}

.fenix-orb__grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6 2.2 0 0 0 -.6 2.2 0 0 0 -.6 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: var(--fo-grain);
}

.fenix-orb__sheen {
  inset: -10%;
  border-radius: 0;
  background: radial-gradient(38.3% 31.7% at 35.8% 26.7%, var(--fo-sheen) 0%, transparent 100%);
  mix-blend-mode: screen;
  transform: translate(calc(var(--fo-lx) * var(--fo-d) * -0.07), calc(var(--fo-ly) * var(--fo-d) * -0.07));
}

.fenix-orb__body {
  background:
    radial-gradient(56% 30% at 50% 100%, color-mix(in srgb, var(--fo-light) 55%, transparent) 0%, transparent 100%),
    radial-gradient(86% 86% at 34% 26%, transparent 40%,
      color-mix(in srgb, color-mix(in srgb, var(--fo-color) 10%, #000) 66%, transparent) 100%),
    radial-gradient(50% 50% at 50% 50%, transparent 76%,
      color-mix(in srgb, var(--fo-light) 18%, transparent) 92%,
      color-mix(in srgb, var(--fo-light) 34%, transparent) 100%),
    radial-gradient(82% 82% at 36% 28%,
      color-mix(in srgb, var(--fo-color) 90%, #fff) 0%,
      color-mix(in srgb, var(--fo-color) 94%, #000) 24%,
      color-mix(in srgb, var(--fo-color) 72%, #000) 48%,
      color-mix(in srgb, var(--fo-color) 52%, #000) 72%,
      color-mix(in srgb, var(--fo-color) 33%, #000) 90%,
      color-mix(in srgb, var(--fo-color) 23%, #000) 100%);
}

.fenix-orb--frost {
  --fo-grain: 0;
  --fo-sheen: rgb(255 255 255 / 0.14);
  --fo-core-base: 0.3;
  --fo-core-gain: 1.05;
}

.fenix-orb--frost .fenix-orb__grain { display: none; }
.fenix-orb--frost .fenix-orb__glow { display: block; }
.fenix-orb--frost .fenix-orb__glow .fenix-orb__stem,
.fenix-orb--frost .fenix-orb__glow .fenix-orb__cap {
  background: color-mix(in srgb, var(--fo-color) 30%, #fff);
}

.fenix-orb--frost .fenix-orb__body {
  background:
    radial-gradient(50% 24% at 50% 100%, color-mix(in srgb, var(--fo-color) 40%, transparent) 0%, transparent 100%),
    radial-gradient(50% 50% at 50% 50%, transparent 90%,
      color-mix(in srgb, var(--fo-light) 10%, transparent) 97%,
      color-mix(in srgb, var(--fo-light) 22%, transparent) 100%),
    radial-gradient(90% 90% at 36% 30%, transparent 50%,
      color-mix(in srgb, color-mix(in srgb, var(--fo-color) 8%, #000) 40%, transparent) 100%),
    radial-gradient(50% 50% at 50% 50%,
      var(--fo-color) 0%,
      color-mix(in srgb, var(--fo-color) 82%, #000) 30%,
      color-mix(in srgb, var(--fo-color) 50%, #000) 58%,
      color-mix(in srgb, var(--fo-color) 32%, #000) 80%,
      color-mix(in srgb, var(--fo-color) 20%, #000) 100%);
}

.fenix-orb--bare .fenix-orb__floor { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fenix-orb__rings { display: none; }
}