html,
body {
  min-height: 100%;
  margin: 0;
background: transparent !important;
}

body {
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: hidden;
}

.yari-reactor {
  --slime-level: 0%;
  --slime-top: #76fff2;
  --slime-middle: #28d9e7;
  --slime-bottom: #8768ff;
  --slime-glow: rgba(78, 255, 238, 0.9);

  position: relative;
  width: 340px;
  text-align: center;
  font-family: Arial, sans-serif;
}

.yari-star-stage {
    position: relative;

    width: min(320px, 100%);
    aspect-ratio: 1 / 1;
    height: auto;

    margin: 0 auto;

    animation:
        yari-star-float
        16s
        ease-in-out
        infinite;

    transform-origin: center;
}

.yari-reactor-glow {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 250px;
  height: 250px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--slime-glow);
  opacity: 0.22;
  filter: blur(42px);
  animation: yari-glow-breathe 8s ease-in-out infinite;
}

.yari-star-front {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 13px;
  width: 294px;
  height: 294px;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.28))
    drop-shadow(0 0 18px var(--slime-glow));
}

.yari-liquid-chamber {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 13px;
  width: 294px;
  height: 294px;
  overflow: hidden;

  -webkit-mask-image:
    url("./yari-star-fill-mask.png");
  mask-image:
    url("./yari-star-fill-mask.png");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  filter:
    drop-shadow(0 0 10px var(--slime-glow))
    drop-shadow(0 0 24px var(--slime-glow));
}

.yari-liquid {
  position: absolute;
  left: -150px;
  bottom: 0;
  width: 620px;
  height: var(--slime-level);
  transform-origin: bottom;
  background:
    linear-gradient(
      to top,
      var(--slime-bottom) 0%,
      var(--slime-middle) 48%,
      var(--slime-top) 100%
    );
  transition:
    height 1.4s ease,
    background 1.4s ease;
border-radius: 48% 52% 0 0 / 18px 22px 0 0;
}

.yari-liquid-front {
  z-index: 2;
  opacity: 1;
  animation:
    yari-plasma-front
    11s
    ease-in-out
    infinite;
filter:
  brightness(1.16)
  saturate(1.08)
  blur(0.2px)
  drop-shadow(0 -5px 14px var(--slime-glow));
}

