/*
========================================================

Project : ZBITVERSE
Version : 1.0
File : components.css

Description:
Reusable UI Components

========================================================
*/


/* ======================================================
   BUTTONS
====================================================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:16px 28px;

border-radius:var(--radius-lg);

font-weight:var(--fw-semibold);

font-size:var(--font-size-md);

transition:var(--transition-fast);

cursor:pointer;

}


/* ======================================================
   PRIMARY BUTTON
====================================================== */

.btn-primary{

background:var(--color-primary);

color:var(--color-white);

}

.btn-primary:hover{

transform:translateY(-2px);

background:#1D4ED8;

box-shadow:var(--shadow-md);

}


/* ======================================================
   SECONDARY BUTTON
====================================================== */

.btn-secondary{

background:transparent;

border:1px solid var(--color-border);

color:var(--color-white);

}

.btn-secondary:hover{

background:var(--color-surface);

}


/* ======================================================
   BADGE
====================================================== */

.badge{

display:inline-flex;

align-items:center;

padding:8px 16px;

border-radius:999px;

background:rgba(37,99,235,.15);

border:1px solid rgba(37,99,235,.25);

color:var(--color-primary-light);

font-size:.875rem;

font-weight:var(--fw-medium);

}


/* ======================================================
   CARD
====================================================== */

.card{

background:var(--color-surface);

border:1px solid var(--color-border);

border-radius:var(--radius-xl);

padding:40px;

transition:var(--transition-normal);

}

.card:hover{

transform:translateY(-8px);

border-color:rgba(56,189,248,.40);

box-shadow:var(--shadow-lg);

}


/* ======================================================
   SECTION TITLE
====================================================== */

.section-title{

margin-bottom:var(--space-2);

}


.section-subtitle{

max-width:760px;

margin-inline:auto;

color:var(--color-text-secondary);

}


/* ======================================================
   DIVIDER
====================================================== */

.divider{

width:100%;

height:1px;

background:var(--color-border);

margin-block:var(--space-7);

}
/* ======================================================
   CONVERGENCE CORE
====================================================== */

.convergence-core{

    position:absolute;

    width:180px;
    height:180px;

    display:flex;
    justify-content:center;
    align-items:center;
}

.core{

    position:absolute;

    top:50%;

    left:50%;

    width:24px;

    height:24px;

    border-radius:50%;

    transform:translate(-50%,-50%);

    background:var(--color-primary);

    box-shadow:0 0 40px rgba(37,99,235,.45);

}
.core-glow{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(45,104,255,.15);

    filter:blur(40px);
}
.core-ring{

    position:absolute;

    width:120px;
    height:120px;

    border:2px solid rgba(255,255,255,.20);

    border-radius:50%;
}
.core-ring-2{

    position:absolute;

    width:80px;
    height:80px;

    border:2px solid rgba(43,108,255,.70);

    border-radius:50%;
}

.core-center{

    width:18px;
    height:18px;

    border-radius:50%;

    background:#2b6cff;

    box-shadow:
        0 0 15px rgba(43,108,255,.9),
        0 0 35px rgba(43,108,255,.5);
}
.node{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--color-primary-light);

}
.node-top{

    top:40px;

    left:50%;

    transform:translateX(-50%);

}

.node-right{

    right:40px;

    top:50%;

    transform:translateY(-50%);

}

.node-bottom{

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

}

.node-left{

    left:40px;

    top:50%;

    transform:translateY(-50%);

}
.line{

    position:absolute;

    background:rgba(56,189,248,.25);

}
.line-top{

    width:2px;

    height:100px;

    left:50%;

    top:60px;

    transform:translateX(-50%);

}

.line-bottom{

    width:2px;

    height:100px;

    left:50%;

    bottom:60px;

    transform:translateX(-50%);

}

.line-left{

    width:100px;

    height:2px;

    left:60px;

    top:50%;

    transform:translateY(-50%);

}

.line-right{

    width:100px;

    height:2px;

    right:60px;

    top:50%;

    transform:translateY(-50%);

}