/* Only on pointer devices (not touch) */
@media (pointer: fine) {
  body {
    cursor: none;
  }

  a,
  button,
  [role='button'],
  input,
  textarea,
  .gallery__item,
  .timeline__image,
  dialog,
  dialog * {
    cursor: none;
  }
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-blue-dark);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
  mix-blend-mode: multiply;
}

.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-blue);
  opacity: 0.25;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition:
    left 120ms ease-out,
    top 120ms ease-out,
    width var(--transition-base),
    height var(--transition-base),
    opacity var(--transition-base),
    background-color var(--transition-base);
  mix-blend-mode: multiply;
}

/* Hover state — dot shrinks, trail grows and turns burgundy */
.cursor-dot.is-hovering {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.cursor-trail.is-hovering {
  width: 56px;
  height: 56px;
  opacity: 0.15;
  background-color: var(--color-burgundy);
}

/* Lightbox open — bright cursor above everything */
.cursor-dot.is-lightbox {
  background-color: var(--color-cream);
  mix-blend-mode: normal;
  z-index: 10001;
}

.cursor-trail.is-lightbox {
  background-color: var(--color-blue-light);
  mix-blend-mode: normal;
  opacity: 0.4;
  z-index: 10000;
}