/* Pointer, reading progress, and opt-in depth share the existing rose palette. */
:root {
  --page-progress: 0;
  --scroll-energy: 0;
  --scroll-direction: 0;
}

.sensory-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: 2px;
  background: var(--rose, #ffb6c1);
  opacity: calc(.48 + var(--scroll-energy, 0) * .4);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

[data-depth] {
  /* Independent translate preserves the element's authored transform. */
  translate: 0 var(--depth-y, 0px);
}

.sensory-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  color: var(--rose, #ffb6c1);
  user-select: none;
}

.sensory-cursor.is-visible { opacity: 1; }
.sensory-cursor * { pointer-events: none; }
.sensory-cursor-ring,
.sensory-cursor-dot,
.sensory-cursor-label { position: absolute; top: 0; left: 0; }

.sensory-cursor-ring {
  width: 29px;
  height: 29px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .7;
  translate: var(--cursor-ring-x, 0px) var(--cursor-ring-y, 0px);
  transform: translate(-50%, -50%) scale(var(--cursor-scale, 1));
  transition: transform 180ms cubic-bezier(.16, 1, .3, 1), opacity 160ms ease;
}

.sensory-cursor-dot {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  translate: var(--cursor-point-x, 0px) var(--cursor-point-y, 0px);
  transform: translate(-50%, -50%);
}

.sensory-cursor-label {
  translate: var(--cursor-ring-x, 0px) calc(var(--cursor-ring-y, 0px) + 31px);
  transform: translateX(-50%);
  color: #fff1f5;
  font: 600 10px/1.2 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 5px #08080a;
}

.sensory-cursor.is-interactive { --cursor-scale: 1.4; }
.sensory-cursor.has-label { --cursor-scale: 1.8; }
.sensory-cursor.is-pressed { --cursor-scale: .82; }
.sensory-cursor.is-interactive .sensory-cursor-ring { opacity: 1; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.sensory-cursor-active,
  html.sensory-cursor-active body,
  html.sensory-cursor-active body *,
  html.sensory-cursor-active dialog::backdrop { cursor: none !important; }

  html.sensory-cursor-active :is(input, textarea, select, option, video, iframe, [contenteditable], [data-native-cursor]),
  html.sensory-cursor-active :is(input, textarea, select, [contenteditable], [data-native-cursor]) * { cursor: auto !important; }
  html.sensory-cursor-active :is(button:disabled, [aria-disabled="true"]) { cursor: default !important; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .sensory-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-depth] { translate: none; }
}

body.motion-paused [data-depth] { translate: none; }