/* ============================================
   ICON 1: CROSS-TEAM COLLABORATION
   Multiple orbs flying around a center orb
   ============================================ */

.icon-collaboration {
    position: relative;
}

/* Center orb for collaboration */
.collab-center-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #007AFF 0%,
        #4A90E2 40%,
        #7B6EF6 100%);
    box-shadow:
        0 0 20px rgba(0, 122, 255, 0.5),
        inset 0 0 15px rgba(0, 122, 255, 0.3);
    animation: centerOrbPulse 3s ease-in-out infinite;
}

/* Orbit container */
.collab-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: orbitRotation 12s linear infinite;
}

/* Mini orbs orbiting around center */
.collab-mini-orb {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #00C851 0%,
        #007AFF 50%,
        #7B6EF6 100%);
    box-shadow:
        0 0 12px rgba(0, 200, 81, 0.6),
        inset 0 0 8px rgba(0, 122, 255, 0.4);
}

.collab-mini-orb.orb-1 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    animation: miniOrbFloat 2s ease-in-out infinite;
}

.collab-mini-orb.orb-2 {
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    animation: miniOrbFloat 2s ease-in-out infinite 0.5s;
}

.collab-mini-orb.orb-3 {
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    animation: miniOrbFloat 2s ease-in-out infinite 1s;
}

.collab-mini-orb.orb-4 {
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    animation: miniOrbFloat 2s ease-in-out infinite 1.5s;
}

/* Connection pulses */
.collab-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.connection-svg {
    width: 100%;
    height: 100%;
}

.connection-pulse {
    fill: none;
    stroke: rgba(0, 122, 255, 0.3);
    stroke-width: 1;
    animation: connectionPulse 3s ease-out infinite;
}

.connection-pulse:nth-child(2) {
    animation-delay: 1.5s;
}

/* ============================================
   ICON 2: WORKFLOW PIPELINE
   One orb passing data to another
   ============================================ */

.icon-workflow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

/* Workflow orbs */
.workflow-orb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #007AFF 0%,
        #4A90E2 40%,
        #A020F0 100%);
    box-shadow:
        0 0 20px rgba(0, 122, 255, 0.5),
        inset 0 0 12px rgba(0, 122, 255, 0.3);
    position: relative;
    z-index: 2;
}

.workflow-orb.orb-left {
    animation: workflowOrbPulse 2s ease-in-out infinite;
}

.workflow-orb.orb-right {
    animation: workflowOrbPulse 2s ease-in-out infinite 1s;
}

/* Arrow between orbs */
.workflow-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 20px;
    z-index: 1;
}

.arrow-svg {
    width: 100%;
    height: 100%;
    animation: arrowPulse 2s ease-in-out infinite;
}

/* Data packets flowing */
.workflow-data-packet {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #00C851, #007AFF);
    box-shadow: 0 0 10px rgba(0, 200, 81, 0.8);
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
}

.workflow-data-packet.packet-1 {
    animation: dataFlow 3s ease-in-out infinite;
}

.workflow-data-packet.packet-2 {
    animation: dataFlow 3s ease-in-out infinite 1s;
}

.workflow-data-packet.packet-3 {
    animation: dataFlow 3s ease-in-out infinite 2s;
}

/* ============================================
   ICON 3: DATA ANALYZER
   Multiple orbs merging into one
   ============================================ */

.icon-data-analyzer {
    position: relative;
}

/* Center orb (merged data) */
.data-center-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #A020F0 0%,
        #7B6EF6 40%,
        #007AFF 100%);
    box-shadow:
        0 0 25px rgba(160, 32, 240, 0.6),
        inset 0 0 15px rgba(123, 110, 246, 0.4);
    animation: dataOrbPulse 2.5s ease-in-out infinite;
    z-index: 3;
}

/* Source orbs container */
.data-source-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Individual source orbs */
.source-orb {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #00C851 0%,
        #007AFF 100%);
    box-shadow:
        0 0 15px rgba(0, 200, 81, 0.5),
        inset 0 0 8px rgba(0, 122, 255, 0.3);
}

.source-orb.source-1 {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    animation: sourceOrbFloat 2s ease-in-out infinite;
}

