/* Temple Cat Cinematic Intro v2 */

.tc-cine{
position:fixed;
inset:0;
z-index:2147483647;
background:#000;
overflow:hidden;
display:none;
font-family:Segoe UI,Arial,sans-serif;
}

.tc-cine.show{display:block}

.tc-cine-map{
position:absolute;
inset:0;
background:url('assets/world/world_map_main.png') center/cover no-repeat;
filter:brightness(.28) blur(1px);
transform:scale(1.06);
animation:mapZoom 18s linear infinite alternate;
}

@keyframes mapZoom{
from{transform:scale(1.02)}
to{transform:scale(1.12)}
}

.tc-cine-glow{
position:absolute;
inset:0;
background:
radial-gradient(circle at 50% 50%,rgba(255,215,0,.28),transparent 22%),
radial-gradient(circle at 20% 40%,rgba(0,180,255,.18),transparent 18%),
radial-gradient(circle at 80% 30%,rgba(255,0,120,.16),transparent 20%);
animation:pulse 4s ease-in-out infinite;
}

@keyframes pulse{
0%,100%{opacity:.5}
50%{opacity:1}
}

.tc-cine-logo{
position:absolute;
top:10%;
left:50%;
transform:translateX(-50%);
text-align:center;
opacity:0;
animation:logoIn 2s forwards;
}

.tc-cine-logo h1{
font-size:clamp(44px,10vw,110px);
line-height:.88;
color:#ffe680;
text-shadow:0 0 25px gold,0 0 60px #ff8a00;
font-weight:1000;
}

.tc-cine-logo p{
margin-top:10px;
color:#fff;
letter-spacing:3px;
font-size:14px;
font-weight:800;
}

@keyframes logoIn{
0%{opacity:0;transform:translateX(-50%) translateY(20px) scale(.8)}
100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

.tc-energy{
position:absolute;
left:50%;
top:50%;
width:120px;
height:120px;
margin-left:-60px;
margin-top:-60px;
border-radius:50%;
background:radial-gradient(circle,#fff,#ffe680,#ff8a00);
box-shadow:0 0 40px gold,0 0 120px gold;
animation:energy 3s ease-in-out infinite;
}

@keyframes energy{
0%,100%{transform:scale(.8)}
50%{transform:scale(1.3)}
}

.tc-factions{
position:absolute;
left:50%;
bottom:18%;
transform:translateX(-50%);
display:flex;
gap:18px;
flex-wrap:wrap;
justify-content:center;
width:min(1000px,92vw);
}

.tc-faction-card{
width:180px;
padding:16px;
border-radius:26px;
background:rgba(0,0,0,.72);
border:1px solid rgba(255,215,0,.28);
text-align:center;
backdrop-filter:blur(10px);
opacity:0;
transform:translateY(30px);
}

.tc-faction-card.show{
animation:factionIn .7s forwards;
}

@keyframes factionIn{
to{
opacity:1;
transform:translateY(0);
}
}

.tc-faction-card img{
width:84px;
height:84px;
object-fit:contain;
}

.tc-faction-card strong{
display:block;
margin-top:10px;
font-size:18px;
color:#ffe680;
}

.tc-faction-card small{
display:block;
margin-top:8px;
color:#ccc;
line-height:1.4;
}

.tc-cine-caption{
position:absolute;
left:50%;
bottom:8%;
transform:translateX(-50%);
width:min(900px,90vw);
text-align:center;
color:#fff;
font-size:clamp(18px,4vw,32px);
font-weight:900;
text-shadow:0 0 18px rgba(0,0,0,.8);
opacity:0;
transition:.5s;
}

.tc-cine-caption.show{
opacity:1;
}

.tc-cine-skip{
position:absolute;
right:18px;
top:18px;
min-width:120px;
height:48px;
border-radius:18px;
border:1px solid rgba(255,215,0,.34);
background:rgba(0,0,0,.72);
color:#ffe680;
font-weight:1000;
}

@media(max-width:768px){
.tc-factions{
gap:10px;
bottom:16%;
}
.tc-faction-card{
width:30%;
min-width:110px;
padding:10px;
}
.tc-faction-card img{
width:60px;
height:60px;
}
}