.hero {
  display: flex;
  flex: 0 0 100%;
  height: 100svh;
  margin-right: -50%;
}

.hero-canvas {
  width: 50vw;
  height: 100svh;
  pointer-events: none;
}

.hero-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100svh;
}

.hero-info {
  padding: var(--offset);
  display: flex;
  flex-direction: column;
  color: #fff;
  z-index: 5;
}

.hero-title,
.hero-text,
.hero-footer__link,
.switch-text {
  font-weight: 300;
}

.hero-title {
  font-size: calc(57px * var(--scale));
  font-weight: 300;
  letter-spacing: calc(-2px * var(--scale));
  margin-bottom: calc(var(--offset) / 2);
}

.hero-text {
  max-width: calc(400px * var(--scale));
  font-size: calc(20px * var(--scale));
  line-height: 1.55;
  font-weight: 300;
}

.hero-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--offset);
  min-height: calc(22px * var(--scale));
}

.hero-circle {
  position: absolute;
  right: calc(89px * var(--scale));
  bottom: calc(73px * var(--scale));
  cursor: pointer;
  transform: translate(50%, 50%) scale(0.2);
}

.hero-circle .black-hole {
  --circle-main-color: #fff;
  --circle-main-size: 45px;
  --gooey-color: #ddd;
  --gooey-bubble-color: #ddd;

  transition: box-shadow 350ms ease, opacity 350ms ease;
}

.hero-circle .bubble,
.hero-circle .bubble::before,
.hero-circle .gooey-container {
  transition: opacity 350ms ease;
}

.mute .hero-circle .bubble,
.mute .hero-circle .bubble::before,
.mute .hero-circle .gooey-container {
  opacity: 0;
  visibility: hidden;
}

.mute .hero-circle .black-hole {
  opacity: 0.6;
  border: 8px solid var(--circle-main-color);
  box-shadow: 0 0 0 var(--circle-main-color) inset;
}

.mute .hero-info:has(.hero-volume:hover) .black-hole {
  opacity: 1;
}

.mute .hero-volume {
  opacity: 0.6;
  transition: opacity 350ms ease;
}

.mute .hero-volume:hover {
  opacity: 1;
}

.hero-volume {
  position: absolute;
  right: var(--offset);
  bottom: calc(48px * var(--scale));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50px * var(--scale));
  aspect-ratio: 1;
  cursor: pointer;
}

.volume {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(24px * var(--scale));
  height: calc(24px * var(--scale));
}

.volume.active {
  opacity: 1;
  visibility: visible;
}

.hero-footer__link {
  cursor: pointer;
  transition: opacity 350ms ease;
  opacity: 0.6;
}

.hero-footer__link {
  font-size: calc(15px * var(--scale));
}

.switch-text {
  font-size: calc(18px * var(--scale));
}

.hero-footer__link:hover {
  opacity: 1;
}