/* =====================================================
   DIGITALEX SOLUTIONS
   SPIDER-MAN RETRO COMIC CURSOR — FINAL 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);
}

/* =====================================================
   DESKTOP POINTER DEVICES
   ===================================================== */

@media (hover: hover) and (pointer: fine) {

    /* Hide the native pointer throughout the page.
       The custom cursor becomes the visible pointer. */
    body.dx-comic-cursor-enabled,
    body.dx-comic-cursor-enabled * {
        cursor: none !important;
    }

    /* Preserve the text insertion cursor in editable fields */
    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 !important;
    }

    /* Main custom cursor */
    #dx-retro-cursor {
        position: fixed;
        top: 0;
        left: 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;
    }

    /* SVG artwork */
    #dx-retro-cursor .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-retro-cursor .dx-cursor-pointer,
    #dx-retro-cursor .dx-cursor-accent {
        transform-origin: center;
        transition:
            opacity 180ms ease,
            transform 220ms cubic-bezier(.2, .75, .25, 1);
    }

    /* =================================================
       SPIDER-WEB TARGET
       Light and dark section contrast
       ================================================= */

    #dx-retro-cursor .dx-cursor-web {
        opacity: 0;
        transform: scale(.45) rotate(-15deg);
        transform-origin: 24px 24px;
        color: var(--dx-cursor-ink);
        filter:
            drop-shadow(0 0 1px var(--dx-cursor-cream))
            drop-shadow(0 0 2px var(--dx-cursor-ink));
        transition:
            opacity 160ms ease,
            transform 260ms cubic-bezier(.16, 1, .3, 1),
            filter 180ms ease;
    }

    #dx-retro-cursor .dx-cursor-web circle,
    #dx-retro-cursor .dx-cursor-web path {
        stroke: var(--dx-cursor-ink);
        stroke-width: 1.7px;
        vector-effect: non-scaling-stroke;
    }

    #dx-retro-cursor .dx-cursor-web circle:last-of-type {
        stroke: var(--dx-cursor-orange);
        stroke-width: 2px;
    }

    /* Keep the web highly visible on interactive areas */
    #dx-retro-cursor.dx-cursor-hover .dx-cursor-web,
    #dx-retro-cursor.dx-cursor-card .dx-cursor-web {
        opacity: 1;
        filter:
            drop-shadow(0 0 2px var(--dx-cursor-cream))
            drop-shadow(0 0 3px var(--dx-cursor-orange));
    }

    /* Hover transition: pointer becomes web */
    #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 {
        transform: scale(1) rotate(0deg);
    }

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

    /* Portfolio-card emphasis */
    #dx-retro-cursor.dx-cursor-card .dx-cursor-art {
        transform: scale(1.16);
    }

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

    /* Click animation */
    #dx-retro-cursor .dx-cursor-burst {
        opacity: 0;
        transform: scale(.4);
        transform-origin: 24px 24px;
    }

    #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;
    }

    /* =================================================
       WEB RIPPLE AT THE CLICK LOCATION
       ================================================= */

    .dx-web-ripple {
        position: fixed;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        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;
    }

    .dx-web-ripple::before,
    .dx-web-ripple::after {
        content: "";
        position: absolute;
        inset: 5px;
        border: 1px solid var(--dx-cursor-web-line);
        border-radius: 50%;
    }

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

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

    /* =================================================
       COMIC PARTICLES
       ================================================= */

    .dx-comic-particle {
        position: fixed;
        top: 0;
        left: 0;
        width: 6px;
        height: 6px;
        box-sizing: border-box;
        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;
    }

    /* =================================================
       KEYFRAMES
       ================================================= */

    @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
   ===================================================== */

@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 !important;
    }
}

/* =====================================================
   ACCESSIBILITY: REDUCED MOTION
   ===================================================== */

@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;
    }
}


/* Tawk.to iframe: keep the widget's native cursor usable */
body.dx-comic-cursor-enabled iframe[title*="chat"],
body.dx-comic-cursor-enabled iframe[title*="Chat"],
body.dx-comic-cursor-enabled iframe[title*="Tawk"],
body.dx-comic-cursor-enabled iframe[title*="chat widget"] {
    cursor: auto !important;
}