.yari-liquid-back {
  z-index: 1;
  bottom: 0;
  opacity: 0.40;

  animation:
    yari-plasma-back
    14s
    ease-in-out
    infinite;

  filter:
    brightness(1.08)
    saturate(1.06)
    blur(4.5px)
    drop-shadow(0 0 14px var(--slime-glow));

  /*
   * Hides the back layer's separate top edge
   * while preserving its movement underneath.
   */
  -webkit-mask-image:
    linear-gradient(
      to top,
      black 0%,
      black 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to top,
      black 0%,
      black 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
}

.yari-reactor-title {
  margin: 8px 0 5px;
  color: #d9ffff;
  font-size: 22px;
  text-shadow:
    0 0 8px rgba(104, 255, 241, 0.9),
    0 0 18px var(--slime-glow);
}

.yari-reactor-status {
  margin: 0;
  color: #9ffff6;
  font-size: 15px;
}

.yari-reactor-total {
  margin: 8px 0 0;
  color: rgba(220, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.6;
}

@keyframes yari-glow-breathe {
  0%,
  100% {
    opacity: 0.16;
    transform: translateX(-50%) scale(0.96);
  }

  50% {
    opacity: 0.34;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes yari-plasma-front {
  0% {
    transform:
      translate3d(-22%, 0, 0)
      scaleX(1.08)
      scaleY(1);

    border-radius:
      48% 52% 0 0
      / 18px 22px 0 0;
  }

  25% {
    transform:
      translate3d(-30%, -3px, 0)
      scaleX(1.12)
      scaleY(1.03);

    border-radius:
      43% 57% 0 0
      / 18px 34px 0 0;
  }

  50% {
    transform:
      translate3d(-38%, 2px, 0)
      scaleX(1.06)
      scaleY(0.985);

    border-radius:
      38% 62% 0 0
      / 15px 40px 0 0;
  }

  75% {
    transform:
      translate3d(-29%, -2px, 0)
      scaleX(1.1)
      scaleY(1.02);

    border-radius:
      54% 46% 0 0
      / 32px 18px 0 0;
  }

  100% {
    transform:
      translate3d(-22%, 0, 0)
      scaleX(1.08)
      scaleY(1);

    border-radius:
      48% 52% 0 0
      / 18px 22px 0 0;
  }
}

@keyframes yari-plasma-back {
  0% {
    transform:
      translate3d(-24%, 1px, 0)
      scaleX(1.1)
      scaleY(0.995);
  }

  25% {
    transform:
      translate3d(-29%, -1px, 0)
      scaleX(1.11)
      scaleY(1.015);
  }

  50% {
    transform:
      translate3d(-34%, 1px, 0)
      scaleX(1.08)
      scaleY(0.995);
  }

  75% {
    transform:
      translate3d(-28%, 0, 0)
      scaleX(1.1)
      scaleY(1.01);
  }

  100% {
    transform:
      translate3d(-24%, 1px, 0)
      scaleX(1.1)
      scaleY(0.995);
  }
}

/* =========================================
   Working website-star liquid layer
   ========================================= */

.yari-liquid-chamber {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 4 !important;
  outline: none !important;
}

.yari-star-front {
  z-index: 6 !important;
}

.yari-liquid {
  display: block !important;
  visibility: visible !important;
  opacity: 1;
  height: max(12%, var(--slime-level)) !important;

  background:
    linear-gradient(
      to top,
      var(--slime-bottom) 0%,
      var(--slime-middle) 48%,
      var(--slime-top) 100%
    ) !important;

  filter:
    brightness(1.12)
    drop-shadow(0 0 10px var(--slime-glow));

  transition:
    height 1.4s ease,
    background 1.4s ease,
    filter 1.4s ease;
}

.yari-liquid-front {
  animation:
    yari-plasma-front
    11s
    ease-in-out
    infinite !important;
}

.yari-liquid-back {
  opacity: 0.62;
  animation:
    yari-plasma-back
    14s
    ease-in-out
    infinite !important;
}
/* =========================================
   Heart bubbles inside the plasma
   ========================================= */

.yari-heart-field {
    position: absolute;
    inset: -25px;

    z-index: 8;

    pointer-events: none;
}
.yari-heart-bubble {

    position: absolute;

    left: var(--heart-left);
    top: var(--heart-top);

    color: rgba(255,255,255,.78);

    font-size: var(--heart-size);

    line-height: 1;

    opacity: 0;

    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.8))
        drop-shadow(0 0 14px var(--slime-glow));

    animation:
        yari-heart-float
        var(--heart-duration)
        ease-in-out
        infinite;

    animation-delay:
        var(--heart-delay);
}

.heart-one {
  --heart-left:14%;
  --heart-top:68%;
  --heart-size: 10px;
  --heart-duration: 7.5s;
  --heart-delay: -2s;
  --heart-drift: 9px;
}

.heart-two {
  --heart-left:70%;
  --heart-top:58%;
  --heart-size: 15px;
  --heart-duration: 9.5s;
  --heart-delay: -6s;
  --heart-drift: -12px;
}

.heart-three {
  --heart-left:28%;
  --heart-top:18%;
  --heart-size: 8px;
  --heart-duration: 6.8s;
  --heart-delay: -4s;
  --heart-drift: 7px;
}

.heart-four {
  --heart-left:76%;
  --heart-top:26%;
  --heart-size: 12px;
  --heart-duration: 8.8s;
  --heart-delay: -1s;
  --heart-drift: -8px;
}

.heart-five {
  --heart-left:46%;
  --heart-top:82%;;
  --heart-size: 9px;
  --heart-duration: 10.5s;
  --heart-delay: -8s;
  --heart-drift: 11px;
}

.heart-six {
  --heart-left:56%;
  --heart-top:8%;
  --heart-size: 6px;
  --heart-duration: 11.5s;
  --heart-delay: -10s;
  --heart-drift: -6px;
}

@keyframes yari-heart-float {

    0% {

        opacity:0;

        transform:
            translate3d(0,12px,0)
            scale(.4)
            rotate(-10deg);

    }

    15%{

        opacity:.55;

    }

    55%{

        opacity:.85;

        transform:
            translate3d(
                var(--heart-drift),
                -35px,
                0)
            scale(.9)
            rotate(8deg);

    }

    100%{

        opacity:0;

        transform:
            translate3d(
                calc(var(--heart-drift)*1.4),
                -70px,
                0)
            scale(1.15)
            rotate(-6deg);

    }

}

@keyframes yari-star-float {

    0%,
    100%{

        transform:
            translateY(0px)
            rotate(-0.15deg);

    }

    25%{

        transform:
            translateY(-6px)
            rotate(.15deg);

    }

    50%{

        transform:
            translateY(-12px)
            rotate(0deg);

    }

    75%{

        transform:
            translateY(-4px)
            rotate(-.12deg);

    }

}
/* =========================================
   Ancient reactor energy motes
   ========================================= */

.yari-energy-motes {
  position: absolute;
  inset: -22px;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
}

.yari-energy-mote {
  position: absolute;
  left: var(--mote-left);
  top: var(--mote-top);

  width: var(--mote-size);
  height: var(--mote-size);

  border-radius: 50%;
  opacity: 0;

  /*
   * This is where the motes inherit the
   * current reactor stage color.
   */
  color: var(--slime-top);

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.9) 18%,
      currentColor 48%,
      transparent 78%
    );

  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.85),
    0 0 9px currentColor,
    0 0 16px var(--slime-glow);

  animation:
    yari-ancient-mote-drift
    var(--mote-duration)
    ease-in-out
    infinite;

  animation-delay: var(--mote-delay);

  will-change:
    transform,
    opacity;
}

