/* =========================================
DRAMA ARENA 5101 - CLEAN CYBER SYSTEM
========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
width:100%;
height:100%;
overflow:hidden;
background:#02050a;
font-family:Arial,Helvetica,sans-serif;
}

body{
position:relative;
color:#fff;
}

/* =========================================
SCENE BASE
========================================= */

#scene{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:radial-gradient(circle at center,#03111d 0%,#02050a 70%);
overflow:hidden;
}

/* =========================================
BACKGROUND GRID
========================================= */

.bg-grid{
position:absolute;
inset:0;
background:
linear-gradient(rgba(0,180,255,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,180,255,.08) 1px,transparent 1px);
background-size:42px 42px;
transform:perspective(900px) rotateX(75deg) scale(2);
transform-origin:bottom;
opacity:.8;
}

/* =========================================
PARTICLES BACKGROUND
========================================= */

.particles{
position:absolute;
inset:0;
background-image:radial-gradient(circle,#42e7ff 1px,transparent 2px);
background-size:90px 90px;
animation:particleMove 20s linear infinite;
opacity:.35;
}

/* =========================================
SCANNER WRAP
========================================= */

.scanner-wrap{
position:relative;
width:min(78vw,520px);
aspect-ratio:1;
display:flex;
justify-content:center;
align-items:center;
}

/* =========================================
RINGS
========================================= */

.ring{
position:absolute;
border-radius:50%;
border:2px solid rgba(0,220,255,.45);
box-shadow:0 0 28px rgba(0,220,255,.35), inset 0 0 22px rgba(0,220,255,.15);
}

.ring1{inset:0;}
.ring2{inset:35px;border-style:dashed;}
.ring3{inset:70px;opacity:.55;}

/* =========================================
FINGER IMAGE
========================================= */

#finger{
width:62%;
z-index:5;
filter:brightness(.22) drop-shadow(0 0 12px #12d9ff);
transition:.25s ease;
pointer-events:none;
user-select:none;
}

/* =========================================
SCAN BEAM
========================================= */

.scan-beam{
position:absolute;
left:18%;
right:18%;
height:95px;
bottom:10%;
z-index:8;
opacity:0;
background:linear-gradient(
to top,
rgba(0,180,255,0),
rgba(0,255,255,.95),
rgba(0,180,255,0)
);
filter:blur(12px);
}

/* =========================================
SENSOR DOTS
========================================= */

.dot{
position:absolute;
width:14px;
height:14px;
border-radius:50%;
background:#66efff;
box-shadow:0 0 18px #66efff;
opacity:.15;
z-index:9;
}

.d1{top:15%;left:24%;}
.d2{top:8%;left:39%;}
.d3{top:6%;left:50%;transform:translateX(-50%);}
.d4{top:8%;right:39%;}
.d5{top:15%;right:24%;}

/* =========================================
TEXT
========================================= */

#text{
position:absolute;
bottom:8%;
font-size:clamp(18px,2vw,32px);
letter-spacing:4px;
text-align:center;
text-shadow:0 0 15px #39e9ff;
z-index:20;
line-height:1.4;
}

/* =========================================
FLASH LAYER
========================================= */

#flash{
position:absolute;
inset:0;
background:#b7fbff;
opacity:0;
pointer-events:none;
z-index:50;
}

/* =========================================
VIDEO
========================================= */

#video{
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:none;
z-index:100;
background:#000;
}

/* =========================================
IDLE MODE
========================================= */

.idle .scan-beam{
opacity:1;
animation:idleScan 2.2s linear infinite;
}

.idle #finger{
animation:fingerBeamGlow 2.2s linear infinite;
}

.idle .ring1{animation:spinSlow 9s linear infinite;}
.idle .ring2{animation:spinReverse 7s linear infinite;}
.idle .ring3{animation:pulse 2s ease infinite;}

/* =========================================
CONTACT MODE
========================================= */

.contact #flash{
animation:touchFlash .5s ease;
}

.contact .ring1,
.contact .ring2{
animation:spinFast 1.2s linear infinite;
}

.contact .dot{
animation:blink .25s infinite alternate;
}

/* =========================================
SCANNING MODE
========================================= */

.scanning .scan-beam{
opacity:1;
animation:scanFast 1.1s linear infinite;
}

.scanning .ring1{animation:spinFast 1.4s linear infinite;}
.scanning .ring2{animation:spinReverse .8s linear infinite;}
.scanning .ring3{animation:pulse .6s infinite;}
.scanning .dot{animation:blink .22s infinite alternate;}

/* =========================================
SUCCESS MODE
========================================= */

.success #flash{
animation:successFlash 1.2s ease;
}

.success #finger{
transform:scale(1.08);
}

/* =========================================
BURST
========================================= */

.burst{
position:fixed;
width:8px;
height:8px;
border-radius:50%;
background:#a8f8ff;
box-shadow:0 0 20px #fff;
z-index:70;
animation:burstMove 2s ease forwards;
}

/* =========================================
REACTOR FINAL (CORE EFFECT)
========================================= */

