/*==========================================================
GENESIS GS INTRO
==========================================================*/

#gsIntro{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:#050505;

overflow:hidden;

z-index:100000;

transition:

opacity .8s ease,

visibility .8s ease;

}

#gsIntro.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

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

.gs-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle at top,

rgba(255,0,85,.18),

transparent 55%),

radial-gradient(circle at bottom,

rgba(139,0,255,.16),

transparent 60%),

#050505;

filter:blur(6px);

}

/*==========================================================
PARTICLES LAYER
==========================================================*/

.gs-particles{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

}

/*==========================================================
CONTENT
==========================================================*/

.gs-container{

position:relative;

z-index:10;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}

/*==========================================================
LOGO
==========================================================*/

.gs-logo-wrapper{

position:relative;

width:220px;

height:220px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:2rem;

}

.gs-logo{

width:110px;

height:110px;

object-fit:contain;

z-index:5;

animation:

gsPulse 2.2s ease-in-out infinite;

filter:

drop-shadow(0 0 30px rgba(255,0,85,.35));

}

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

.gs-ring{

position:absolute;

border-radius:50%;

border:1px solid rgba(255,255,255,.12);

}

.gs-ring-1{

width:140px;

height:140px;

animation:

ringRotate 8s linear infinite;

}

.gs-ring-2{

width:180px;

height:180px;

border-style:dashed;

animation:

ringReverse 10s linear infinite;

}

.gs-ring-3{

width:220px;

height:220px;

opacity:.45;

animation:

ringPulse 4s ease-in-out infinite;

}

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

.gs-title{

margin:0;

font-size:3.5rem;

font-weight:800;

letter-spacing:6px;

background:

linear-gradient(

90deg,

#ffffff,

#ff0055,

#8b00ff,

#ffffff);

background-size:300%;

-webkit-background-clip:text;

color:transparent;

animation:

gradientShift 5s linear infinite;

}

/*==========================================================
TAGLINE
==========================================================*/

.gs-tagline{

margin-top:.8rem;

letter-spacing:4px;

font-size:.9rem;

text-transform:uppercase;

color:#b5b5b5;

}

/*==========================================================
PROGRESS
==========================================================*/

.gs-progress{

margin-top:2.2rem;

width:280px;

height:4px;

border-radius:999px;

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

overflow:hidden;

}

.gs-progress span{

display:block;

height:100%;

width:0;

background:

linear-gradient(

90deg,

#ff0055,

#8b00ff);

animation:

progressFill 2.6s linear forwards;

}

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

@keyframes gsPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes ringRotate{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

@keyframes ringReverse{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0);

}

}

@keyframes ringPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes gradientShift{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

@keyframes progressFill{

0%{

width:0;

}

100%{

width:100%;

}

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:768px){

.gs-logo-wrapper{

width:170px;

height:170px;

}

.gs-logo{

width:90px;

height:90px;

}

.gs-title{

font-size:2.4rem;

}

.gs-progress{

width:220px;

}

}
/*==========================================================
INTRO FLOATING PARTICLES
==========================================================*/

.intro-particle{

position:absolute;

bottom:-20px;

border-radius:50%;

background:

radial-gradient(circle,#ffffff,#ff0055);

opacity:.7;

pointer-events:none;

animation:introFloat linear forwards;

filter:blur(.5px);

}

/*==========================================================
PARTICLE ANIMATION
==========================================================*/

@keyframes introFloat{

0%{

transform:

translateY(0)

scale(.2);

opacity:0;

}

15%{

opacity:.9;

}

100%{

transform:

translateY(-120vh)

translateX(40px)

scale(1);

opacity:0;

}

}

/*==========================================================
LOGO LIGHT SWEEP
==========================================================*/

.gs-logo-wrapper::before{

content:"";

position:absolute;

top:-30%;

left:-120%;

width:50%;

height:160%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.75),

transparent

);

transform:rotate(20deg);

animation:logoSweep 2.4s ease-in-out forwards;

pointer-events:none;

z-index:20;

}

/*==========================================================
SOFT GLOW
==========================================================*/

.gs-logo-wrapper::after{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(255,0,85,.12),

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

transparent

);

filter:blur(55px);

animation:logoGlow 2.8s ease-in-out infinite;

z-index:-1;

}

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

.gs-title{

animation:

gradientShift 5s linear infinite,

titleFade 1.3s ease;

}

.gs-tagline{

animation:

tagFade 1.8s ease;

}

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

@keyframes logoSweep{

0%{

left:-120%;

opacity:0;

}

25%{

opacity:1;

}

100%{

left:180%;

opacity:0;

}

}

@keyframes logoGlow{

0%,100%{

transform:scale(1);

opacity:.6;

}

50%{

transform:scale(1.08);

opacity:1;

}

}

@keyframes titleFade{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:none;

}

}

@keyframes tagFade{

0%{

opacity:0;

transform:translateY(15px);

}

100%{

opacity:1;

transform:none;

}

}