/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────
   NAVR — Universal Premium Cursor / Pointer Indicator (shared by the public site and the Admin preview).
   Paired with navr-cursor.js, which mounts ONE fixed `.navr-cursor` layer and writes only custom properties,
   data-attributes and per-element `translate` values. Everything here is out of flow, pointer-events:none and
   sized from `--nc-*` — no layout impact, no horizontal overflow.

   Families ([data-family]) share the same children and differ only in which are shown and how they are drawn:
   dot | ring | dual | spotlight | lens | crosshair | arrow | hand | trail | orbit | morph | signature | square |
   icon. `icon` (Icon Pointer mode) is the SAME layer with one extra child — no second engine, no second layer.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── native cursor suppression (only while the engine is mounted on this root) ── */
.navr-cursor-active,
.navr-cursor-active * { cursor: none !important; }

/* Exempt controls keep the native cursor, as does keyboard navigation (root gets .navr-cursor-native). */
.navr-cursor-active input:not([type="button"]):not([type="submit"]):not([type="reset"]),
.navr-cursor-active textarea,
.navr-cursor-active select,
.navr-cursor-active [contenteditable]:not([contenteditable="false"]),
.navr-cursor-active iframe,
.navr-cursor-active video[controls],
.navr-cursor-active audio,
.navr-cursor-active [data-navr-cursor="native"],
.navr-cursor-active [data-navr-cursor="native"] * { cursor: auto !important; }

.navr-cursor-active.navr-cursor-native,
.navr-cursor-active.navr-cursor-native * { cursor: auto !important; }

/* ── the layer ── */
.navr-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 2147483000;
    pointer-events: none !important;
    contain: layout style;
    opacity: var(--nc-opacity, 1);
    transition: opacity var(--nc-dur, 200ms) var(--nc-ease, ease-out);
    --nc-size: 32px;
    --nc-color: #1b5e20;
    --nc-accent: #c9a227;
    --nc-border: 1px;
    --nc-border-opacity: .9;
    --nc-glow: 0px;
    --nc-dur: 220ms;
    --nc-hover-dur: 200ms;
    --nc-click-dur: 450ms;
    --nc-ease: ease-out;
    --nc-lens-size: 96px;
    --nc-lens-border: 1px;
    --nc-lens-blur: 2px;
    --nc-icon-size: 32px;
    --nc-icon-color: #1b5e20;
    --nc-icon-opacity: 1;
    --nc-icon-scale: 1;
    --nc-icon-glow: 0px;
    --nc-icon-blur: 0px;
    --nc-icon-hover-scale: 1.3;
    --nc-icon-anim-dur: 2s;
    --nc-icon-shadow: none;
    --nc-i-s: 1;        /* icon scale, set by state rules */
    --nc-i-r: 0deg;     /* icon rotation, set by drag/grab rules */
    --nc-s: 1;          /* ring scale, set by state/hover rules */
    --nc-ds: 1;         /* dot scale */
    --nc-dot-ratio: .22;
    --nc-shadow: none;
}

.navr-cursor.is-hidden,
.navr-cursor.is-native { opacity: 0; }

.navr-cursor > * {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none !important;
    will-change: translate, transform;
    box-sizing: border-box;
}

/* Every part is centred on its own translate point by a negative margin equal to half its size. */
.navr-cursor__dot {
    width: calc(var(--nc-size) * var(--nc-dot-ratio));
    height: calc(var(--nc-size) * var(--nc-dot-ratio));
    margin: calc(var(--nc-size) * var(--nc-dot-ratio) / -2) 0 0 calc(var(--nc-size) * var(--nc-dot-ratio) / -2);
    border-radius: 50%;
    background: var(--nc-color);
    box-shadow: 0 0 var(--nc-glow) var(--nc-color);
    transform: scale(var(--nc-ds));
    transition: transform var(--nc-hover-dur) var(--nc-ease), opacity var(--nc-dur) var(--nc-ease), border-radius var(--nc-dur) var(--nc-ease);
}

.navr-cursor__ring,
.navr-cursor__ring2 {
    width: var(--nc-size);
    height: var(--nc-size);
    margin: calc(var(--nc-size) / -2) 0 0 calc(var(--nc-size) / -2);
    border-radius: 50%;
    border: var(--nc-border) solid var(--nc-color);
    opacity: var(--nc-border-opacity);
    box-shadow: 0 0 var(--nc-glow) color-mix(in srgb, var(--nc-color) 60%, transparent), var(--nc-shadow);
    transform: scale(var(--nc-s));
    transition: transform var(--nc-hover-dur) var(--nc-ease), opacity var(--nc-dur) var(--nc-ease),
                border-radius var(--nc-dur) var(--nc-ease), background-color var(--nc-dur) var(--nc-ease),
                border-width var(--nc-dur) var(--nc-ease), border-color var(--nc-dur) var(--nc-ease);
}

