/* =====================================================
   MYAYA Reactor Loader v3
===================================================== */

:root{

    --loader-bg:#000;
    --hud:#ffffff;
    --glow:#00d9ff;

}

.loader{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:var(--loader-bg);

    overflow:hidden;

    z-index:999999;

    transition:opacity .8s ease;

}

.loader.fade{

    opacity:0;
    pointer-events:none;

}

/* ===================================================== */

.reactor{

    position:relative;

    width:420px;
    height:420px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.reactor-svg{

    width:100%;
    height:100%;

    overflow:visible;

}

/* ===================================================== */

.reactor-ring{

    transform-origin:250px 250px;

    animation:

    reactorRotate 16s linear infinite;

}

/* ===================================================== */

.segment{

    fill:none;

    stroke:var(--hud);

    stroke-width:6;

    stroke-linecap:round;

    stroke-linejoin:round;

    opacity:.25;

    stroke-dasharray:70 1061;

    filter:

    drop-shadow(0 0 6px var(--glow))
    drop-shadow(0 0 20px var(--glow));

    animation:

    segmentGlow 2.5s ease-in-out infinite;

}

/* ===================================================== */

.s1{transform:rotate(0deg);}
.s2{transform:rotate(30deg);}
.s3{transform:rotate(60deg);}
.s4{transform:rotate(90deg);}
.s5{transform:rotate(120deg);}
.s6{transform:rotate(150deg);}
.s7{transform:rotate(180deg);}
.s8{transform:rotate(210deg);}
.s9{transform:rotate(240deg);}
.s10{transform:rotate(270deg);}
.s11{transform:rotate(300deg);}
.s12{transform:rotate(330deg);}

/* ===================================================== */

.core{

    position:absolute;

    left:50%;
    top:50%;

    transform:

    translate(-50%,-20%);

}

/* ===================================================== */

.core-logo{

    width:250px;

    height:auto;

    user-select:none;

    pointer-events:none;

    animation:

    logoPulse 3s ease-in-out infinite;

    filter:

    drop-shadow(0 0 12px var(--glow));

}

/* ===================================================== */

.loader::before{

content:"";

position:absolute;

width:650px;
height:650px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(0,217,255,.08),

transparent 70%

);

animation:

backgroundPulse 3s ease-in-out infinite;

}

/* ===================================================== */

@keyframes reactorRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/* ===================================================== */

@keyframes segmentGlow{

0%,100%{

opacity:.2;

stroke:#6edcff;

filter:

drop-shadow(0 0 8px #00d9ff)
drop-shadow(0 0 20px #00d9ff);

}

50%{

opacity:1;

stroke:#ffffff;

filter:

drop-shadow(0 0 15px #00ffff)
drop-shadow(0 0 40px #00d9ff);

}

}

/* ===================================================== */

@keyframes logoPulse{

0%,100%{

transform:scale(.98);

filter:

drop-shadow(0 0 12px #00d9ff);

}

50%{

transform:scale(1.04);

filter:

drop-shadow(0 0 25px #00ffff);

}

}

/* ===================================================== */

@keyframes backgroundPulse{

0%,100%{

opacity:.35;

transform:scale(.95);

}

50%{

opacity:1;

transform:scale(1.05);

}

}

/* ===================================================== */

@media(max-width:768px){

.reactor{

width:320px;
height:320px;

}

.core-logo{

width:180px;

}

.segment{

stroke-width:5;

}

}

/* ===================================================== */

@media(max-width:480px){

.reactor{

width:270px;
height:270px;

}

.core-logo{

width:150px;

}

.segment{

stroke-width:4;

}

}