.mote-one {
  --mote-left: 10%;
  --mote-top: 68%;
  --mote-size: 4px;
  --mote-duration: 17s;
  --mote-delay: -3s;
  --mote-x: 13px;
  --mote-y: -43px;
}

.mote-two {
  --mote-left: 23%;
  --mote-top: 25%;
  --mote-size: 6px;
  --mote-duration: 21s;
  --mote-delay: -11s;
  --mote-x: -10px;
  --mote-y: -32px;
}

.mote-three {
  --mote-left: 76%;
  --mote-top: 31%;
  --mote-size: 3px;
  --mote-duration: 16s;
  --mote-delay: -7s;
  --mote-x: 9px;
  --mote-y: -39px;
}

.mote-four {
  --mote-left: 86%;
  --mote-top: 68%;
  --mote-size: 5px;
  --mote-duration: 23s;
  --mote-delay: -15s;
  --mote-x: -14px;
  --mote-y: -47px;
}

.mote-five {
  --mote-left: 39%;
  --mote-top: 83%;
  --mote-size: 3px;
  --mote-duration: 25s;
  --mote-delay: -9s;
  --mote-x: 7px;
  --mote-y: -53px;
}

.mote-six {
  --mote-left: 63%;
  --mote-top: 14%;
  --mote-size: 4px;
  --mote-duration: 19s;
  --mote-delay: -13s;
  --mote-x: -8px;
  --mote-y: -29px;
}

.mote-seven {
  --mote-left: 7%;
  --mote-top: 42%;
  --mote-size: 2px;
  --mote-duration: 28s;
  --mote-delay: -20s;
  --mote-x: 12px;
  --mote-y: -25px;
}

.mote-eight {
  --mote-left: 91%;
  --mote-top: 43%;
  --mote-size: 3px;
  --mote-duration: 24s;
  --mote-delay: -17s;
  --mote-x: -11px;
  --mote-y: -34px;
}

@keyframes yari-ancient-mote-drift {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 8px, 0)
      scale(0.45);
  }

  18% {
    opacity: 0.34;
  }

  48% {
    opacity: 0.68;
    transform:
      translate3d(
        calc(var(--mote-x) * 0.45),
        calc(var(--mote-y) * 0.48),
        0
      )
      scale(0.88);
  }

  78% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        var(--mote-x),
        var(--mote-y),
        0
      )
      scale(0.3);
  }
}
/* =========================================
   Recent Infusion
   ========================================= */

.yari-recent-infusion {
  margin: 9px 0 0;
  color: #efffff;
  font-size: 15px;
  line-height: 1.5;

  opacity: 0.58;

  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.55),
    0 0 12px var(--slime-glow);

  transition:
    opacity 3s ease,
    transform 3s ease,
    filter 3s ease,
    text-shadow 3s ease;
}

.yari-recent-infusion[hidden] {
  display: none;
}

.yari-recent-infusion.yari-infusion-fresh {
  opacity: 1;
  transform: none;
  filter: brightness(1.12);

  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 14px var(--slime-glow),
    0 0 24px var(--slime-glow);

  animation:
    yari-infusion-soft-pulse
    4.5s
    ease-in-out
    infinite;
}

@keyframes yari-infusion-soft-pulse {
  0%,
  100% {
    opacity: 0.72;
    filter: brightness(1);
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.5),
      0 0 10px var(--slime-glow);
  }

  50% {
    opacity: 1;
    filter: brightness(1.22);
    text-shadow:
      0 0 7px rgba(255, 255, 255, 0.95),
      0 0 16px var(--slime-glow),
      0 0 28px var(--slime-glow);
  }
}

.yari-recent-infusion.yari-infusion-settled {
    opacity: 0.72;
    transform: none;
    filter: brightness(1);

    animation:
        yari-infusion-soft-pulse
        7s
        ease-in-out
        infinite;
}

/* Prettier reactor information font */

.yari-reactor-status,
.yari-recent-infusion,
.yari-reactor-total {
  font-family:
    "Century Gothic",
    "Trebuchet MS",
    "Segoe UI",
    sans-serif;

  letter-spacing: 0.5px;
}