/**
 * Page Designer — Motion & FX: Magnetic Cursor runtime CSS  (pd-mfx-rt-cur-*)
 *
 * Loaded inside the canvas iframe and on public pages. Renders the dot,
 * magnetic ring, trail segments, and custom shape. All positioning via
 * `position: fixed` + transforms applied per-frame by the runtime.
 *
 * Dedicated namespace. No shared selectors. Single-class rules sit at
 * (0,0,1,0) — host page CSS doesn't normally select pd-mfx-rt-cur-* so
 * a single class is sufficient.
 *
 * Native cursor suppression happens via pd_mfx_runtime.css (the bedrock).
 */

.pd-mfx-rt-cur-root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2147483646;  /* one below the absolute ceiling — modals can sit above */
    --pd-mfx-rt-cur-size: 14px;
    --pd-mfx-rt-cur-color: #635bff;
    --pd-mfx-rt-cur-blend: normal;
    mix-blend-mode: var(--pd-mfx-rt-cur-blend);
    contain: layout style;
}

.pd-mfx-rt-cur-dot,
.pd-mfx-rt-cur-ring,
.pd-mfx-rt-cur-trail-seg,
.pd-mfx-rt-cur-shape {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform, opacity, width, height;
    transform: translate3d(-100px, -100px, 0);
}

/* ── Dot (used by all modes except "custom" which restyles it) ─────── */
.pd-mfx-rt-cur-dot {
    width: var(--pd-mfx-rt-cur-size);
    height: var(--pd-mfx-rt-cur-size);
    border-radius: 50%;
    background: var(--pd-mfx-rt-cur-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--pd-mfx-rt-cur-color) 55%, transparent);
    transition: width 0.18s ease, height 0.18s ease, background-color 0.18s ease;
}

.pd-mfx-rt-cur-mode-magnetic .pd-mfx-rt-cur-dot {
    width: calc(var(--pd-mfx-rt-cur-size) * 0.45);
    height: calc(var(--pd-mfx-rt-cur-size) * 0.45);
    border-radius: 50%;
    background: var(--pd-mfx-rt-cur-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--pd-mfx-rt-cur-color) 55%, transparent);
}

/* ── Magnetic ring ─────────────────────────────────────────────────── */
.pd-mfx-rt-cur-ring {
    width: calc(var(--pd-mfx-rt-cur-size) * 2.4);
    height: calc(var(--pd-mfx-rt-cur-size) * 2.4);
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--pd-mfx-rt-cur-color) 75%, transparent);
    background: color-mix(in srgb, var(--pd-mfx-rt-cur-color) 6%, transparent);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pd-mfx-rt-cur-root.pd-mfx-rt-cur-hot .pd-mfx-rt-cur-ring {
    border-color: var(--pd-mfx-rt-cur-color);
    background: color-mix(in srgb, var(--pd-mfx-rt-cur-color) 14%, transparent);
}

.pd-mfx-rt-cur-root.pd-mfx-rt-cur-hot .pd-mfx-rt-cur-dot {
    background: color-mix(in srgb, var(--pd-mfx-rt-cur-color) 80%, #fff);
}

/* ── Trail segments ────────────────────────────────────────────────── */
.pd-mfx-rt-cur-trail-seg {
    border-radius: 50%;
    background: var(--pd-mfx-rt-cur-color);
    /* Width/height set per-segment by the runtime to taper the trail. */
}

/* ── Custom shape (mode = custom) ──────────────────────────────────── */
.pd-mfx-rt-cur-mode-custom .pd-mfx-rt-cur-dot {
    width: var(--pd-mfx-rt-cur-size);
    height: var(--pd-mfx-rt-cur-size);
    background: var(--pd-mfx-rt-cur-color);
    border-radius: 4px;
    transform-origin: center;
}

.pd-mfx-rt-cur-mode-custom.pd-mfx-rt-cur-hot .pd-mfx-rt-cur-dot {
    background: color-mix(in srgb, var(--pd-mfx-rt-cur-color) 85%, #fff);
}

/* ── Safety: never paint when user prefers reduced motion or on touch.
       The runtime already skips mount, but if anything leaks through this
       CSS hides it. */
@media (prefers-reduced-motion: reduce), (hover: none) {
    .pd-mfx-rt-cur-root {
        display: none;
    }
}