/* Hand Animation Styles */

/* Container for the animation */
.hand-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Agent hand styles */
.agent-hand {
    position: absolute;
    width: 60px;
    height: auto;
    opacity: 0;
    filter: brightness(0.8);
    will-change: transform;
}

/* Human hand styles */
.human-hand {
    position: absolute;
    width: 200px;
    height: auto;
    opacity: 0;
    right: -300px;
    top: 50%;
    transform: translateY(-50%);
    will-change: transform;
}

/* Particle Globe Styles */
.particle-globe {
    position: absolute;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* Individual globe particle */
.globe-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle,
        rgba(147, 197, 253, 1) 0%,
        rgba(147, 197, 253, 0.6) 50%,
        transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 6px rgba(147, 197, 253, 0.8),
        0 0 12px rgba(147, 197, 253, 0.4);
}

/* Make some particles glow more */
.globe-particle:nth-child(3n) {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(147, 197, 253, 0.8) 50%,
        transparent 100%);
}

/* Subtle glow for the whole globe */
.particle-globe::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(147, 197, 253, 0.1) 0%,
        rgba(147, 197, 253, 0.05) 30%,
        transparent 70%);
    pointer-events: none;
}

/* Old Lightning styles - DEPRECATED (keeping for reference)
.particle-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(147, 197, 253, 0.2) 10%,
        rgba(147, 197, 253, 0.6) 25%,
        rgba(255, 255, 255, 1) 50%,
        rgba(147, 197, 253, 0.6) 75%,
        rgba(147, 197, 253, 0.2) 90%,
        transparent 100%);
    transform-origin: left center;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity, filter;
    filter: blur(0.5px);
    box-shadow:
        0 0 10px rgba(147, 197, 253, 0.8),
        0 0 20px rgba(147, 197, 253, 0.5),
        0 0 30px rgba(147, 197, 253, 0.3);
    animation: electricPulse 0.2s infinite;
}

/* Glow effect around the beam */
.particle-line::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 5px;  /* This should be slightly larger than the main beam */
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(147, 197, 253, 0.3) 30%,
        rgba(147, 197, 253, 0.3) 70%,
        transparent 100%);
    filter: blur(2px);
}

/* Electric pulse animation */
@keyframes electricPulse {
    0%, 100% {
        opacity: var(--line-opacity, 0.6);
        filter: blur(0.5px) brightness(1);
    }
    50% {
        opacity: calc(var(--line-opacity, 0.6) * 1.3);
        filter: blur(0.3px) brightness(1.5);
    }
}

/* Electric spark/dot that travels along the beam */
.particle-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(147, 197, 253, 0.8) 40%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 15px rgba(147, 197, 253, 1),
        0 0 30px rgba(147, 197, 253, 0.7),
        0 0 45px rgba(255, 255, 255, 0.5);
    animation: sparkMove 0.3s infinite;
}

/* Spark pulsing animation */
@keyframes sparkMove {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Lightning branch effect (smaller offshoots) */
.lightning-branch {
    position: absolute;
    height: 1px;  /* Branches are thinner than main beam */
    background: linear-gradient(90deg,
        rgba(147, 197, 253, 0.8),
        transparent);
    pointer-events: none;
    transform-origin: left center;
    animation: branchFlicker 0.1s infinite;
}

/* Branch flickering effect */
@keyframes branchFlicker {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.6; }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .agent-hand {
        width: 40px;
    }
    .human-hand {
        width: 120px;
    }

    /* Thinner beams on mobile */
    .particle-line {
        height: 2px;
    }

    .particle-line::before {
        height: 4px;
    }

    .particle-dot {
        width: 6px;
        height: 6px;
    }
}