.navr-cursor__ring2 { display: none; }

.navr-cursor__lens {
    display: none;
    width: var(--nc-lens-size);
    height: var(--nc-lens-size);
    margin: calc(var(--nc-lens-size) / -2) 0 0 calc(var(--nc-lens-size) / -2);
    border-radius: 50%;
    border: var(--nc-lens-border) solid color-mix(in srgb, var(--nc-accent) 85%, transparent);
    opacity: 0;
    transform: scale(.6);
    transition: transform var(--nc-hover-dur) var(--nc-ease), opacity var(--nc-hover-dur) var(--nc-ease), border-radius var(--nc-dur) var(--nc-ease);
}

.navr-cursor__label {
    display: none;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: .04em;
    color: #fff;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity var(--nc-hover-dur) var(--nc-ease);
}

.navr-cursor__click {
    display: none;
    width: var(--nc-size);
    height: var(--nc-size);
    margin: calc(var(--nc-size) / -2) 0 0 calc(var(--nc-size) / -2);
    border-radius: 50%;
    border: 2px solid var(--nc-accent);
}

.navr-cursor__trail {
    width: calc(var(--nc-size) * var(--nc-dot-ratio) * (1 - var(--nc-i) / (var(--nc-n) + 1)));
    height: calc(var(--nc-size) * var(--nc-dot-ratio) * (1 - var(--nc-i) / (var(--nc-n) + 1)));
    margin: calc(var(--nc-size) * var(--nc-dot-ratio) * (1 - var(--nc-i) / (var(--nc-n) + 1)) / -2) 0 0
            calc(var(--nc-size) * var(--nc-dot-ratio) * (1 - var(--nc-i) / (var(--nc-n) + 1)) / -2);
    border-radius: 50%;
    background: var(--nc-color);
    opacity: calc(.7 * (1 - var(--nc-i) / (var(--nc-n) + 1)));
}

/* ── shadow tokens ── */
.navr-cursor[data-shadow="soft"]   { --nc-shadow: 0 2px 8px rgba(0,0,0,.18); }
.navr-cursor[data-shadow="medium"] { --nc-shadow: 0 4px 14px rgba(0,0,0,.28); }
.navr-cursor[data-shadow="strong"] { --nc-shadow: 0 8px 24px rgba(0,0,0,.42); }

/* ── families ── */
.navr-cursor[data-family="dot"] { --nc-dot-ratio: 1; }
.navr-cursor[data-family="dot"] .navr-cursor__ring { display: none; }

.navr-cursor[data-family="ring"] .navr-cursor__dot { display: none; }

.navr-cursor[data-family="dual"] .navr-cursor__ring2,
.navr-cursor[data-family="signature"] .navr-cursor__ring2 {
    display: block;
    border-color: var(--nc-accent);
    opacity: calc(var(--nc-border-opacity) * .45);
    transform: scale(calc(var(--nc-s) * 1.35));
}

.navr-cursor[data-family="spotlight"] { --nc-dot-ratio: .12; }
.navr-cursor[data-family="spotlight"] .navr-cursor__ring {
    border: 0;
    opacity: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--nc-color) 45%, transparent) 0%,
                                        color-mix(in srgb, var(--nc-color) 18%, transparent) 45%, transparent 72%);
    box-shadow: none;
    filter: blur(calc(var(--nc-glow) / 3));
    transform: scale(calc(var(--nc-s) * 2));
}

.navr-cursor[data-family="lens"] { --nc-dot-ratio: .3; }

