/* ─── OSMO Scramble Text Cursor ─── */
/* Source: osmo.supply */

.cursor-wrap {
  z-index: 9999;
  pointer-events: none;
  padding-top: 1em;
  padding-left: .5em;
  padding-right: 1em;
  position: fixed;
  top: 0;
  left: 0;
}

.cursor-scramble {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  opacity: 0;
  color: #fff;
  background-color: #000;
  border-radius: .25em;
  justify-content: center;
  align-items: center;
  height: 2em;
  padding-left: .75em;
  padding-right: .75em;
  display: flex;
  position: relative;
}

.cursor-scramble__text {
  letter-spacing: -.01em;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .875em;
  font-weight: 500;
}

.cursor-scramble__chevron {
  color: #a1ff62;
  width: .375em;
  flex-shrink: 0;
}

/* ─── Mouse-capable devices only ─── */
@media (hover: hover) and (pointer: fine) {
  [data-cursor] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1),
                opacity   0.2s ease 0.1s;
    transform: translateX(0%) scale(1) rotate(0.001deg);
  }

  [data-cursor="active"] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1),
                opacity   0.2s ease 0s;
    opacity: 1;
    transform: translateX(0%) scale(1) rotate(0.001deg);
  }

  [data-cursor="active-edge"] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1),
                opacity   0.2s ease 0s;
    opacity: 1;
    transform: translateX(-100%) scale(1) rotate(0.001deg);
  }
}

/* ─── Touch devices — hide cursor ─── */
@media (hover: none) and (pointer: coarse) {
  .cursor-wrap {
    display: none;
  }
}