.source-orb.source-2 {
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    animation: sourceOrbFloat 2s ease-in-out infinite 0.5s;
}

.source-orb.source-3 {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    animation: sourceOrbFloat 2s ease-in-out infinite 1s;
}

.source-orb.source-4 {
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    animation: sourceOrbFloat 2s ease-in-out infinite 1.5s;
}

/* Data streams flowing to center */
.data-stream {
    position: absolute;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom,
        rgba(0, 200, 81, 0.8),
        rgba(0, 122, 255, 0.4),
        transparent);
    opacity: 0;
}

.source-1 .stream-1 {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    animation: streamFlow1 2s ease-in-out infinite;
}

.source-2 .stream-2 {
    top: 50%;
    left: -2px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: left center;
    animation: streamFlow2 2s ease-in-out infinite 0.5s;
}

.source-3 .stream-3 {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    animation: streamFlow3 2s ease-in-out infinite 1s;
}

.source-4 .stream-4 {
    top: 50%;
    right: -2px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    animation: streamFlow4 2s ease-in-out infinite 1.5s;
}

/* Merge ring effect */
.merge-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(160, 32, 240, 0.4);
    animation: mergeRingPulse 2.5s ease-in-out infinite;
    z-index: 2;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Collaboration animations */
@keyframes centerOrbPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 20px rgba(0, 122, 255, 0.5),
            inset 0 0 15px rgba(0, 122, 255, 0.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 0 30px rgba(0, 122, 255, 0.7),
            inset 0 0 20px rgba(0, 122, 255, 0.5);
    }
}

@keyframes orbitRotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes miniOrbFloat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes connectionPulse {
    0% {
        r: 20;
        opacity: 0.6;
    }
    100% {
        r: 50;
        opacity: 0;
    }
}

/* Workflow animations */
@keyframes workflowOrbPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 20px rgba(0, 122, 255, 0.5),
            inset 0 0 12px rgba(0, 122, 255, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow:
            0 0 30px rgba(0, 122, 255, 0.7),
            inset 0 0 18px rgba(0, 122, 255, 0.5);
    }
}

@keyframes arrowPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes dataFlow {
    0% {
        left: 25%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 75%;
        opacity: 0;
    }
}

/* Data analyzer animations */
@keyframes dataOrbPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 25px rgba(160, 32, 240, 0.6),
            inset 0 0 15px rgba(123, 110, 246, 0.4);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        box-shadow:
            0 0 35px rgba(160, 32, 240, 0.8),
            inset 0 0 20px rgba(123, 110, 246, 0.6);
    }
}

@keyframes sourceOrbFloat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

@keyframes streamFlow1 {
    0% {
        height: 0;
        opacity: 0;
    }
    30% {
        height: 30px;
        opacity: 0.8;
    }
    100% {
        height: 30px;
        opacity: 0;
    }
}

@keyframes streamFlow2 {
    0% {
        height: 0;
        opacity: 0;
    }
    30% {
        height: 30px;
        opacity: 0.8;
    }
    100% {
        height: 30px;
        opacity: 0;
    }
}

@keyframes streamFlow3 {
    0% {
        height: 0;
        opacity: 0;
    }
    30% {
        height: 30px;
        opacity: 0.8;
    }
    100% {
        height: 30px;
        opacity: 0;
    }
}

@keyframes streamFlow4 {
    0% {
        height: 0;
        opacity: 0;
    }
    30% {
        height: 30px;
        opacity: 0.8;
    }
    100% {
        height: 30px;
        opacity: 0;
    }
}

@keyframes mergeRingPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.7;
    }
}

/* Hover enhancements for each icon type */
.demo-option:hover .icon-collaboration .collab-orbit {
    animation-duration: 8s;
}

.demo-option:hover .icon-collaboration .collab-center-orb {
    box-shadow:
        0 0 35px rgba(0, 122, 255, 0.8),
        inset 0 0 25px rgba(0, 122, 255, 0.5);
}

.demo-option:hover .icon-workflow .workflow-data-packet {
    animation-duration: 2s;
}

.demo-option:hover .icon-data-analyzer .data-center-orb {
    box-shadow:
        0 0 40px rgba(160, 32, 240, 0.9),
        inset 0 0 25px rgba(123, 110, 246, 0.6);
}