:root {
  color-scheme: light;
  font-family: Helvetica, Arial, sans-serif;
  background: #fff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #fff;
}

.lava {
  position: absolute;
  inset: 0;
}

.lava {
  z-index: 0;
  pointer-events: none;
}

.stream {
  position: absolute;
  top: 4%;
  bottom: 4%;
  width: 22vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}

.stream-left { left: 0; }
.stream-right { right: 0; }

.blob {
  position: absolute;
  display: block;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 46% 54% 57% 43% / 55% 43% 57% 45%;
  background: #000;
  will-change: transform, border-radius;
  animation:
    stream-cycle var(--duration) ease-in-out infinite,
    morph calc(var(--duration) * 0.46) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

.blob-1 { --size: 7vw; --duration: 58s; --delay: -4s; left: 8%; top: 102%; --meet-x: 5vw; --meet-y: -96vh; }
.blob-2 { --size: 9vw; --duration: 58s; --delay: -4s; left: 34%; top: 107%; --meet-x: 0vw; --meet-y: -101vh; }
.blob-3 { --size: 6vw; --duration: 58s; --delay: -4s; left: 67%; top: 104%; --meet-x: -6vw; --meet-y: -98vh; }
.blob-4 { --size: 8vw; --duration: 64s; --delay: -33s; left: 7%; top: 105%; --meet-x: 6vw; --meet-y: -99vh; }
.blob-5 { --size: 6vw; --duration: 64s; --delay: -33s; left: 40%; top: 101%; --meet-x: 0vw; --meet-y: -95vh; }
.blob-6 { --size: 9vw; --duration: 64s; --delay: -33s; left: 65%; top: 108%; --meet-x: -5vw; --meet-y: -102vh; }

@keyframes stream-cycle {
  0%, 100% { transform: translate3d(0, 14vh, 0) rotate(0deg) scale(0.82); }
  42% { transform: translate3d(var(--meet-x), var(--meet-y), 0) rotate(150deg) scale(1); }
  48%, 54% { transform: translate3d(var(--meet-x), var(--meet-y), 0) rotate(190deg) scale(1.14); }
  60% { transform: translate3d(var(--meet-x), var(--meet-y), 0) rotate(230deg) scale(1); }
}

@keyframes morph {
  0% { border-radius: 42% 58% 52% 48% / 62% 38% 62% 38%; }
  50% { border-radius: 59% 41% 66% 34% / 38% 58% 42% 62%; }
  100% { border-radius: 37% 63% 44% 56% / 57% 35% 65% 43%; }
}

.identity {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(72vw, 760px);
  transform: translate(-50%, -50%);
  text-align: center;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.identity p {
  margin: clamp(8px, 1.1vw, 14px) 0 0;
  color: #000;
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: lowercase;
}

@media (max-width: 640px) {
  .identity { width: min(66vw, 500px); }
  .stream { width: 15vw; }
  .blob-1 { --size: 7vw; left: 5%; --meet-x: 4vw; }
  .blob-2 { --size: 9vw; left: 27%; --meet-x: 0vw; }
  .blob-3 { --size: 6vw; left: 62%; --meet-x: -4vw; }
  .blob-4 { --size: 8vw; left: 4%; --meet-x: 4vw; }
  .blob-5 { --size: 6vw; left: 35%; --meet-x: 0vw; }
  .blob-6 { --size: 9vw; left: 58%; --meet-x: -4vw; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation-play-state: paused; }
}