.gabe-cursor {
  --cursor-x: -100px;
  --cursor-y: -100px;
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  z-index: 2147483646;
  border: 2px solid rgba(0, 119, 190, 0.8);
  border-radius: 50%;
  background-color: rgba(0, 119, 190, 0.04);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0)
    translate(-50%, -50%);
  transition:
    width 180ms ease,
    height 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 120ms ease;
  will-change: transform, width, height;
}

.gabe-cursor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0878ba;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease;
}

.gabe-cursor.is-visible {
  opacity: 1;
}

.gabe-cursor.is-hovering {
  width: 100px;
  height: 100px;
  border-color: transparent;
  background-color: rgba(0, 101, 165, 0.32);
}

.gabe-cursor.is-hovering::after {
  opacity: 0;
}

@media (hover: none), (pointer: coarse) {
  .gabe-cursor {
    display: none !important;
  }
}
.gabe-rotating-line {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.22em;
    white-space: nowrap;
    perspective: 600px;
}

.gabe-fixed-word {
    color: #888;
    font-weight: 400;
}

.gabe-flip-word {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    transform: rotateX(0);
    transform-origin: center center;
    transition:
        transform 260ms ease,
        opacity 260ms ease;
}

.gabe-flip-word.is-leaving {
    opacity: 0;
    transform: rotateX(90deg);
}

.gabe-flip-word.is-entering {
    opacity: 0;
    transform: rotateX(-90deg);
    transition: none;
}