/* =========================================================
   ELECTRONIC SHOW V8 — TRANSMISSION EXPERIENCE
   Signal awakening, living UI, card scans, route transmission
   ========================================================= */

/* REVEIL DU SIGNAL */
.signal-awakening{
position:fixed;
inset:0;
z-index:9999;
background:#000;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:28px;
pointer-events:none;
animation:awakeningOut .65s ease forwards;
animation-delay:2.75s;
}

.awakening-symbol{
width:145px;
height:145px;
border:1px solid rgba(0,102,255,.55);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:16px;
box-shadow:
0 0 35px rgba(0,102,255,.45),
inset 0 0 25px rgba(0,102,255,.08);
opacity:0;
animation:awakeningSymbol .45s ease forwards;
}

.awakening-symbol span{
width:86px;
height:16px;
background:#0066FF;
box-shadow:
0 0 18px rgba(0,102,255,.95),
0 0 45px rgba(0,102,255,.45);
transform:scaleX(0);
transform-origin:left center;
animation:awakeningBar .38s ease forwards;
}

.awakening-symbol span:nth-child(1){animation-delay:.35s}
.awakening-symbol span:nth-child(2){animation-delay:.68s}
.awakening-symbol span:nth-child(3){animation-delay:1.01s}

.awakening-ecg{
width:230px;
height:26px;
opacity:0;
background:url("data:image/svg+xml,%3Csvg width='230' height='26' viewBox='0 0 230 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 13 H88 L96 6 L104 20 L113 2 L122 24 L132 13 H230' fill='none' stroke='%230066FF' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
filter:drop-shadow(0 0 12px rgba(0,102,255,.95));
animation:awakeningLine .65s ease forwards;
animation-delay:1.45s;
}

.signal-awakening p{
color:#0066FF;
font-size:12px;
letter-spacing:7px;
font-weight:bold;
text-transform:uppercase;
opacity:0;
animation:awakeningText .65s ease forwards;
animation-delay:1.85s;
}

@keyframes awakeningSymbol{
from{opacity:0;filter:blur(12px);transform:scale(.9)}
to{opacity:1;filter:blur(0);transform:scale(1)}
}

@keyframes awakeningBar{
from{transform:scaleX(0);opacity:0;filter:blur(8px)}
to{transform:scaleX(1);opacity:1;filter:blur(0)}
}

@keyframes awakeningLine{
from{opacity:0;transform:scaleX(0)}
to{opacity:1;transform:scaleX(1)}
}

@keyframes awakeningText{
from{opacity:0;letter-spacing:14px}
to{opacity:1;letter-spacing:7px}
}

@keyframes awakeningOut{
from{opacity:1;visibility:visible}
to{opacity:0;visibility:hidden}
}

/* HERO CINEMATIC */
.cinematic-emblem{
width:520px;
max-width:100%;
margin-bottom:36px;
opacity:0;
animation:emblemReveal 1.1s ease forwards, emblemPulse 5s ease-in-out infinite 1.25s;
filter:
drop-shadow(0 0 25px rgba(0,102,255,.65))
drop-shadow(0 0 70px rgba(0,102,255,.28));
}

@keyframes emblemReveal{
from{opacity:0;transform:scale(.92);filter:blur(10px)}
to{opacity:1;transform:scale(1);filter:drop-shadow(0 0 25px rgba(0,102,255,.65)) drop-shadow(0 0 70px rgba(0,102,255,.28))}
}

@keyframes emblemPulse{
0%,100%{filter:drop-shadow(0 0 22px rgba(0,102,255,.55)) drop-shadow(0 0 60px rgba(0,102,255,.25))}
50%{filter:drop-shadow(0 0 35px rgba(0,102,255,.9)) drop-shadow(0 0 95px rgba(0,102,255,.45))}
}

.hero h1,
.hero-text,
.hero .button{
opacity:0;
animation:heroTextReveal .8s ease forwards;
}

.hero h1{animation-delay:2.95s}
.hero-text{animation-delay:3.18s}
.hero .button{animation-delay:3.38s}

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

/* TITLES + BUTTONS */
.section-title,
.signal-intro h2,
.origins-title,
.creator-section h2,
.manifesto-section h2,
.join-section h2{
position:relative;
}

.section-title::after,
.signal-intro h2::after,
.origins-title::after,
.creator-section h2::after,
.manifesto-section h2::after,
.join-section h2::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(110deg,transparent 0%,rgba(0,102,255,.18) 45%,transparent 70%);
transform:translateX(-120%);
pointer-events:none;
}

.signal-section-anchor.is-active .section-title::after,
.signal-section-anchor.is-active h2::after{
animation:titleScan 1.1s ease forwards;
}

@keyframes titleScan{
to{transform:translateX(120%)}
}

.button.primary{
animation:buttonPulse 5.5s ease-in-out infinite;
}

@keyframes buttonPulse{
0%,100%{box-shadow:0 0 30px rgba(0,102,255,.38)}
50%{box-shadow:0 0 42px rgba(0,102,255,.62),0 0 90px rgba(0,102,255,.18)}
}

/* ACTIVE SIGNAL CARDS */
.universe-card{
position:relative;
overflow:hidden;
}

.universe-card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:80%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(0,102,255,.18),transparent);
transition:.6s;
pointer-events:none;
}

.universe-card:hover::before{
left:120%;
}

.universe-card:hover{
border-color:rgba(0,102,255,.75);
box-shadow:
0 0 35px rgba(0,102,255,.22),
0 0 90px rgba(0,102,255,.12);
}

/* ROUTE TRANSMISSION ON LINK CLICK */
.route-transmission{
position:fixed;
inset:0;
z-index:9998;
background:rgba(0,0,0,.86);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:24px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.2s;
}

.route-transmission.is-active{
opacity:1;
visibility:visible;
}

.route-line{
width:min(460px,72vw);
height:34px;
background:url("data:image/svg+xml,%3Csvg width='460' height='34' viewBox='0 0 460 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 17 H184 L198 6 L212 29 L230 2 L248 32 L264 17 H460' fill='none' stroke='%230066FF' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
filter:drop-shadow(0 0 14px rgba(0,102,255,.9));
transform:scaleX(0);
}

.route-transmission.is-active .route-line{
animation:routeLine .55s ease forwards;
}

.route-transmission span{
color:#0066FF;
font-size:12px;
letter-spacing:8px;
font-weight:bold;
text-transform:uppercase;
}

@keyframes routeLine{
to{transform:scaleX(1)}
}

@media(max-width:760px){
.cinematic-emblem{width:280px}
.signal-awakening p{font-size:10px;letter-spacing:4px;text-align:center}
.awakening-symbol{width:120px;height:120px;gap:13px}
.awakening-symbol span{width:72px;height:14px}
}