/* Custom Technological Cursor Styles */

:root {
    --cursor-primary: #34a8d6;
    --cursor-glow: rgba(52, 168, 214, 0.5);
    --cursor-size-dot: 8px;
    --cursor-size-outline: 40px;
}

body {
    cursor: none;
}

/* Ensure default cursor shows up on cross-domain frames or if JS fails */
a, button, [role="button"], .portfolio-item, .tech-service-card {
    cursor: none;
}

.custom-cursor-dot,
.custom-cursor-outline {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
}

.custom-cursor-dot {
    width: var(--cursor-size-dot);
    height: var(--cursor-size-dot);
    background-color: var(--cursor-primary);
    box-shadow: 0 0 10px var(--cursor-primary);
}

.custom-cursor-outline {
    width: var(--cursor-size-outline);
    height: var(--cursor-size-outline);
    border: 2px solid var(--cursor-primary);
    background: transparent;
    box-shadow: 0 0 15px var(--cursor-glow);
}

/* Hover States */
.custom-cursor-dot.hover {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: #fff;
    box-shadow: 0 0 15px #fff;
}

.custom-cursor-outline.hover {
    transform: translate(-50%, -50%) scale(1.8);
    background-color: rgba(52, 168, 214, 0.1);
    border-color: #fff;
    box-shadow: 0 0 25px var(--cursor-primary);
}

/* Active/Click State */
.custom-cursor-dot.active {
    transform: translate(-50%, -50%) scale(0.5);
}

.custom-cursor-outline.active {
    transform: translate(-50%, -50%) scale(0.8);
}

/* Hide cursor on mobile/touch devices */
@media (max-width: 991px) {
    .custom-cursor-dot,
    .custom-cursor-outline {
        display: none !important;
    }
    body {
        cursor: auto;
    }
    a, button, [role="button"], .portfolio-item, .tech-service-card {
        cursor: pointer;
    }
}