/* Elyxee custom cursor — hide system pointer when active */
@media (hover: hover) and (pointer: fine) {
  html.cursor-ready,
  html.cursor-ready body,
  html.cursor-ready a,
  html.cursor-ready button,
  html.cursor-ready input,
  html.cursor-ready textarea,
  html.cursor-ready select,
  html.cursor-ready [role="button"] {
    cursor: none !important;
  }
}

#cursor-fx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  contain: strict;
  /* No opacity fade-in: a 90ms transition would reveal the first paint while the
     flame is still settling onto the entry point and reads as a centre flash. */
}

#cursor-fx.is-active {
  opacity: 1;
}

.cursor-touch-note {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  #cursor-fx {
    display: none;
  }

  .cursor-touch-note {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: block;
    color: #9a9288;
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cursor-fx {
    transition-duration: 0.01ms;
  }
}

@media (forced-colors: active) {
  #cursor-fx {
    display: none;
  }
}