/* Shared site styles */
body {
  font-family: 'DM Sans', sans-serif;
}

.banner-height {
  min-height: 80vh;
}

/* Liquid hover text — SVG filter #liquid-distort must be on the page */
.liquid-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.liquid-text {
  position: relative;
  cursor: default;
  --liquid-x: 50%;
  --liquid-y: 50%;
  --liquid-radius: 70px;
}

.liquid-text__base {
  display: block;
  position: relative;
  z-index: 0;
}

.liquid-text__warp {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .liquid-text__warp {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    pointer-events: none;
    color: #fff;
    opacity: 0;
    filter: url(#liquid-distort);
    text-shadow:
      -1px 0 0 rgba(255, 40, 60, 0.85),
      1px 0 0 rgba(40, 220, 255, 0.85),
      0 0.5px 0 rgba(255, 220, 40, 0.5);
    transition: opacity 0.2s ease;
    -webkit-mask-image: radial-gradient(
      circle var(--liquid-radius) at var(--liquid-x) var(--liquid-y),
      #000 0%,
      #000 40%,
      transparent 72%
    );
    mask-image: radial-gradient(
      circle var(--liquid-radius) at var(--liquid-x) var(--liquid-y),
      #000 0%,
      #000 40%,
      transparent 72%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .liquid-text.is-active .liquid-text__warp {
    opacity: 1;
  }
}