*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.page {
  --glow-size: clamp(440px, 58vw, 920px);

  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #071d2b;
  overflow: hidden;
}

.glow-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--glow-size) / 2);
  pointer-events: none;
}

.glow-mover {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 0;
  height: 0;
  animation: glow-travel 44s ease-in-out infinite;
}

.glow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--glow-size);
  height: var(--glow-size);
  border-radius: 50%;
  transform: translate(-50%, 58%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(101, 194, 148, 0.65) 0%,
    rgba(101, 194, 148, 0.38) 26%,
    rgba(101, 194, 148, 0.16) 46%,
    rgba(101, 194, 148, 0.06) 58%,
    rgba(7, 29, 43, 0) 72%,
    transparent 82%
  );
  filter: blur(34px);
}

.glow::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(101, 194, 148, 0.28) 0%,
    rgba(101, 194, 148, 0.1) 42%,
    rgba(101, 194, 148, 0.03) 62%,
    transparent 78%
  );
  filter: blur(48px);
}

.glow::after {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(101, 194, 148, 0.14) 0%,
    rgba(101, 194, 148, 0.05) 48%,
    transparent 72%
  );
  filter: blur(72px);
}

@keyframes glow-travel {
  0%,
  100% {
    left: 100%;
  }
  50% {
    left: 0%;
  }
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.logo {
  width: clamp(180px, 32vw, 320px);
  height: auto;
  display: block;
}

@media (max-width: 480px) {
  .page {
    --glow-size: clamp(360px, 82vw, 620px);
  }

  .glow {
    filter: blur(28px);
  }

  .glow::before {
    filter: blur(36px);
  }

  .glow::after {
    filter: blur(52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-mover {
    animation: none;
    left: 100%;
  }
}