/*!
 * CIAETO Runtime Styles © 2026 CPL
 */

:root{
--bg:#020406;
--primary:#104CBA;
--secondary:#F43336;
--glow:#00f2ff;
--text-dim:rgba(255,255,255,.15)
}

#loader-overlay{
position:fixed;
inset:0;
background:var(--bg);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:10000
}

.preloader-area.is-done #loader-overlay{
pointer-events:none
}

.loader-viz{
position:relative;
width:100px;
height:100px;
display:grid;
place-items:center
}

.ring-svg{width:100%;height:100%}

.outer-arc{
fill:none;
stroke:url(#_og);
stroke-width:4;
stroke-linecap:round;
stroke-dasharray:188 314;
animation:a 2s cubic-bezier(.68,-.55,.265,1.55) infinite;
transform-origin:center
}

.center-arc{
fill:none;
stroke:url(#_ig);
stroke-width:3;
stroke-linecap:round;
stroke-dasharray:144 240;
animation:b 2s linear infinite;
transform-origin:center
}

.inner-arc{
fill:none;
stroke:url(#_og);
stroke-width:2;
stroke-linecap:round;
stroke-dasharray:90 180;
animation:c 2s cubic-bezier(.68,-.55,.265,1.55) infinite;
transform-origin:center
}

.core-diamond{
position:absolute;
width:14px;
height:14px;
background:#fff;
transform:rotate(45deg);
border-radius:1px;
animation:d 3s ease-in-out infinite
}

.loader-header{text-align:center}

.loader-title{
font-family:rajdhani,sans-serif;
background:linear-gradient(90deg,var(--primary),var(--secondary));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
font-size:16px;
font-weight:600;
letter-spacing:.25em;
text-transform:uppercase;
position:relative;
white-space:nowrap;
opacity:.9
}

.loader-title:after{
content:attr(data-text);
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent 25%,var(--glow) 50%,transparent 75%);
background-size:300% 100%;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:e 6s linear infinite;
filter:drop-shadow(0 0 12px var(--glow));
mix-blend-mode:screen;
pointer-events:none
}

.loader-line{
width:120px;
height:1px;
background:linear-gradient(90deg,transparent,var(--secondary),transparent);
margin:5px auto 0;
animation:f 4s ease-in-out infinite
}

@keyframes a{to{transform:rotate(360deg)}}
@keyframes b{to{transform:rotate(-360deg)}}
@keyframes c{to{transform:rotate(180deg)}}
@keyframes d{
0%,100%{transform:rotate(45deg) scale(.75);background:var(--primary);box-shadow:0 0 15px var(--primary)}
25%,75%{background:var(--glow);box-shadow:0 0 30px var(--glow)}
50%{transform:rotate(45deg) scale(1);background:var(--secondary);box-shadow:0 0 50px var(--secondary),0 0 20px var(--glow)}
}
@keyframes e{from{background-position:250% 0}to{background-position:-150% 0}}
@keyframes f{0%,100%{width:60px;opacity:.3}50%{width:120px;opacity:1}}

@media(prefers-reduced-motion:reduce){
.outer-arc,.center-arc,.inner-arc,.core-diamond,.loader-title:after{animation:none}
}