/* The native brand cursor remains available while the interactive layer loads. */
.summit-cursor { display: none; }

@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  html {
    --summit-cursor: url('/assets/cursor-spark.svg') 16 16;
    cursor: var(--summit-cursor), auto;
  }

  html :is(a[href], button:not(:disabled), summary, .check-label,
    [role="button"]:not([aria-disabled="true"]), select:not(:disabled),
    input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled),
    input[type="submit"]:not(:disabled), input[type="button"]:not(:disabled),
    input[type="reset"]:not(:disabled)) {
    cursor: var(--summit-cursor), pointer;
  }

  /* Preserve the familiar caret over editable fields. */
  html :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="search"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="password"], textarea,
    [contenteditable="true"], [contenteditable=""]) {
    cursor: text;
  }

  .summit-cursor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: difference;
    transition: opacity .15s ease;
    will-change: transform;
  }

  .summit-cursor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: url('/assets/cursor-spark.svg') center / contain no-repeat;
    mask: url('/assets/cursor-spark.svg') center / contain no-repeat;
    transform: scale(1);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
    /* Rotate independently so hover and press scaling remain smooth. */
    animation: summit-cursor-turn 24s linear infinite paused;
  }

  .summit-cursor.is-visible { opacity: 1; }
  .summit-cursor.is-visible::before { animation-play-state: running; }
  .summit-cursor.is-active::before { transform: scale(2); }
  .summit-cursor.is-pressed::before { transform: scale(.7); }

  @keyframes summit-cursor-turn {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
  }

  /* Enabled only after the visible layer is ready; native fields opt out in JS. */
  html.has-live-cursor,
  html.has-live-cursor * { cursor: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .summit-cursor, .summit-cursor::before { transition: none; }
    .summit-cursor::before { animation: none; }
  }
  .motion-paused .summit-cursor,
  .motion-paused .summit-cursor::before { transition: none; }
  .motion-paused .summit-cursor::before { animation-play-state: paused; }
}