/* A clear optical water drop, with a fixed tip and refracted light inside. */
#custom-cursor {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 9999;
  overflow: visible;
  outline: 0;
  width: 34px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
  filter: none;
  mix-blend-mode: normal;
  isolation: isolate;
  transform: translate3d(var(--cursor-x, 0), var(--cursor-y, 0), 0) translate(-6px, -2px);
  transition: opacity 100ms ease-out;
}
#custom-cursor::before,
#custom-cursor::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  width: 34px;
  height: 36px;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  background: url('./assets/cursor-optical-drop.svg') center / contain no-repeat;
  transition: opacity 140ms ease-out;
}
#custom-cursor::before,#custom-cursor::after{z-index:2}
#custom-cursor::after { background-image: url('./assets/cursor-optical-drop-hover.svg'); opacity: 0; }
.cursor-ready #custom-cursor { opacity: 1; }
.cursor-ready #custom-cursor.is-hover { width: 34px; height: 36px; background: transparent; }
.cursor-ready #custom-cursor.is-hover::before { opacity: 0; }
.cursor-ready #custom-cursor.is-hover::after { opacity: 1; }

/* A clipped live lens gives the transparent artwork actual background optics. */
.cursor-droplet-lens{position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:path("M6 2C8.2 8.4 18.8 8 23 15.5C27.9 24.3 22.7 33 15.7 33.2C8.3 33.5 3.7 27.9 4.5 21.4C5.3 14.8 8.3 10.2 6 2Z");background:rgb(207 245 253 / .035);backdrop-filter:blur(.65px) saturate(1.15);-webkit-backdrop-filter:blur(.65px) saturate(1.15);transition:backdrop-filter .2s ease-out}
#custom-cursor.is-hover .cursor-droplet-lens{backdrop-filter:blur(.9px) saturate(1.23);-webkit-backdrop-filter:blur(.9px) saturate(1.23)}
.cursor-droplet-ripple{position:absolute;left:16px;top:31px;z-index:1;width:11px;height:4px;border:1px solid rgb(134 217 238 / .38);border-radius:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.6)}
#custom-cursor.is-hover .cursor-droplet-ripple{animation:cursor-drop-ripple .58s ease-out both}
@keyframes cursor-drop-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}22%{opacity:.38}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}

/* A single clipped reflection floats above the target; its layout stays intact. */
.cursor-sheen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9997;
  display: block;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: screen;
}
.cursor-sheen__light {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 45%;
  height: 200%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgb(222 247 255 / .04) 28%, rgb(248 254 255 / .36) 46%, rgb(255 255 255 / .62) 50%, rgb(208 241 255 / .14) 59%, transparent 83%);
}
/* Authoritative across clickable descendants, including native radio hit areas. */
html.cursor-ready,
html.cursor-ready * { cursor: none !important; }
#custom-cursor:popover-open { display: block; }
#custom-cursor[popover]:not(:popover-open) { display: none; }
#custom-cursor::backdrop { display: none; background: transparent; pointer-events: none; }

@media (max-width: 899px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (forced-colors: active) {
  #custom-cursor, .cursor-sheen { display: none !important; }
  html.cursor-ready,
  html.cursor-ready * { cursor: auto !important; }
}