/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* Mouse Pointer Follow Animation Styles */
/* ONLY apply cursor styles on devices with a mouse (not touch devices like smartphones) */
@media only screen and (max-width: 600px)
/*(hover: hover) and (pointer: fine) */
    {

    /* Hide default cursor */
    body,
    a,
    button,
    input,
    textarea,
    select,
    label,
    [role="button"] {
        cursor: none !important;
    }

    /* Neural Network Cursor Container */
    .neural-network-cursor {
        position: fixed;
        pointer-events: none;
        z-index: 999999;
        transition: opacity 0.5s ease;
    }

    /* SVG for connection lines */
    .network-connections {
        position: fixed;
        width: 200px;
        height: 200px;
        pointer-events: none;
        z-index: 999998;
    }

    /* Connection lines */
    .connection-line {
        stroke: rgba(1, 255, 255, 0.3);
        stroke-width: 1;
        fill: none;
        transition: stroke 0.5s ease, stroke-width 0.5s ease;
    }

    /* Network nodes */
    .network-node {
        position: fixed;
        width: 6px;
        height: 6px;
        background: rgba(1, 255, 255, 0.9);
        border-radius: 50%;
        pointer-events: none;
        z-index: 999999;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 8px rgba(1, 255, 255, 0.6),
            0 0 12px rgba(1, 255, 255, 0.3);
        transition: background 0.5s ease, box-shadow 0.5s ease;
    }

    /* Central node - larger and more prominent */
    .network-node.central {
        width: 10px;
        height: 10px;
        background: rgba(2, 255, 137, 1);
        box-shadow: 0 0 15px rgba(2, 255, 137, 0.8),
            0 0 25px rgba(2, 255, 137, 0.4);
    }

    /* Hover state - expand network */
    .neural-network-cursor.hover .network-node {
        background: rgba(2, 255, 137, 1);
        box-shadow: 0 0 12px rgba(2, 255, 137, 0.8),
            0 0 18px rgba(2, 255, 137, 0.4);
        width: 8px;
        height: 8px;
    }

    .neural-network-cursor.hover .network-node.central {
        width: 12px;
        height: 12px;
        box-shadow: 0 0 20px rgba(2, 255, 137, 1),
            0 0 30px rgba(2, 255, 137, 0.6);
    }

    .neural-network-cursor.hover .connection-line {
        stroke: rgba(2, 255, 137, 0.5);
        stroke-width: 1.5;
    }

    /* Pulse animation for center emphasis */
    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.6;
        }
    }

    .network-node.central {
        animation: pulse 2s ease-in-out infinite;
    }
}

/* Icon List Slide-in Animation */
/* Add the class 'slide-in-list' to any icon list widget in Elementor to enable this animation */

/* Define slide-in animation */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(150px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Initially hide all icon list items */
.slide-in-list .elementor-icon-list-item {
    opacity: 0;
    transform: translateX(100px);
}

/* Apply animation only when 'animate' class is added by Intersection Observer */
.slide-in-list .elementor-icon-list-item.animate {
    animation-name: slideInFromRight !important;
    animation-duration: 0.8s !important;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation-fill-mode: forwards !important;
}

/* Staggered delays for each item */
.slide-in-list .elementor-icon-list-item.animate:nth-child(1) {
    animation-delay: 0.1s !important;
}

.slide-in-list .elementor-icon-list-item.animate:nth-child(2) {
    animation-delay: 0.3s !important;
}

.slide-in-list .elementor-icon-list-item.animate:nth-child(3) {
    animation-delay: 0.5s !important;
}

.slide-in-list .elementor-icon-list-item.animate:nth-child(4) {
    animation-delay: 0.7s !important;
}

.slide-in-list .elementor-icon-list-item.animate:nth-child(5) {
    animation-delay: 0.9s !important;
}

.slide-in-list .elementor-icon-list-item.animate:nth-child(6) {
    animation-delay: 1.1s !important;
}

.slide-in-list .elementor-icon-list-item.animate:nth-child(7) {
    animation-delay: 1.3s !important;
}

.slide-in-list .elementor-icon-list-item.animate:nth-child(8) {
    animation-delay: 1.5s !important;
}