.navr-cursor[data-family="crosshair"] { --nc-dot-ratio: .12; }
.navr-cursor[data-family="crosshair"] .navr-cursor__ring { border-radius: 0; border-color: transparent; }
.navr-cursor[data-family="crosshair"] .navr-cursor__ring::before,
.navr-cursor[data-family="crosshair"] .navr-cursor__ring::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--nc-color);
    box-shadow: 0 0 var(--nc-glow) var(--nc-color);
}
.navr-cursor[data-family="crosshair"] .navr-cursor__ring::before { width: 100%; height: var(--nc-border); transform: translate(-50%, -50%); }
.navr-cursor[data-family="crosshair"] .navr-cursor__ring::after  { width: var(--nc-border); height: 100%; transform: translate(-50%, -50%); }
.navr-cursor[data-family="crosshair"][data-preset="target"] .navr-cursor__ring { border-radius: 50%; border-color: var(--nc-color); }
.navr-cursor[data-family="crosshair"][data-preset="target"] .navr-cursor__ring::before,
.navr-cursor[data-family="crosshair"][data-preset="target"] .navr-cursor__ring::after { opacity: .7; }
.navr-cursor[data-family="crosshair"][data-preset="precision-cross"] .navr-cursor__ring::before { width: 160%; }
.navr-cursor[data-family="crosshair"][data-preset="precision-cross"] .navr-cursor__ring::after  { height: 160%; }

/* Arrow / hand: an SVG silhouette masked onto the dot, anchored at its tip (top-left) rather than centred. */
.navr-cursor[data-family="arrow"],
.navr-cursor[data-family="hand"] { --nc-dot-ratio: 1; }
.navr-cursor[data-family="arrow"] .navr-cursor__ring,
.navr-cursor[data-family="hand"] .navr-cursor__ring { opacity: 0; transform: scale(0); }
.navr-cursor[data-family="arrow"] .navr-cursor__dot,
.navr-cursor[data-family="hand"] .navr-cursor__dot {
    border-radius: 0;
    margin: 0;
    transform-origin: 0 0;
    background: var(--nc-color);
    box-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 0 var(--nc-glow) var(--nc-color));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 2 L4 20 L9 15.5 L12.5 22 L15.5 20.5 L12 14 L19 14 Z'/></svg>") no-repeat 0 0 / 100% 100%;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 2 L4 20 L9 15.5 L12.5 22 L15.5 20.5 L12 14 L19 14 Z'/></svg>") no-repeat 0 0 / 100% 100%;
}
.navr-cursor[data-family="hand"] .navr-cursor__dot {
    margin: calc(var(--nc-size) * -.3) 0 0 calc(var(--nc-size) * -.4);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 2.5a1.5 1.5 0 0 1 3 0V11h1V4.5a1.5 1.5 0 0 1 3 0V11h1V6.5a1.5 1.5 0 0 1 3 0V15c0 3.9-3.1 7-7 7h-1.2c-2 0-3.9-.9-5.2-2.5L3.6 15.6a1.4 1.4 0 0 1 2.1-1.8L8 16V9.5H9V2.5z'/></svg>") no-repeat 0 0 / 100% 100%;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 2.5a1.5 1.5 0 0 1 3 0V11h1V4.5a1.5 1.5 0 0 1 3 0V11h1V6.5a1.5 1.5 0 0 1 3 0V15c0 3.9-3.1 7-7 7h-1.2c-2 0-3.9-.9-5.2-2.5L3.6 15.6a1.4 1.4 0 0 1 2.1-1.8L8 16V9.5H9V2.5z'/></svg>") no-repeat 0 0 / 100% 100%;
}
.navr-cursor[data-family="hand"][data-state="grab"] .navr-cursor__dot,
.navr-cursor[data-family="hand"].is-pressed .navr-cursor__dot { transform: scale(calc(var(--nc-ds) * .85)) rotate(-8deg); }
.navr-cursor[data-family="arrow"][data-state="link"] .navr-cursor__dot,
.navr-cursor[data-family="arrow"][data-state="button"] .navr-cursor__dot { background: var(--nc-accent); }

.navr-cursor[data-family="trail"] { --nc-dot-ratio: 1; }
.navr-cursor[data-family="trail"] .navr-cursor__ring { display: none; }

.navr-cursor[data-family="orbit"] { --nc-dot-ratio: .18; }
.navr-cursor[data-family="orbit"] .navr-cursor__ring2 {
    display: block;
    border-color: transparent;
    opacity: 1;
    animation: navr-cursor-orbit calc(var(--nc-dur) * 4) linear infinite;
}
.navr-cursor[data-family="orbit"] .navr-cursor__ring2::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--nc-border) * -1 - 2px);
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--nc-accent);
    box-shadow: 0 0 6px var(--nc-accent);
}

