/* Custom cursor (cursor.js): a small circle that follows the pointer, a labelled pill over case cards and Cherry's photo.
   Only on devices with a mouse; touch screens keep their normal behaviour. */
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea { cursor: text !important; }

.cursor { position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none; view-transition-name: cursor; }
.cursor-dot { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); box-sizing: border-box;
  width: 14px; height: 14px; border-radius: 999px; background: #0c0c0c; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s, opacity .2s; }
.cursor-label { font: 500 13px Manrope, system-ui, sans-serif; letter-spacing: -0.01em; color: #fff; opacity: 0; transition: opacity .15s; }

/* over a link or button: a bigger, see-through ring */
.cursor.is-link .cursor-dot { width: 40px; height: 40px; background: transparent; box-shadow: inset 0 0 0 1.5px #0c0c0c, 0 0 0 1.5px rgba(255,255,255,0.6); }
/* over a case card or the photo: a pill with a label (its width is set by cursor.js to fit the text) */
.cursor.is-label .cursor-dot { height: 38px; background: rgba(12,12,12,0.72); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 24px -10px rgba(12,12,12,0.35); }
.cursor.is-label .cursor-label { opacity: 1; transition-delay: .1s; }
/* pressed, typing, or off the page */
.cursor.is-down .cursor-dot { transform: translate(-50%, -50%) scale(0.85); }
.cursor.is-text .cursor-dot, .cursor.is-off .cursor-dot { opacity: 0; }