:root {
  --ripple-origin-x: 50%;
  --ripple-origin-y: 75%;
  --ripple-opacity: 0.375;
  --ripple-blur: 1.5px;
}

.wrapper {
  --ripple-gap: 0.065em;
  --ripple-offset: 0px;
  
  font-size: min(20vw, 20vh);
  position: relative;
  isolation: isolate;

  background: repeating-radial-gradient(
    circle at var(--ripple-origin-x) var(--ripple-origin-y),
    #fff calc(0px + var(--ripple-offset)),
    #888 calc(var(--ripple-gap) + var(--ripple-offset)),
    #fff calc(calc(2 * var(--ripple-gap)) + var(--ripple-offset))
  );

  animation: ripple 1.5s linear infinite;
  display: grid;
  place-items: center;
  width: 70vw;
  height: 70vh;
  filter: contrast(2000%);
}

.text {
  display: flex;
  text-transform: uppercase;
  font-family: system-ui, sans-serif;
  text-transform: uppercase;
  font-weight: 1000;
  opacity: var(--ripple-opacity);
  filter: blur(var(--ripple-blur));
}

.overlay {
  --gradient-from: oklch(60.9% 0.126 221.723);
  --gradient-to: oklch(95.6% 0.045 203.388);

  position: absolute;
  inset: 0;
  background: radial-gradient(
    at var(--ripple-origin-x) var(--ripple-origin-y),
    var(--gradient-from),
    var(--gradient-to)
  );
  mix-blend-mode: lighten;
  pointer-events: none;
}

@property --ripple-offset {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes ripple {
  from {
    --ripple-offset: 0px;
  }
  to {
    --ripple-offset: calc(2 * var(--ripple-gap));
  }
}