/* =====================================================
   DIGITALEX SOLUTIONS
   SPIDER-MAN RETRO COMIC CURSOR — REFINED EDITION
   ===================================================== */

:root {
    --dx-cursor-cream: #F5E8D2;
    --dx-cursor-ink: #29231F;
    --dx-cursor-orange: #C85B36;
    --dx-cursor-web-line: rgba(41, 35, 31, 0.88);
}

/* Only enable the custom cursor for mouse-like pointers */
@media (hover: hover) and (pointer: fine) {

    body.dx-comic-cursor-enabled {
        cursor: none;
    }

    body.dx-comic-cursor-enabled a,
    body.dx-comic-cursor-enabled button,
    body.dx-comic-cursor-enabled [role="button"],
    body.dx-comic-cursor-enabled [data-cursor="web"],
    body.dx-comic-cursor-enabled input[type="button"],
    body.dx-comic-cursor-enabled input[type="submit"],
    body.dx-comic-cursor-enabled select {
        cursor: none;
    }

    /* Keep native text-editing behaviour */
    body.dx-comic-cursor-enabled input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body.dx-comic-cursor-enabled textarea,
    body.dx-comic-cursor-enabled [contenteditable="true"] {
        cursor: text;
    }

    /* Main cursor wrapper */
    #dx-retro-cursor {
        position: fixed;
        inset: 0 auto auto 0;
        width: 44px;
        height: 44px;
        z-index: 2147483647;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(-100px, -100px, 0);
        transform-origin: center;
        will-change: transform, opacity;
        transition:
            opacity 160ms ease,
            visibility 160ms ease;
    }

    #dx-retro-cursor.dx-cursor-visible {
        opacity: 1;
        visibility: visible;
    }

    .dx-cursor-art {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        transform-origin: center;
        transition: transform 200ms cubic-bezier(.2, .75, .25, 1);
    }

    /* Default comic pointer */
    .dx-cursor-pointer,
    .dx-cursor-accent {
        transform-origin: center;
        transition:
            opacity 180ms ease,
            transform 220ms cubic-bezier(.2, .75, .25, 1);
    }

    /* Web target */
    .dx-cursor-web {
        opacity: 0;
        transform: scale(.45) rotate(-15deg);
        transform-origin: 24px 24px;
        transition:
            opacity 160ms ease,
            transform 260ms cubic-bezier(.16, 1, .3, 1);
    }

    .dx-cursor-web circle,
    .dx-cursor-web path {
        vector-effect: non-scaling-stroke;
    }

    /* Keep the comic burst hidden until click */
    .dx-cursor-burst {
        opacity: 0;
        transform: scale(.4);
        transform-origin: 24px 24px;
    }

    /* Interactive hover: links, buttons, cards */
    #dx-retro-cursor.dx-cursor-hover .dx-cursor-pointer,
    #dx-retro-cursor.dx-cursor-hover .dx-cursor-accent {
        opacity: 0;
        transform: scale(.7);
    }

    #dx-retro-cursor.dx-cursor-hover .dx-cursor-web {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    #dx-retro-cursor.dx-cursor-hover .dx-cursor-art {
        transform: scale(1.08);
    }

    /* A tiny emphasis when the target is a portfolio card */
    #dx-retro-cursor.dx-cursor-card .dx-cursor-art {
        transform: scale(1.16);
    }

    #dx-retro-cursor.dx-cursor-card .dx-cursor-web {
        opacity: 1;
        transform: scale(1.08);
    }

    /* Click state: web pop and comic burst */
    #dx-retro-cursor.dx-cursor-click .dx-cursor-web {
        animation: dx-web-ripple 420ms cubic-bezier(.16, 1, .3, 1);
    }

    #dx-retro-cursor.dx-cursor-click .dx-cursor-burst {
        animation: dx-comic-impact 420ms ease-out;
    }

    /* Separate ripple around the click point */
    .dx-web-ripple {
        position: fixed;
        width: 36px;
        height: 36px;
        left: 0;
        top: 0;
        border: 1.5px solid var(--dx-cursor-ink);
        border-radius: 50%;
        pointer-events: none;
        z-index: 2147483646;
        transform: translate(-50%, -50%) scale(.35);
        opacity: .9;
        background:
            linear-gradient(
                0deg,
                transparent 48.5%,
                var(--dx-cursor-web-line) 49.5%,
                var(--dx-cursor-web-line) 50.5%,
                transparent 51.5%
            ),
            linear-gradient(
                90deg,
                transparent 48.5%,
                var(--dx-cursor-web-line) 49.5%,
                var(--dx-cursor-web-line) 50.5%,
                transparent 51.5%
            );
        animation: dx-web-ring-expand 520ms cubic-bezier(.16, 1, .3, 1) forwards;
        will-change: transform, opacity;
    }

    /* Fine web strands */
    .dx-web-ripple::before,
    .dx-web-ripple::after {
        content: "";
        position: absolute;
        inset: 5px;
        border: 1px solid var(--dx-cursor-web-line);
        border-radius: 50%;
        transform: rotate(45deg) scale(.65);
    }

    .dx-web-ripple::after {
        transform: rotate(-45deg) scale(.65);
    }

    /* Comic particles */
    .dx-comic-particle {
        position: fixed;
        left: 0;
        top: 0;
        width: 6px;
        height: 6px;
        border: 1.5px solid var(--dx-cursor-ink);
        background: var(--dx-cursor-orange);
        pointer-events: none;
        z-index: 2147483646;
        animation: dx-particle-fly 460ms cubic-bezier(.2, .7, .25, 1) forwards;
        will-change: transform, opacity;
    }

    .dx-comic-particle:nth-child(even) {
        background: var(--dx-cursor-cream);
        border-radius: 50%;
    }

    .dx-comic-particle:nth-child(3n) {
        width: 4px;
        height: 4px;
        transform: rotate(45deg);
    }

    /* Animations */
    @keyframes dx-web-ripple {
        0% {
            transform: scale(.78);
        }
        55% {
            transform: scale(1.18);
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes dx-comic-impact {
        0% {
            opacity: 0;
            transform: scale(.35) rotate(-12deg);
        }
        25% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale(1.45) rotate(8deg);
        }
    }

    @keyframes dx-web-ring-expand {
        0% {
            opacity: .9;
            transform: translate(-50%, -50%) scale(.35) rotate(0deg);
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(2.2) rotate(35deg);
        }
    }

    @keyframes dx-particle-fly {
        from {
            opacity: 1;
            transform:
                translate3d(0, 0, 0)
                scale(1)
                rotate(0deg);
        }
        to {
            opacity: 0;
            transform:
                translate3d(var(--dx-particle-x), var(--dx-particle-y), 0)
                scale(.2)
                rotate(100deg);
        }
    }
}

/* Touch devices retain the browser's normal cursor behaviour */
@media (hover: none), (pointer: coarse) {
    #dx-retro-cursor,
    #dx-cursor-effects {
        display: none !important;
    }

    body.dx-comic-cursor-enabled,
    body.dx-comic-cursor-enabled * {
        cursor: auto;
    }
}

/* Reduced motion: no continuous or decorative cursor animation */
@media (prefers-reduced-motion: reduce) {
    #dx-retro-cursor,
    #dx-retro-cursor *,
    .dx-web-ripple,
    .dx-comic-particle {
        animation: none !important;
        transition: none !important;
    }

    .dx-web-ripple,
    .dx-comic-particle {
        display: none !important;
    }
}