/* ================================
   FX Cursor Toggle Wrapper
================================ */
.fx-cursor-toggle-wrap {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}

.fx-cursor-toggle-wrap > .fx-cursor-toggle {
    pointer-events: auto;
}

.fx-cursor-toggle-wrap--bottom_right {
    right: 16px;
    bottom: 16px;
}

.fx-cursor-toggle-wrap--bottom_left {
    left: 16px;
    bottom: 16px;
}

/* ================================
   FX Cursor Toggle Button
================================ */
.fx-cursor-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.78);
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fx-cursor-toggle:hover {
    transform: scale(1.08);
}

.fx-cursor-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.fx-cursor-toggle:active {
    transform: scale(0.95);
}

.fx-cursor-toggle[aria-pressed="false"] {
    opacity: 0.62;
}

.fx-cursor-toggle__icon {
    display: block;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ================================
   Toggle Style Variants
================================ */
.fx-cursor-toggle--minimal {
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    border: 0;
}

.fx-cursor-toggle--minimal:hover {
    background: rgba(0, 0, 0, 0.9);
}

.fx-cursor-toggle--outline {
    background: rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

.fx-cursor-toggle--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

.fx-cursor-toggle--filled {
    background: #000000;
    color: #ffffff;
    border: 0;
}

.fx-cursor-toggle--filled:hover {
    background: #161616;
}

/* ================================
   Shared Runtime Nodes
================================ */
.fx-cursor-effect,
.fx-click-effect {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 999998;
    box-sizing: border-box;
    will-change: transform, opacity, width, height, scale, translate;
}

.fx-cursor-runtime--contained .fx-cursor-effect,
.fx-cursor-runtime--contained .fx-click-effect {
    position: absolute;
}

.fx-cursor-disabled .fx-cursor-effect,
.fx-cursor-disabled .fx-click-effect {
    opacity: 0 !important;
}

/* ================================
   Cursor Effects
================================ */
.fx-cursor--glow-dot {
    border-radius: 999px;
    background: var(--fx-cursor-color, #ffffff);
    box-shadow:
        0 0 14px var(--fx-cursor-color, #ffffff),
        0 0 34px var(--fx-cursor-color, #ffffff);
}

.fx-cursor--ring {
    border: 2px solid var(--fx-cursor-color, #ffffff);
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

.fx-cursor--dual-ring-inner,
.fx-cursor--dual-ring-outer {
    border: 2px solid var(--fx-cursor-color, #ffffff);
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 0 14px color-mix(in srgb, var(--fx-cursor-color, #ffffff) 35%, transparent);
}

.fx-cursor--dual-ring-inner {
    opacity: 0.95;
}

.fx-cursor--dual-ring-outer {
    opacity: 0.65;
}

.fx-cursor--trail {
    border-radius: 999px;
    background: var(--fx-cursor-color, #ffffff);
    box-shadow: 0 0 12px var(--fx-cursor-color, #ffffff);
}

.fx-cursor--spotlight {
    border-radius: 999px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--fx-cursor-color, #ffffff) 38%, transparent) 0%,
        color-mix(in srgb, var(--fx-cursor-color, #ffffff) 15%, transparent) 34%,
        transparent 72%
    );
    mix-blend-mode: screen;
}

.fx-cursor--crosshair {
    background: transparent;
}

.fx-cursor--crosshair::before,
.fx-cursor--crosshair::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--fx-cursor-color, #ffffff);
    box-shadow: 0 0 10px var(--fx-cursor-color, #ffffff);
    transform: translate(-50%, -50%);
}

.fx-cursor--crosshair::before {
    width: 100%;
    height: 2px;
}

.fx-cursor--crosshair::after {
    width: 2px;
    height: 100%;
}

.fx-cursor--comet-halo {
    border-radius: 999px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--fx-cursor-color, #ffffff) 30%, transparent) 0%,
        color-mix(in srgb, var(--fx-cursor-color, #ffffff) 12%, transparent) 45%,
        transparent 72%
    );
    box-shadow: 0 0 18px color-mix(in srgb, var(--fx-cursor-color, #ffffff) 45%, transparent);
}

.fx-cursor--comet-core {
    border-radius: 999px;
    background: var(--fx-cursor-color, #ffffff);
    box-shadow:
        0 0 10px var(--fx-cursor-color, #ffffff),
        10px 0 14px color-mix(in srgb, var(--fx-cursor-color, #ffffff) 32%, transparent),
        -8px 0 12px color-mix(in srgb, var(--fx-cursor-color, #ffffff) 24%, transparent);
}

.fx-cursor--magnetic-blob {
    border-radius: 42% 58% 56% 44%;
    background: color-mix(in srgb, var(--fx-cursor-color, #ffffff) 78%, transparent);
    box-shadow:
        inset -8px -6px 14px rgba(0, 0, 0, 0.16),
        0 0 22px var(--fx-cursor-color, #ffffff);
    transition: border-radius 0.18s ease;
}

.fx-cursor--neon-orbit {
    border-radius: 999px;
    background: var(--fx-cursor-color, #ffffff);
    box-shadow:
        0 0 10px var(--fx-cursor-color, #ffffff),
        0 0 24px var(--fx-cursor-color, #ffffff);
}

.fx-cursor--neon-orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--fx-cursor-color, #ffffff);
    box-shadow: 0 0 12px var(--fx-cursor-color, #ffffff);
    transform-origin: -12px -12px;
    animation: fx-cursor-orbit 0.95s linear infinite;
}

.fx-cursor--pixel-square {
    background: var(--fx-cursor-color, #ffffff);
    border-radius: 0;
    image-rendering: pixelated;
    box-shadow:
        8px 0 0 color-mix(in srgb, var(--fx-cursor-color, #ffffff) 45%, transparent),
        0 8px 0 color-mix(in srgb, var(--fx-cursor-color, #ffffff) 30%, transparent);
}

/* ================================
   Click Effects
================================ */
.fx-click--ripple {
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-click-color, #ffffff) 38%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--fx-click-color, #ffffff) 60%, transparent);
    animation: fx-click-scale-fade 0.56s ease-out forwards;
}

.fx-click--pulse-ring {
    border: 3px solid var(--fx-click-color, #ffffff);
    border-radius: 999px;
    background: transparent;
    animation: fx-click-scale-fade 0.58s ease-out forwards;
}

.fx-click--shockwave {
    border: 1px solid var(--fx-click-color, #ffffff);
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 0 14px color-mix(in srgb, var(--fx-click-color, #ffffff) 50%, transparent);
    animation: fx-click-fast-wave 0.42s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

.fx-click--halo {
    border-radius: 999px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--fx-click-color, #ffffff) 48%, transparent) 0%,
        color-mix(in srgb, var(--fx-click-color, #ffffff) 18%, transparent) 42%,
        transparent 75%
    );
    filter: blur(2px);
    animation: fx-click-halo 0.68s ease-out forwards;
}

.fx-click--ping {
    background: var(--fx-click-color, #ffffff);
    border-radius: 2px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--fx-click-color, #ffffff) 65%, transparent);
    animation: fx-click-ping-mark 0.62s ease-out forwards;
}

.fx-click--ping-outer {
    width: 4px !important;
    border-radius: 999px;
}

.fx-click--ping-inner {
    height: 4px !important;
    border-radius: 999px;
}

.fx-click--particle,
.fx-click--burst-piece,
.fx-click--sparkle-piece,
.fx-click--confetti-piece,
.fx-click--splash-drop,
.fx-click--pixel-piece {
    background: var(--fx-click-color, #ffffff);
    box-shadow: 0 0 10px color-mix(in srgb, var(--fx-click-color, #ffffff) 70%, transparent);
}

.fx-click--burst-piece {
    border-radius: 999px;
    animation: fx-click-particle-out 0.56s ease-out forwards;
}

.fx-click--sparkle-piece {
    border-radius: 0;
    clip-path: polygon(50% 0%, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0% 50%, 38% 36%);
    animation: fx-click-sparkle 0.68s ease-out forwards;
}

.fx-click--confetti-piece {
    border-radius: 1px;
    animation: fx-click-confetti 0.82s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

.fx-click--splash-drop {
    border-radius: 63% 37% 54% 46%;
    animation: fx-click-splash 0.66s ease-out forwards;
}

.fx-click--pixel-piece {
    border-radius: 0;
    image-rendering: pixelated;
    animation: fx-click-pixel-pop 0.58s steps(5, end) forwards;
}

/* ================================
   Animations
================================ */
@keyframes fx-cursor-orbit {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes fx-click-scale-fade {
    0% {
        opacity: 0.85;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(0.35);
    }

    58% {
        opacity: 0.42;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(2.7);
    }
}

@keyframes fx-click-fast-wave {
    0% {
        opacity: 0.95;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(0.25);
    }

    72% {
        opacity: 0.38;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(3.2);
    }
}

@keyframes fx-click-halo {
    0% {
        opacity: 0.72;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(0.2);
    }

    45% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(1.9);
    }
}

@keyframes fx-click-ping-mark {
    0% {
        opacity: 0.95;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(0.45);
    }

    52% {
        opacity: 0.78;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(1.4);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(2.1);
    }
}

@keyframes fx-click-particle-out {
    0% {
        opacity: 0.95;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(0.9);
    }

    64% {
        opacity: 0.72;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-x, 0), var(--fx-click-y, 0)) scale(0.15);
    }
}

@keyframes fx-click-sparkle {
    0% {
        opacity: 1;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) rotate(0deg) scale(0.35);
    }

    55% {
        opacity: 0.9;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-mid-x, 0), var(--fx-click-mid-y, 0)) rotate(70deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-x, 0), var(--fx-click-y, 0)) rotate(var(--fx-click-rotate, 120deg)) scale(0.05);
    }
}

@keyframes fx-click-confetti {
    0% {
        opacity: 1;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) rotate(0deg) scale(0.8);
    }

    42% {
        opacity: 0.95;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-mid-x, 0), var(--fx-click-y, 0)) rotate(95deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-x, 0), var(--fx-click-fall, 72px)) rotate(var(--fx-click-rotate, 220deg)) scale(0.9);
    }
}

@keyframes fx-click-splash {
    0% {
        opacity: 0.95;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(0.2);
    }

    42% {
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-mid-x, 0), var(--fx-click-mid-y, 0)) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-x, 0), var(--fx-click-y, 0)) scale(0.45);
    }
}

@keyframes fx-click-pixel-pop {
    0% {
        opacity: 1;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--fx-click-left, 0px), var(--fx-click-top, 0px), 0) translate(-50%, -50%) translate(var(--fx-click-x, 0), var(--fx-click-y, 0)) scale(0);
    }
}

/* ================================
   Accessibility / Reduced Motion
================================ */
@media (prefers-reduced-motion: reduce) {
    .fx-cursor-toggle,
    .fx-cursor-effect,
    .fx-click-effect {
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .fx-cursor-toggle:hover,
    .fx-cursor-toggle:active {
        transform: none !important;
    }
}