/* ===========================
MASHA LUXURY INTRO
=========================== */

#introScreen{

position:fixed;

inset:0;

width:100%;

height:100vh;

overflow:hidden;

background:
radial-gradient(circle at center,
#1d0f17 0%,
#090909 45%,
#000 100%);

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:opacity .8s ease;

}

#particleCanvas{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

}

.introOverlay{

position:absolute;

width:100%;

height:100%;

background:
radial-gradient(circle,
transparent 0%,
rgba(0,0,0,.15) 55%,
rgba(0,0,0,.8) 100%);

backdrop-filter:blur(2px);

}

.introCenter{

position:relative;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

z-index:10;

}

.logoContainer{

position:relative;

width:320px;

height:320px;

display:flex;

align-items:center;

justify-content:center;

}

#mashaLogo{

position: absolute;


width:170px;

height: 170px;

object-fit: contain;

z-index: 10;

opacity:1;

transform:scale(.7);

filter:

drop-shadow(0 0 15px rgba(212,175,55,.2))

drop-shadow(0 0 45px rgba(212,175,55,.35));

}

#loaderRing{

position:absolute;

width:320px;

height:320px;

z-index: 5;

transform:rotate(-90deg);

}

.ring-bg{

fill:none;

stroke:rgba(255,255,255,.08);

stroke-width:5;

}

.ring-progress{

fill:none;

stroke:url(#goldGradient);

stroke-width:7;

stroke-linecap:round;

stroke-dasharray:848;

stroke-dashoffset:848;

filter:drop-shadow(0 0 15px rgba(212,175,55,.8));

}

#loadingPercent{

margin-top:25px;

font-size:42px;

font-weight:700;

font-family:Poppins,sans-serif;

letter-spacing:3px;

color:#F5D67A;

text-shadow:

0 0 10px rgba(255,223,120,.4),

0 0 35px rgba(212,175,55,.4);

}

#loadingMessage{

margin-top:14px;

font-size:18px;

font-family:Poppins,sans-serif;

letter-spacing:2px;

color:#ddd;

opacity:.9;

}

@keyframes pulseGlow{

0%{

filter:

drop-shadow(0 0 8px rgba(212,175,55,.25));

}

50%{

filter:

drop-shadow(0 0 28px rgba(212,175,55,.9));

}

100%{

filter:

drop-shadow(0 0 8px rgba(212,175,55,.25));

}

}

#mashaLogo{

animation:pulseGlow 2.5s infinite;

}

@media(max-width:768px){

.logoContainer{

width:240px;

height:240px;

}

#mashaLogo{

width:165px;

}

#loaderRing{

width:240px;

height:240px;

}

#loadingPercent{

font-size:32px;

}

#loadingMessage{

font-size:15px;

}

}