/* =========================================================
   ELECTRONIC SHOW V7 — JOIN / TRANSMISSION BEACONS
   Final connection section
   ========================================================= */

.join-section{
max-width:1100px;
margin:0 auto;
padding:150px 22px;
text-align:center;
}

.join-kicker{
color:#0066FF;
letter-spacing:8px;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
margin-bottom:28px;
}

.join-section h2{
font-size:clamp(46px,7vw,92px);
line-height:1;
text-transform:uppercase;
margin-bottom:34px;
}

.join-text{
max-width:720px;
margin:0 auto;
font-size:20px;
line-height:1.8;
color:#DADADA;
}

.transmission-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-top:60px;
}

.transmission-beacon{
text-decoration:none;
color:#FFF;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
animation:beaconAppear .8s ease forwards;
opacity:0;
}

.transmission-beacon:nth-child(1){animation-delay:.15s}
.transmission-beacon:nth-child(2){animation-delay:.3s}
.transmission-beacon:nth-child(3){animation-delay:.45s}
.transmission-beacon:nth-child(4){animation-delay:.6s}
.transmission-beacon:nth-child(5){animation-delay:.75s}

@keyframes beaconAppear{
from{opacity:0;transform:translateY(18px) scale(.92)}
to{opacity:1;transform:translateY(0) scale(1)}
}

.beacon-circle{
width:92px;
height:92px;
border-radius:50%;
border:1px solid rgba(0,102,255,.55);
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circle,rgba(0,102,255,.18),rgba(0,0,0,.88));
box-shadow:
0 0 20px rgba(0,102,255,.28),
inset 0 0 18px rgba(0,102,255,.18);
transition:.3s;
animation:beaconPulse 4.2s ease-in-out infinite;
}

@keyframes beaconPulse{
0%{box-shadow:0 0 20px rgba(0,102,255,.22),inset 0 0 18px rgba(0,102,255,.14)}
50%{box-shadow:0 0 34px rgba(0,102,255,.55),0 0 70px rgba(0,102,255,.22),inset 0 0 24px rgba(0,102,255,.25)}
100%{box-shadow:0 0 20px rgba(0,102,255,.22),inset 0 0 18px rgba(0,102,255,.14)}
}

.beacon-circle i{
font-size:34px;
color:#FFF;
transition:.3s;
}

.beacon-label{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:#DADADA;
transition:.3s;
}

.transmission-beacon:hover{
transform:translateY(-6px);
}

.transmission-beacon:hover .beacon-circle{
border-color:#0066FF;
box-shadow:
0 0 40px rgba(0,102,255,.75),
0 0 90px rgba(0,102,255,.35),
inset 0 0 28px rgba(0,102,255,.28);
}

.transmission-beacon:hover i,
.transmission-beacon:hover .beacon-label{
color:#0066FF;
}

.connection-status{
margin-top:70px;
display:flex;
flex-direction:column;
gap:12px;
align-items:center;
animation:statusReveal 1s ease forwards;
animation-delay:1.05s;
opacity:0;
}

@keyframes statusReveal{
from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:translateY(0)}
}

.connection-status span{
font-size:12px;
letter-spacing:7px;
text-transform:uppercase;
color:#0066FF;
}

.connection-status strong{
font-size:15px;
letter-spacing:6px;
text-transform:uppercase;
color:#FFF;
text-shadow:0 0 18px rgba(0,102,255,.35);
}