.reactor-wrap{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
z-index:999;
pointer-events:none;
background:radial-gradient(circle,rgba(0,0,0,.2),rgba(0,0,0,.9));
}

.reactor-core{
width:90px;
height:90px;
border-radius:50%;
background:#00eaff;
box-shadow:0 0 25px #00eaff,0 0 80px #00eaff,0 0 140px #00eaff;
transform:scale(.3);
opacity:.5;
transition:1s ease;
}

.reactor-core.active{
transform:scale(2.2);
opacity:1;
}

.reactor-ring{
position:absolute;
width:260px;
height:260px;
border-radius:50%;
border:3px solid rgba(0,255,255,.5);
box-shadow:0 0 30px #00eaff,inset 0 0 25px #00eaff;
animation:spin 2s linear infinite;
opacity:.6;
}

.reactor-ring.active{
animation:spinFast .6s linear infinite;
opacity:1;
}

.reactor-glow{
position:absolute;
width:500px;
height:500px;
border-radius:50%;
background:radial-gradient(circle,rgba(0,255,255,.3),transparent 70%);
opacity:.3;
transform:scale(.5);
transition:1s ease;
}

.reactor-glow.active{
transform:scale(1.4);
opacity:.9;
}

.reactor-particle{
position:absolute;
width:6px;
height:6px;
border-radius:50%;
background:#fff;
box-shadow:0 0 15px #00eaff;
animation:reactorFly 1.2s ease forwards;
}

.reactor-flash{
position:fixed;
inset:0;
background:#bffcff;
z-index:200;
animation:flashOut .6s ease forwards;
}

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

.reactor-title{
position:fixed;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
z-index:150;
font-size:clamp(22px,3vw,42px);
letter-spacing:4px;
color:#fff;
text-shadow:0 0 20px #00eaff;
animation:titleIn 1s ease;
}

.reactor-title span{
margin-top:10px;
font-size:clamp(28px,4vw,60px);
color:#00eaff;
letter-spacing:8px;
}

/* =========================================
KEYFRAMES
========================================= */

@keyframes idleScan{
0%{bottom:12%;opacity:.15;}
50%{opacity:1;}
100%{bottom:78%;opacity:.08;}
}

@keyframes scanFast{
0%{bottom:12%;}
100%{bottom:78%;}
}

@keyframes spinSlow{to{transform:rotate(360deg);}}
@keyframes spinFast{to{transform:rotate(360deg);}}
@keyframes spinReverse{to{transform:rotate(-360deg);}}

@keyframes pulse{50%{transform:scale(1.05);}}

@keyframes blink{
to{opacity:1;transform:scale(1.4);}
}

@keyframes touchFlash{
0%{opacity:0;}
50%{opacity:.7;}
100%{opacity:0;}
}

@keyframes successFlash{
0%{opacity:0;}
20%{opacity:1;}
100%{opacity:0;}
}

@keyframes burstMove{
0%{transform:scale(1);opacity:1;}
100%{transform:translateY(-180px) scale(2);opacity:0;}
}

@keyframes particleMove{
to{background-position:0 500px;}
}

@keyframes reactorFly{
0%{opacity:1;transform:translate(0,0) scale(1);}
100%{opacity:0;transform:translate(var(--x),var(--y)) scale(0);}
}

@keyframes flashOut{
0%{opacity:0;}
30%{opacity:1;}
100%{opacity:0;}
}

@keyframes titleIn{
0%{transform:scale(.8);opacity:0;}
100%{transform:scale(1);opacity:1;}
}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

.scanner-wrap{width:92vw;}

#finger{width:70%;}

#text{
font-size:18px;
letter-spacing:2px;
bottom:6%;
}

}
/* ===============================
DR STRANGE PORTAL RING
=============================== */

.strange-portal{
position:absolute;
width:420px;
height:420px;
border-radius:50%;
border:4px solid rgba(0,255,255,.8);
box-shadow:
0 0 20px #00eaff,
0 0 60px #00eaff,
inset 0 0 25px #00eaff;
animation:portalSpin 2.5s linear infinite;
opacity:.6;
transform:scale(.3);
transition:1s ease;
}

.strange-portal::before{
content:"";
position:absolute;
inset:20px;
border-radius:50%;
border:2px dashed rgba(255,255,255,.8);
animation:portalSpinReverse 2s linear infinite;
}

.strange-portal::after{
content:"";
position:absolute;
inset:60px;
border-radius:50%;
border:2px solid rgba(0,255,255,.5);
animation:pulsePortal 1.2s ease infinite;
}

/* ACTIVE STATE */
.strange-portal.active{
transform:scale(1.2);
opacity:1;
}

/* ===============================
PORTAL ANIMATIONS
=============================== */

@keyframes portalSpin{
to{transform:rotate(360deg);}
}

@keyframes portalSpinReverse{
to{transform:rotate(-360deg);}
}

@keyframes pulsePortal{
50%{
transform:scale(1.08);
opacity:.4;
}
}