/* samdodsworth.com · the dot (cursor.js). Only active for a real mouse (html.has-dot). */
html.has-dot, html.has-dot * { cursor: none !important; }
html.has-dot :is(input, textarea, select, [contenteditable]) { cursor: auto !important; }
html.has-dot :is(input[type="text"], input[type="email"], input:not([type]), textarea) { cursor: text !important; }

.dot { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 240ms var(--ease-out, ease); }
.dot.is-on { opacity: 1; }
html.dot-off .dot { opacity: 0; }
.dot__core { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sc-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 16%, transparent); transition: width 260ms var(--ease-out), height 260ms, left 260ms, top 260ms, background-color 260ms; }
.dot.is-hot .dot__core { left: -9px; top: -9px; width: 18px; height: 18px; background: color-mix(in oklab, var(--sc-accent) 30%, transparent); }
.dot.is-press .dot__core { animation: dot-press 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dot-press { 0% { scale: 1; } 30% { scale: 0.55; } 100% { scale: 1; } }

/* the tip: a tiny section label by default, a card when the pointer is over something with its own page */
.dot__tip { position: absolute; left: 14px; top: 12px; display: grid; }
.dot__label { grid-area: 1 / 1; justify-self: start; align-self: start; padding: 4px 7px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in oklab, var(--sc-surface) 88%, transparent); border: 1px solid var(--sc-hairline);
  font: 400 10px/1 var(--sc-font-mono); color: var(--sc-ink-soft); letter-spacing: 0.02em;
  transition: opacity 200ms var(--ease-out), transform 300ms var(--ease-out), filter 200ms; }
.dot__label:empty { opacity: 0; }
.dot__label.is-swap { opacity: 0; filter: blur(2px); }
.dot__card { grid-area: 1 / 1; align-self: start; display: grid; gap: 6px; width: 16.5rem; padding: 14px 16px; border-radius: 16px;
  background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: 0 24px 48px -24px var(--shadow, rgba(0,0,0,.35));
  transform-origin: 0 0; transform: scale(0.35); opacity: 0;
  transition: transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms var(--ease-out); }
.dot__card small { font: 400 10.5px/1 var(--sc-font-mono); opacity: 0.8; white-space: nowrap; }
.dot__card b { font: 500 1.05rem/1.2 var(--sc-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.dot__card em { font: 500 12px/1 var(--sc-font-text); font-style: normal; }
.dot__card i { display: inline-block; font-style: normal; animation: dot-nudge 1.2s ease-in-out infinite; }
@keyframes dot-nudge { 50% { transform: translateX(4px); } }
.dot.is-go .dot__card { transform: none; opacity: 1; }
.dot.is-go .dot__label { opacity: 0; transform: scale(0.8); }
.dot.is-go .dot__core { background: var(--sc-accent-ink); box-shadow: 0 0 0 3px var(--sc-accent); }

.dot__ring { position: fixed; left: 0; top: 0; z-index: 199; pointer-events: none; }
.dot__ring::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--sc-accent); animation: dot-ring 640ms var(--ease-out) forwards; }
@keyframes dot-ring { to { transform: scale(4.2); opacity: 0; } }

/* elements with a landing page: a quiet hint that they lead somewhere */
[data-go] { position: relative; }
html.has-dot [data-go] { transition: box-shadow 300ms var(--ease-out); }
html.has-dot [data-go]:hover { box-shadow: 0 0 0 2px var(--sc-accent), 0 30px 60px -36px var(--shadow, rgba(0,0,0,.35)); }

/* the same link for touch and keyboard: visible on touch, revealed on focus with a mouse */
.go-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 500 var(--sc-t-xs, 12px)/1.3 var(--sc-font-mono); color: var(--sc-accent); text-decoration: none; }
.go-link::after { content: "→"; }
html.has-dot .go-link:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .dot__card, .dot__label, .dot__core { transition: none; }
  .dot__card i, .dot.is-press .dot__core, .dot__ring::before { animation: none; }
}