/* ==========================================
   FEATURE: ORGANIZATIONS
========================================== */

.feature-organizations-card{
    position:relative;
    overflow:hidden;
}

.organization-pulse{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
}

.organization-node{
    position:absolute;
    width:86px;
    height:86px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.2);
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.2), transparent 34%),
        linear-gradient(145deg, rgba(255,106,0,.92), rgba(18,18,22,.92));
    box-shadow:0 0 42px rgba(255,106,0,.36);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
    letter-spacing:2px;
    animation:organizationNodePop 2.2s ease forwards;
}

.organization-node:nth-child(1){
    left:18vw;
    top:32vh;
}

.organization-node:nth-child(2){
    right:18vw;
    top:36vh;
    animation-delay:.14s;
}

.organization-node:nth-child(3){
    left:calc(50vw - 43px);
    top:58vh;
    animation-delay:.28s;
}

.organization-line{
    position:absolute;
    left:24vw;
    right:24vw;
    top:48vh;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,106,0,.9),transparent);
    box-shadow:0 0 28px rgba(255,106,0,.48);
    transform:scaleX(0);
    animation:organizationLineGrow 2.2s ease forwards;
}

@keyframes organizationNodePop{
    0%{
        transform:translateY(24px) scale(.66);
        opacity:0;
    }

    22%{
        transform:translateY(0) scale(1);
        opacity:1;
    }

    78%{
        opacity:1;
    }

    100%{
        transform:translateY(-14px) scale(.84);
        opacity:0;
    }
}

@keyframes organizationLineGrow{
    0%{
        transform:scaleX(0);
        opacity:0;
    }

    20%,75%{
        transform:scaleX(1);
        opacity:1;
    }

    100%{
        transform:scaleX(1);
        opacity:0;
    }
}