/* =========================
UNITY SECTION
========================= */

.unity{

padding:220px 8%;

background:#050C12;

}

.unity-container{

max-width:1100px;

margin:auto;

text-align:center;

}



/* HEADER */

.unity-eyebrow{

font-size:.75rem;

letter-spacing:3px;

color:var(--accent);

display:block;

margin-bottom:16px;

}

.unity-title{

font-size:2.4rem;

margin-bottom:16px;

}

.unity-intro{

max-width:620px;

margin:auto;

color:var(--text-soft);

margin-bottom:120px;

}



/* =========================
UNITY STAGE
========================= */

.unity-stage{

position:relative;

height:500px;

display:flex;

align-items:center;

justify-content:center;

}



/* =========================
INTERACTIVE LAB
========================= */

.unity-lab{

position:absolute;

width:700px;
height:420px;

border-radius:20px;

background:radial-gradient(
circle at center,
rgba(38,166,154,.08),
rgba(0,0,0,.6)
);

box-shadow:
0 0 120px rgba(38,166,154,.1),
0 40px 80px rgba(0,0,0,.7);

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

perspective:1000px;

}



/* CORE */

.lab-core{

width:18px;
height:18px;

border-radius:50%;

background:var(--accent);

box-shadow:
0 0 30px rgba(38,166,154,1),
0 0 100px rgba(38,166,154,.8);

animation:corePulse 3s ease-in-out infinite;

}



/* RINGS */

.lab-ring{

position:absolute;

border-radius:50%;

border:1px solid rgba(38,166,154,.4);

animation:rotateRing linear infinite;

}

.ring1{

width:140px;
height:140px;

animation-duration:10s;

}

.ring2{

width:240px;
height:240px;

animation-duration:16s;

opacity:.7;

}

.ring3{

width:360px;
height:360px;

animation-duration:22s;

opacity:.4;

}



/* PARTICLES */

.lab-particles span{

position:absolute;

width:4px;
height:4px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 10px rgba(38,166,154,.9);

animation:particleFloat linear infinite;

}

.lab-particles span:nth-child(1){top:20%;left:40%;animation-duration:7s;}
.lab-particles span:nth-child(2){top:70%;left:30%;animation-duration:8s;}
.lab-particles span:nth-child(3){top:40%;left:75%;animation-duration:6s;}
.lab-particles span:nth-child(4){top:80%;left:60%;animation-duration:9s;}
.lab-particles span:nth-child(5){top:35%;left:15%;animation-duration:10s;}
.lab-particles span:nth-child(6){top:60%;left:80%;animation-duration:7s;}



/* ANIMATIONS */

@keyframes rotateRing{

from{transform:rotate(0deg)}
to{transform:rotate(360deg)}

}

@keyframes corePulse{

0%{transform:scale(1)}
50%{transform:scale(1.6)}
100%{transform:scale(1)}

}

@keyframes particleFloat{

0%{transform:translateY(0);opacity:0}
50%{opacity:1}
100%{transform:translateY(-60px);opacity:0}

}



/* =========================
FLOATING CARDS
========================= */

.unity-grid{

position:relative;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:26px;

z-index:2;

width:80%;

}

.unity-card{

padding:30px;

border-radius:14px;

background:rgba(0,0,0,.6);

backdrop-filter:blur(6px);

border:1px solid rgba(255,255,255,.08);

text-align:left;

transform:
translate(var(--orbit-x,0), var(--orbit-y,0));

transition:

transform .4s ease,
border-color .4s ease,
box-shadow .4s ease;

}

.unity-card h3{

margin-bottom:10px;

}

.unity-card p{

color:var(--text-soft);

}



/* HOVER */

.unity-card:hover{

transform:translateY(-6px);

border-color:rgba(38,166,154,.4);

box-shadow:
0 0 40px rgba(38,166,154,.2),
0 20px 40px rgba(0,0,0,.6);

}



/* DEMO BUTTON */

.unity-demo{

margin-top:100px;

}

.unity-demo-btn{

display:inline-block;

padding:14px 32px;

border-radius:999px;

background:var(--accent);

color:#000;

text-decoration:none;

font-size:.9rem;

font-weight:500;

transition:all .3s ease;

}

.unity-demo-btn:hover{

transform:translateY(-2px);

box-shadow:0 0 25px rgba(38,166,154,.6);

}