:root {
  --sb-teal-deep: #0c5564;
  --sb-teal-soft: #51818a;
  --sb-green: #38751c;
  --sb-gold: #fcb827;
  --sb-orange: #e77826;
  --sb-red: #b02814;
  --sb-plum: #6e3473;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(155deg, #061b25 0%, #11313a 34%, #1e212c 62%, #241c2f 100%);
}

.ambient {
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  overflow: hidden;
  filter: saturate(1.12);
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 50% 50%, rgba(5, 8, 18, 0) 35%, rgba(5, 8, 18, 0.62) 92%);
}

.blob {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--blob-color, #ffffff);
  opacity: 0.4;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: blur(80px);
  will-change: transform, opacity;
}

.logo-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(58vw, 360px);
}

.logo-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 84%;
  width: 78%;
  height: 20%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  background:
    radial-gradient(ellipse at 18% 46%, rgba(12, 85, 100, 0.52), rgba(12, 85, 100, 0) 62%),
    radial-gradient(ellipse at 40% 54%, rgba(252, 184, 39, 0.44), rgba(252, 184, 39, 0) 66%),
    radial-gradient(ellipse at 58% 52%, rgba(110, 52, 115, 0.42), rgba(110, 52, 115, 0) 64%),
    radial-gradient(ellipse at 80% 48%, rgba(56, 117, 28, 0.48), rgba(56, 117, 28, 0) 62%);
  filter: blur(13px) saturate(1.16);
  pointer-events: none;
  z-index: 0;
  transition:
    opacity 420ms ease,
    transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.logo-stage.is-paused::after {
  opacity: 0.78;
  transform: translate(-50%, -50%) scale(1);
}

.logo-stage.is-transitioning {
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  transform-origin: center center;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  transition: filter 420ms ease;
}

.logo.is-paused {
  filter: none;
}

.logo.is-transitioning {
  transition:
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 420ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none !important;
  }

  .logo-stage,
  .logo {
    animation: none !important;
  }
}