/* =========================================================
   SPARKMEDIA — SECOND LOADING STYLE
   Matches the supplied blue screen with the circular S logo,
   SPARKMEDIA.NG text and three animated dots.
========================================================= */

#sparkLoadingScreen{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 47%, rgba(28,112,218,.22), transparent 30%),
        linear-gradient(118deg,#06387e 0%,#0752ad 48%,#087bd3 100%);
    z-index:99999999;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .42s ease, visibility .42s ease;
}

#sparkLoadingScreen.spark-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.spark-loader-scene{
    position:relative;
    width:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:translateY(-1vh);
}

.spark-loader-mark{
    position:relative;
    width:106px;
    height:106px;
    display:flex;
    align-items:center;
    justify-content:center;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

.spark-loader-ring{
    position:absolute;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.95);
    box-sizing:border-box;
}

.spark-loader-ring-outer{
    width:106px;
    height:106px;
    animation:sparkOuterSpin 2.3s linear infinite;
}

.spark-loader-ring-outer::after{
    content:"";
    position:absolute;
    width:13px;
    height:13px;
    right:1px;
    top:10px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 9px rgba(255,255,255,.7);
}

.spark-loader-ring-inner{
    width:86px;
    height:86px;
    border-width:2px;
    animation:sparkInnerSpin 1.9s linear infinite reverse;
}

.spark-loader-ring-inner::before{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    left:2px;
    top:13px;
    border-radius:50%;
    background:#fff;
}

.spark-loader-core{
    position:relative;
    z-index:2;
    width:61px;
    height:61px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#0755b5;
    font-family:Arial,Helvetica,sans-serif;
    font-size:35px;
    line-height:1;
    font-weight:800;
    box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 18px rgba(0,0,0,.08);
    animation:sparkCoreSpin 1.8s linear infinite;
}

.spark-loader-name{
    margin-top:22px;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    line-height:1;
    font-weight:800;
    letter-spacing:4.8px;
    text-align:center;
    white-space:nowrap;
    text-shadow:0 2px 7px rgba(0,0,0,.08);
    animation:sparkNamePulse 1.7s ease-in-out infinite;
}

.spark-loader-dots{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    height:8px;
}

.spark-loader-dots i{
    display:block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#fff;
    opacity:.45;
    animation:sparkDotPulse 1.05s ease-in-out infinite;
}

.spark-loader-dots i:nth-child(2){animation-delay:.16s}
.spark-loader-dots i:nth-child(3){animation-delay:.32s}

@keyframes sparkOuterSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

@keyframes sparkInnerSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

@keyframes sparkCoreSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

@keyframes sparkNamePulse{
    0%,100%{opacity:.72}
    50%{opacity:1}
}

@keyframes sparkDotPulse{
    0%,100%{transform:scale(.65);opacity:.28}
    50%{transform:scale(1.3);opacity:1}
}

@media(max-width:480px){
    .spark-loader-scene{width:200px}
    .spark-loader-mark{width:102px;height:102px}
    .spark-loader-ring-outer{width:102px;height:102px}
    .spark-loader-ring-inner{width:83px;height:83px}
    .spark-loader-core{width:59px;height:59px;font-size:34px}
    .spark-loader-name{font-size:12px;letter-spacing:4px;margin-top:21px}
}

@media(prefers-reduced-motion:reduce){
    .spark-loader-ring-outer,
    .spark-loader-ring-inner,
    .spark-loader-core,
    .spark-loader-name,
    .spark-loader-dots i{
        animation:none !important;
    }
}