.navr-cursor[data-family="morph"] .navr-cursor__ring { transition-duration: var(--nc-hover-dur); }
.navr-cursor[data-family="morph"][data-state="link"] .navr-cursor__ring,
.navr-cursor[data-family="morph"][data-state="button"] .navr-cursor__ring { border-radius: 28%; }
.navr-cursor[data-family="morph"][data-state="card"] .navr-cursor__ring { border-radius: 18%; }
.navr-cursor[data-family="morph"][data-state="image"] .navr-cursor__ring { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; animation: navr-cursor-blob calc(var(--nc-dur) * 6) ease-in-out infinite alternate; }

.navr-cursor[data-family="signature"] .navr-cursor__dot { background: var(--nc-accent); box-shadow: 0 0 var(--nc-glow) var(--nc-accent); }

/* ── square / diamond family ───────────────────────────────────────────────────────────────────────────────── */
.navr-cursor[data-family="square"] { --nc-dot-ratio: .2; }
.navr-cursor[data-family="square"] .navr-cursor__ring { border-radius: 4px; }
.navr-cursor[data-family="square"] .navr-cursor__dot { border-radius: 2px; }
.navr-cursor[data-family="square"][data-state="link"] .navr-cursor__ring,
.navr-cursor[data-family="square"][data-state="button"] .navr-cursor__ring { border-radius: 50%; }

/* Solid square / diamond pointers: no ring, the dot carries the shape. */
.navr-cursor[data-family="square"][data-preset="diamond-pointer"],
.navr-cursor[data-family="square"][data-preset="square-pointer"] { --nc-dot-ratio: 1; }
.navr-cursor[data-family="square"][data-preset="diamond-pointer"] .navr-cursor__ring,
.navr-cursor[data-family="square"][data-preset="square-pointer"] .navr-cursor__ring { display: none; }
.navr-cursor[data-family="square"][data-preset="diamond-pointer"] .navr-cursor__dot { rotate: 45deg; border-radius: 3px; }
.navr-cursor[data-family="square"][data-preset="square-pointer"] .navr-cursor__dot { border-radius: 3px; }

.navr-cursor[data-family="square"][data-preset="diamond-ring"] .navr-cursor__ring,
.navr-cursor[data-family="square"][data-preset="click-diamond"] .navr-cursor__ring { rotate: 45deg; border-radius: 3px; }
.navr-cursor[data-family="square"][data-preset="rounded-square"] .navr-cursor__ring { border-radius: 30%; }
.navr-cursor[data-family="square"][data-preset="rotating-square"] .navr-cursor__ring { animation: navr-cursor-spin calc(var(--nc-dur) * 8) linear infinite; }
.navr-cursor[data-family="square"][data-preset="rotating-diamond"] .navr-cursor__ring { rotate: 45deg; animation: navr-cursor-spin calc(var(--nc-dur) * 10) linear infinite; }

/* ── icon family (Icon Pointer) ────────────────────────────────────────────────────────────────────────────────
   The icon is ONE more child of the same layer: same fixed positioning, same pointer-events:none, same translate
   written by the same rAF loop (it rides p.icon exactly like p.dot). The wrapper handles centring/size; the inner
   <svg> handles scale, rotation and the idle animations so the hotspot never drifts. */
.navr-cursor__icon {
    display: none;
    width: var(--nc-icon-size);
    height: var(--nc-icon-size);
    margin: calc(var(--nc-icon-size) / -2) 0 0 calc(var(--nc-icon-size) / -2);
    color: var(--nc-icon-color);
    opacity: var(--nc-icon-opacity);
    transition: opacity var(--nc-dur) var(--nc-ease);
}

.navr-cursor[data-family="icon"] .navr-cursor__icon { display: block; }
/* In icon mode the icon is the primary visual: the ring/dot/ring2 step aside, states modify the icon itself. */
.navr-cursor[data-family="icon"] .navr-cursor__ring,
.navr-cursor[data-family="icon"] .navr-cursor__ring2,
.navr-cursor[data-family="icon"] .navr-cursor__dot { display: none; }

.navr-cursor__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: scale(var(--nc-i-s)) rotate(var(--nc-i-r));
    transform-origin: 50% 50%;
    filter: blur(var(--nc-icon-blur)) drop-shadow(0 0 var(--nc-icon-glow) currentColor);
    transition: transform var(--nc-hover-dur) var(--nc-ease), filter var(--nc-dur) var(--nc-ease);
}

