/* Custom cursor — desktop pointer only */

@media (hover: hover) and (pointer: fine) {
  html.custom-cursor-active,
  html.custom-cursor-active body,
  html.custom-cursor-active
    *:not(input):not(textarea):not(select):not(.cursor):not(.cursor *) {
    cursor: none !important;
  }

  html.custom-cursor-active input:not([type="button"]):not([type="submit"]):not(
      [type="reset"]
    ):not([type="checkbox"]):not([type="radio"]),
  html.custom-cursor-active textarea,
  html.custom-cursor-active select {
    cursor: text !important;
  }

  html.has-custom-cursor {
    scrollbar-width: none;
    scrollbar-gutter: auto;
  }

  html.has-custom-cursor::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  html.custom-cursor-active body.is-pointer-down:not(.is-page-scrolling) {
    user-select: none;
    -webkit-user-select: none;
  }

  html.custom-cursor-active .proof-frame__viewport--strip img {
    -webkit-user-drag: none;
    user-select: none;
  }

  html.custom-cursor-active .is-scroll-dragging {
    cursor: none !important;
  }
}

.cursor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

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

.cursor.is-native-zone {
  opacity: 0;
}

.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
}

.cursor__dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--amber-500);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 16px rgba(230, 132, 10, 0.55);
  transition:
    width 0.28s cubic-bezier(0.34, 1.3, 0.64, 1),
    height 0.28s cubic-bezier(0.34, 1.3, 0.64, 1),
    margin 0.28s cubic-bezier(0.34, 1.3, 0.64, 1),
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(230, 132, 10, 0.42);
  background: rgba(230, 132, 10, 0.05);
  box-shadow: 0 0 24px rgba(230, 132, 10, 0.08);
  transition:
    width 0.38s cubic-bezier(0.34, 1.35, 0.64, 1),
    height 0.38s cubic-bezier(0.34, 1.35, 0.64, 1),
    margin 0.38s cubic-bezier(0.34, 1.35, 0.64, 1),
    border-radius 0.32s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.cursor.is-hover .cursor__ring {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-color: rgba(230, 132, 10, 0.72);
  background: rgba(230, 132, 10, 0.1);
  box-shadow: 0 0 28px rgba(230, 132, 10, 0.16);
}

.cursor.is-hover .cursor__dot {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--amber-300);
}

.cursor.is-search .cursor__ring {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: var(--radius-md);
  border-color: rgba(230, 132, 10, 0.65);
  background: rgba(230, 132, 10, 0.08);
}

.cursor.is-search .cursor__dot {
  opacity: 0.7;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
}

.cursor.is-down .cursor__ring,
.cursor.is-dragging .cursor__ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-color: rgba(230, 132, 10, 0.9);
  background: rgba(230, 132, 10, 0.14);
}

.cursor.is-down.is-hover .cursor__ring {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}

@media (hover: hover) and (pointer: fine) {
  .page-scrollbar {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(4px + env(safe-area-inset-right, 0px));
    left: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 14px;
    z-index: 9998;
    box-sizing: border-box;
    pointer-events: none;
  }

  .page-scrollbar__track {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    background: rgba(14, 13, 12, 0.07);
    box-shadow: inset 0 0 0 1px rgba(14, 13, 12, 0.06);
    pointer-events: auto;
  }

  .page-scrollbar__thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    min-height: 64px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
    border: 2px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 1px 6px rgba(230, 132, 10, 0.28);
    touch-action: none;
    transition: background 0.15s ease;
    will-change: top;
  }

  .page-scrollbar.is-dragging .page-scrollbar__thumb {
    transition: none;
    background: linear-gradient(180deg, var(--amber-500), var(--amber-600));
  }

  .page-scrollbar__thumb:hover {
    background: linear-gradient(180deg, var(--amber-500), var(--amber-600));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    display: none !important;
  }

  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: auto !important;
  }
}