.navr-cursor[data-icon-shadow="soft"] .navr-cursor__icon svg   { filter: blur(var(--nc-icon-blur)) drop-shadow(0 0 var(--nc-icon-glow) currentColor) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.navr-cursor[data-icon-shadow="medium"] .navr-cursor__icon svg { filter: blur(var(--nc-icon-blur)) drop-shadow(0 0 var(--nc-icon-glow) currentColor) drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.navr-cursor[data-icon-shadow="strong"] .navr-cursor__icon svg { filter: blur(var(--nc-icon-blur)) drop-shadow(0 0 var(--nc-icon-glow) currentColor) drop-shadow(0 6px 14px rgba(0,0,0,.5)); }

/* idle animations — every keyframe carries the state scale/rotation so hover and drag still apply */
.navr-cursor[data-icon-anim="float"] .navr-cursor__icon svg      { animation: navr-icon-float var(--nc-icon-anim-dur) ease-in-out infinite; }
.navr-cursor[data-icon-anim="pulse"] .navr-cursor__icon svg      { animation: navr-icon-pulse var(--nc-icon-anim-dur) ease-in-out infinite; }
.navr-cursor[data-icon-anim="bounce"] .navr-cursor__icon svg     { animation: navr-icon-bounce var(--nc-icon-anim-dur) cubic-bezier(.3,.7,.4,1) infinite; }
.navr-cursor[data-icon-anim="rotate"] .navr-cursor__icon svg     { animation: navr-icon-rotate var(--nc-icon-anim-dur) linear infinite; }
.navr-cursor[data-icon-anim="orbit"] .navr-cursor__icon svg      { animation: navr-icon-orbit var(--nc-icon-anim-dur) linear infinite; }
.navr-cursor[data-icon-anim="glow-pulse"] .navr-cursor__icon svg { animation: navr-icon-glow-pulse var(--nc-icon-anim-dur) ease-in-out infinite; }
.navr-cursor[data-icon-anim="spring"] .navr-cursor__icon svg     { animation: navr-icon-spring var(--nc-icon-anim-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.navr-cursor[data-icon-anim="magnetic"] .navr-cursor__icon svg   { animation: navr-icon-magnetic var(--nc-icon-anim-dur) ease-in-out infinite; }
.navr-cursor[data-icon-anim="ripple"] .navr-cursor__icon svg     { animation: navr-icon-ripple var(--nc-icon-anim-dur) ease-out infinite; }
.navr-cursor[data-icon-anim="hover-scale"] .navr-cursor__icon svg { animation: none; transition-duration: var(--nc-hover-dur); }
.navr-cursor[data-icon-anim="none"] .navr-cursor__icon svg       { animation: none; }

@keyframes navr-icon-float {
    0%, 100% { transform: translateY(0) scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
    50%      { transform: translateY(-3px) scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
}
@keyframes navr-icon-pulse {
    0%, 100% { transform: scale(calc(var(--nc-i-s) * .92)) rotate(var(--nc-i-r)); }
    50%      { transform: scale(calc(var(--nc-i-s) * 1.1)) rotate(var(--nc-i-r)); }
}
@keyframes navr-icon-bounce {
    0%, 100% { transform: translateY(0) scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
    40%      { transform: translateY(-6px) scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
    60%      { transform: translateY(-2px) scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
}
@keyframes navr-icon-rotate {
    from { transform: scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
    to   { transform: scale(var(--nc-i-s)) rotate(calc(var(--nc-i-r) + 360deg)); }
}
@keyframes navr-icon-orbit {
    from { transform: rotate(0deg) translateX(3px) rotate(0deg) scale(var(--nc-i-s)); }
    to   { transform: rotate(360deg) translateX(3px) rotate(-360deg) scale(var(--nc-i-s)); }
}
@keyframes navr-icon-glow-pulse {
    0%, 100% { transform: scale(var(--nc-i-s)) rotate(var(--nc-i-r)); filter: blur(var(--nc-icon-blur)) drop-shadow(0 0 var(--nc-icon-glow) currentColor); opacity: .85; }
    50%      { transform: scale(calc(var(--nc-i-s) * 1.05)) rotate(var(--nc-i-r)); filter: blur(var(--nc-icon-blur)) drop-shadow(0 0 calc(var(--nc-icon-glow) + 10px) currentColor); opacity: 1; }
}
@keyframes navr-icon-spring {
    0%, 100% { transform: scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
    30%      { transform: scale(calc(var(--nc-i-s) * 1.18)) rotate(var(--nc-i-r)); }
    55%      { transform: scale(calc(var(--nc-i-s) * .9)) rotate(var(--nc-i-r)); }
}
@keyframes navr-icon-magnetic {
    0%, 100% { transform: translate(0, 0) scale(var(--nc-i-s)) rotate(var(--nc-i-r)); }
    25%      { transform: translate(2px, -1px) scale(var(--nc-i-s)) rotate(calc(var(--nc-i-r) + 4deg)); }
    75%      { transform: translate(-2px, 1px) scale(var(--nc-i-s)) rotate(calc(var(--nc-i-r) - 4deg)); }
}
@keyframes navr-icon-ripple {
    0%   { transform: scale(calc(var(--nc-i-s) * .85)) rotate(var(--nc-i-r)); opacity: .6; }
    60%  { transform: scale(calc(var(--nc-i-s) * 1.12)) rotate(var(--nc-i-r)); opacity: 1; }
    100% { transform: scale(calc(var(--nc-i-s) * .85)) rotate(var(--nc-i-r)); opacity: .6; }
}

/* per-state icon modifiers — the icon stays the primary visual, the state only modifies it */
.navr-cursor[data-family="icon"][data-state="link"]       { --nc-i-s: var(--nc-icon-hover-scale); }
.navr-cursor[data-family="icon"][data-state="button"]     { --nc-i-s: calc(var(--nc-icon-hover-scale) * 1.06); --nc-i-r: -6deg; }
.navr-cursor[data-family="icon"][data-state="card"]       { --nc-i-s: calc(var(--nc-icon-hover-scale) * .92); }
.navr-cursor[data-family="icon"][data-state="image"]      { --nc-i-s: calc(var(--nc-icon-hover-scale) * 1.1); }
.navr-cursor[data-family="icon"][data-state="image-zoom"] { --nc-i-s: calc(var(--nc-icon-hover-scale) * 1.2); --nc-i-r: 8deg; }
.navr-cursor[data-family="icon"][data-state="drag"]       { --nc-i-s: calc(var(--nc-icon-hover-scale) * .95); }
.navr-cursor[data-family="icon"][data-state="grab"]       { --nc-i-s: calc(var(--nc-icon-hover-scale) * .85); }
.navr-cursor[data-family="icon"][data-icon-drag="rotate"][data-state="drag"] { --nc-i-r: -12deg; }
.navr-cursor[data-family="icon"][data-icon-drag="rotate"][data-state="grab"] { --nc-i-r: 12deg; }
.navr-cursor[data-family="icon"][data-state="link"] .navr-cursor__icon,
.navr-cursor[data-family="icon"][data-state="button"] .navr-cursor__icon { color: var(--nc-accent); }
.navr-cursor[data-family="icon"][data-state="disabled"] .navr-cursor__icon { opacity: calc(var(--nc-icon-opacity) * .4); }
.navr-cursor[data-family="icon"][data-state="native"] .navr-cursor__icon,
.navr-cursor[data-family="icon"].is-native .navr-cursor__icon { opacity: 0; }
.navr-cursor[data-family="icon"].is-pressed { --nc-i-s: calc(var(--nc-icon-hover-scale) * .82); }

/* ── states ── */
.navr-cursor[data-state="disabled"] { opacity: calc(var(--nc-opacity) * .35); }
.navr-cursor[data-state="disabled"] .navr-cursor__ring { border-style: dashed; }

/* hover animation family, applied on interactive states */
.navr-cursor[data-hover="grow"][data-state="link"],
.navr-cursor[data-hover="grow"][data-state="button"],
.navr-cursor[data-hover="grow"][data-state="card"] { --nc-s: 1.6; --nc-ds: .6; }
.navr-cursor[data-hover="shrink"][data-state="link"],
.navr-cursor[data-hover="shrink"][data-state="button"],
.navr-cursor[data-hover="shrink"][data-state="card"] { --nc-s: .6; --nc-ds: 1.6; }
.navr-cursor[data-hover="ring"][data-state="link"] .navr-cursor__ring,
.navr-cursor[data-hover="ring"][data-state="button"] .navr-cursor__ring,
.navr-cursor[data-hover="ring"][data-state="card"] .navr-cursor__ring { border-width: calc(var(--nc-border) + 2px); border-color: var(--nc-accent); }
.navr-cursor[data-hover="ring"][data-state="link"],
.navr-cursor[data-hover="ring"][data-state="button"],
.navr-cursor[data-hover="ring"][data-state="card"] { --nc-s: 1.3; }
.navr-cursor[data-hover="morph"][data-state="link"] .navr-cursor__ring,
.navr-cursor[data-hover="morph"][data-state="button"] .navr-cursor__ring { border-radius: 26%; }
.navr-cursor[data-hover="morph"][data-state="link"],
.navr-cursor[data-hover="morph"][data-state="button"],
.navr-cursor[data-hover="morph"][data-state="card"] { --nc-s: 1.45; --nc-ds: .7; }
.navr-cursor[data-hover="fill"][data-state="link"] .navr-cursor__ring,
.navr-cursor[data-hover="fill"][data-state="button"] .navr-cursor__ring,
.navr-cursor[data-hover="fill"][data-state="card"] .navr-cursor__ring { background: color-mix(in srgb, var(--nc-color) 28%, transparent); }
.navr-cursor[data-hover="fill"][data-state="link"],
.navr-cursor[data-hover="fill"][data-state="button"],
.navr-cursor[data-hover="fill"][data-state="card"] { --nc-s: 1.5; --nc-ds: 0; }
.navr-cursor[data-state="card"] { --nc-s: 1.25; }

/* button is a little stronger than link */
.navr-cursor[data-state="button"] .navr-cursor__ring { border-color: var(--nc-accent); }

/* drag / grab */
.navr-cursor[data-state="drag"],
.navr-cursor[data-state="grab"] { --nc-s: 1.7; --nc-ds: 0; }
.navr-cursor[data-state="drag"] .navr-cursor__ring,
.navr-cursor[data-state="grab"] .navr-cursor__ring { background: color-mix(in srgb, var(--nc-color) 16%, transparent); }
.navr-cursor[data-state="drag"] .navr-cursor__label,
.navr-cursor[data-state="grab"] .navr-cursor__label { display: block; opacity: 1; }
.navr-cursor[data-state="drag"] .navr-cursor__label::before { content: "\2194"; }
.navr-cursor[data-state="grab"] .navr-cursor__label::before { content: "\2726"; }
.navr-cursor[data-state="grab"] { --nc-s: 1.4; }

/* image / image-zoom: the lens (when the magnifier is on) or a larger ring with a zoom glyph */
.navr-cursor[data-state="image"],
.navr-cursor[data-state="image-zoom"] { --nc-s: 1.35; --nc-ds: .5; }
.navr-cursor.has-magnifier[data-state="image"] .navr-cursor__lens,
.navr-cursor.has-magnifier[data-state="image-zoom"] .navr-cursor__lens { display: block; opacity: 1; transform: scale(1); }
.navr-cursor.has-magnifier[data-state="image"] .navr-cursor__ring,
.navr-cursor.has-magnifier[data-state="image-zoom"] .navr-cursor__ring,
.navr-cursor.has-magnifier[data-state="image"] .navr-cursor__ring2,
.navr-cursor.has-magnifier[data-state="image-zoom"] .navr-cursor__ring2 { opacity: 0; transform: scale(.4); }
.navr-cursor.has-zoom[data-state="image-zoom"] .navr-cursor__label { display: block; opacity: 1; }
.navr-cursor.has-zoom[data-state="image-zoom"] .navr-cursor__label::before { content: "+"; font-size: 16px; }
.navr-cursor.has-zoom[data-state="image-zoom"] .navr-cursor__dot { opacity: 0; }

/* lens styles */
.navr-cursor[data-lens="glass"] .navr-cursor__lens {
    background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 55%, rgba(255,255,255,.14));
    -webkit-backdrop-filter: blur(var(--nc-lens-blur)) saturate(1.25) contrast(1.05);
            backdrop-filter: blur(var(--nc-lens-blur)) saturate(1.25) contrast(1.05);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.22), var(--nc-shadow);
}
.navr-cursor[data-lens="ring"] .navr-cursor__lens { border-width: calc(var(--nc-lens-border) + 1px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nc-accent) 18%, transparent); }
.navr-cursor[data-lens="spotlight"] .navr-cursor__lens {
    border: 0;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 55%, transparent 72%);
    -webkit-backdrop-filter: brightness(1.15);
            backdrop-filter: brightness(1.15);
}
.navr-cursor[data-lens="crosshair"] .navr-cursor__lens::before,
.navr-cursor[data-lens="crosshair"] .navr-cursor__lens::after,
.navr-cursor[data-lens="plus"] .navr-cursor__lens::before,
.navr-cursor[data-lens="plus"] .navr-cursor__lens::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--nc-accent);
    transform: translate(-50%, -50%);
}
.navr-cursor[data-lens="crosshair"] .navr-cursor__lens::before { width: 100%; height: 1px; }
.navr-cursor[data-lens="crosshair"] .navr-cursor__lens::after  { width: 1px; height: 100%; }
.navr-cursor[data-lens="plus"] .navr-cursor__lens::before { width: 34%; height: 2px; }
.navr-cursor[data-lens="plus"] .navr-cursor__lens::after  { width: 2px; height: 34%; }

/* image hover animation on lens entrance */
.navr-cursor[data-img-anim="glow"] .navr-cursor__lens { box-shadow: 0 0 calc(var(--nc-glow) + 14px) color-mix(in srgb, var(--nc-accent) 55%, transparent), inset 0 0 0 1px rgba(255,255,255,.35); }
.navr-cursor[data-img-anim="morph"].has-magnifier[data-state="image"] .navr-cursor__lens,
.navr-cursor[data-img-anim="morph"].has-magnifier[data-state="image-zoom"] .navr-cursor__lens { animation: navr-cursor-blob calc(var(--nc-dur) * 6) ease-in-out infinite alternate; }
.navr-cursor[data-img-anim="none"] .navr-cursor__lens { transition: none; transform: scale(1); }

/* pressed */
.navr-cursor.is-pressed { --nc-ds: .8; }
.navr-cursor.is-pressed .navr-cursor__ring { transform: scale(calc(var(--nc-s) * .85)); }

/* ── click animations (one-shot on .navr-cursor__click) ── */
.navr-cursor__click.is-playing { display: block; }
.navr-cursor[data-click="ripple"] .navr-cursor__click.is-playing { animation: navr-cursor-ripple var(--nc-click-dur) ease-out forwards; }
.navr-cursor[data-click="pulse"]  .navr-cursor__click.is-playing { animation: navr-cursor-pulse var(--nc-click-dur) ease-out forwards; background: color-mix(in srgb, var(--nc-accent) 35%, transparent); border: 0; }
.navr-cursor[data-click="expand"] .navr-cursor__click.is-playing { animation: navr-cursor-expand var(--nc-click-dur) cubic-bezier(.2,.8,.2,1) forwards; }
.navr-cursor[data-click="ring"]   .navr-cursor__click.is-playing { animation: navr-cursor-ring var(--nc-click-dur) ease-out forwards; border-width: 3px; }
.navr-cursor[data-click="none"]   .navr-cursor__click { display: none !important; }

@keyframes navr-cursor-ripple {
    0%   { transform: scale(.4); opacity: .9; }
    100% { transform: scale(2.6); opacity: 0; }
}
@keyframes navr-cursor-pulse {
    0%   { transform: scale(.6); opacity: .8; }
    50%  { transform: scale(1.15); opacity: .5; }
    100% { transform: scale(1.4); opacity: 0; }
}
@keyframes navr-cursor-expand {
    0%   { transform: scale(1); opacity: .8; border-width: 6px; }
    100% { transform: scale(3.2); opacity: 0; border-width: 0; }
}
@keyframes navr-cursor-ring {
    0%   { transform: scale(.8); opacity: 1; }
    100% { transform: scale(1.9); opacity: 0; }
}
@keyframes navr-cursor-orbit {
    from { transform: scale(calc(var(--nc-s) * 1.3)) rotate(0deg); }
    to   { transform: scale(calc(var(--nc-s) * 1.3)) rotate(360deg); }
}
@keyframes navr-cursor-spin {
    from { transform: scale(var(--nc-s)) rotate(0deg); }
    to   { transform: scale(var(--nc-s)) rotate(360deg); }
}
@keyframes navr-cursor-blob {
    0%   { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
    100% { border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }
}

/* ── animation style tokens ── */
.navr-cursor[data-anim="snappy"] { --nc-hover-dur: calc(var(--nc-dur) * .5); }
.navr-cursor[data-anim="elastic"] .navr-cursor__ring,
.navr-cursor[data-anim="elastic"] .navr-cursor__ring2,
.navr-cursor[data-anim="elastic"] .navr-cursor__lens { transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
.navr-cursor[data-anim="none"] *,
.navr-cursor.is-static,
.navr-cursor.is-static * { transition: none !important; animation: none !important; }

/* ── reduced motion kill-switch (the engine also honours this before mounting) ── */
@media (prefers-reduced-motion: reduce) {
    .navr-cursor,
    .navr-cursor * { transition: none !important; animation: none !important; }
}