@define bgcolor: #0d1c22ff;
@define bgcolorwash: #39b0dea0;
@define bgcolorwashmedium: #39b0de60;
@define bgcolorwashlight: #39b0de25;

BackgroundVideoPanel
{
	perspective: 1000;
	perspective-origin: 50% 50%;
	position: 0px 0px 0%;
	width: 1920px;
	height: 1080px;
	visibility: visible;
	background-image: url( "file://{images}/mainmenu_bg_2.png" );
	background-size: 100% 100%;
	opacity: 0.99;

}

BackgroundVideoPanel.FullScreenFadeOut
{
    opacity: 0.0;
}

BackgroundVideoPanel.VR 
{
	background-color: #0b2c38ee;
}


BackgroundVideoPanel.IngameOverlayBackground
{
	width: 1920px;
	height: 1080px;
	background-color: #3f75a089;
	background-repeat: no-repeat;
	background-position: right 0px 50%;
	z-index: -1000;
	background-image: none;
}

BackgroundVideoPanel.ScreenSaverMode, BackgroundVideoPanel.GamesRunning, Welcome_NoController
{
	background-image: url( "file://{images}/mainmenu_bg_2.png" );
	background-size: 100% 100%;

	pre-transform-scale2d: 1.0;

	animation-name: background-gradient-anim;
	animation-duration: 20.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	
}

@keyframes 'background-gradient-anim'
{
	0%
	{
		pre-transform-scale2d: 1.0;
	}

	50%
	{
		pre-transform-scale2d: 1.1;
	}
	
	100%
	{
		pre-transform-scale2d: 1.0;
	}
	
}



#BackgroundMovie
{
	z-index: -10000;

	animation-name: particle-system-anim;
	animation-duration: 15.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;

	
//	background-image: url( "file://{movies}/Background1080p.webm" );
//	opacity: 0.3;

	width: 100%;
	height: 100%;
}

@keyframes 'particle-system-anim'
{
	0%
	{
		background-color: particle-system( base-position( 180px, 1250px ), base-position-variance( 100px, 250px ), 
                            particle-size( 30px ), particle-size-variance( 3px ), 
                            particles-per-second( 2 ), particles-per-second-variance( 4 ),
                            particle-lifespan-seconds( 28s ), particle-lifespan-seconds-variance( 6s ),
							particle-initial-velocity( 180px, -90px ), particle-initial-velocity-variance( 15px, 15px ),
							particle-velocity-min( 60px, -200px ), particle-velocity-max( 200px, 15px ),
							gravity-acceleration( 0px, 16px ),
							gravity-acceleration-particle-variance( 30px, 50px ),
							particle-start-color( #0f644e11 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #0e375f00 ), particle-end-color-variance( #01111100 ),
						  particle-sharpness( 0.5 ), particle-sharpness-variance( 0.3 ),
							particle-flicker( 0.2 ), particle-flicker-variance( 0.1 )
                          );
	}

//slowly moving right
	55%
	{
		background-color: particle-system( base-position( 900px, 880px ), base-position-variance( 200px, 200px ), 
                            particle-size( 20px ), particle-size-variance( 2px ), 
                            particles-per-second( 4 ), particles-per-second-variance( 2 ),
                            particle-lifespan-seconds( 1.0s ), particle-lifespan-seconds-variance( 0.5s ),
							particle-initial-velocity( 90px, -60px ), particle-initial-velocity-variance( 15px, 15px ),
							particle-velocity-min( 75px, -150px ), particle-velocity-max( 180px, -90px ),
							gravity-acceleration( 0px, 16px ),
							gravity-acceleration-particle-variance( 60px, 100px ),
							particle-start-color( #0f644e22 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #0e295e11 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.4 ), particle-sharpness-variance( 0.4 ),
							particle-flicker( 0.5 ), particle-flicker-variance( 0.4 )
                          );
	}
	
//slowly moving left
	65%
	{
		background-color: particle-system( base-position( 1350px, 520px ), base-position-variance( 80px, 80px ), 
                            particle-size( 48px ), particle-size-variance( 10px ), 
                            particles-per-second( 5 ), particles-per-second-variance( 1 ),
                            particle-lifespan-seconds( 2.5s ), particle-lifespan-seconds-variance( 0.5s ),
							particle-initial-velocity( -50px, -60px ), particle-initial-velocity-variance( 50px, 15px ),
							particle-velocity-min( -200px, -150px ), particle-velocity-max( 180px, -90px ),
							gravity-acceleration( 0px, 16px ),
							gravity-acceleration-particle-variance( 30px, 100px ),
							particle-start-color( #98802025 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #03423201 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.4 ), particle-sharpness-variance( 0.4 ),
							particle-flicker( 0.6 ), particle-flicker-variance( 0.2 )
                          );
	}
	
//quickly moving left
	90%
	{
		background-color: particle-system( base-position( 1300px, 470px ), base-position-variance( 600px, 30px ), 
                            particle-size( 20px ), particle-size-variance( 3px ), 
                            particles-per-second( 60 ), particles-per-second-variance( 12 ),
                            particle-lifespan-seconds( 4.5s ), particle-lifespan-seconds-variance( 0.75s ),
							particle-initial-velocity( -600px, -260px ), particle-initial-velocity-variance( 100px, 400px ),
							particle-velocity-min( -700px, -450px ), particle-velocity-max( 180px, 250px ),
							gravity-acceleration( 20px, 40px ),
							gravity-acceleration-particle-variance( 30px, 100px ),
							particle-start-color( #1c1c6e44 ), particle-start-color-variance( #11111111 ),
							particle-end-color( #2c718000 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.5 ), particle-sharpness-variance( 0.3 ),
							particle-flicker( 0.8 ), particle-flicker-variance( 0.2 )
                          );
	}
	
//slowly moving left
	96%
	{
		background-color: particle-system( base-position( 1500px, 680px ), base-position-variance( 80px, 200px ), 
                            particle-size( 140px ), particle-size-variance( 12px ), 
                            particles-per-second( 4 ), particles-per-second-variance( 1 ),
                            particle-lifespan-seconds( 5.0s ), particle-lifespan-seconds-variance( 0.5s ),
							particle-initial-velocity( -420px, -85px ), particle-initial-velocity-variance( 55px, 50px ),
							particle-velocity-min( -500px, -200px ), particle-velocity-max( 180px, 150px ),
							gravity-acceleration( 0px, 16px ),
							gravity-acceleration-particle-variance( 30px, 100px ),
							particle-start-color( #3c093d22 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #558fc801 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.6 ), particle-sharpness-variance( 0.4 ),
							particle-flicker( 0.6 ), particle-flicker-variance( 0.2 )
                          );
	}
	
	100%
	{
		background-color: particle-system( base-position( 250px, 1250px ), base-position-variance( 120px, 120px ), 
                            particle-size( 30px ), particle-size-variance( 8px ), 
                            particles-per-second( 3 ), particles-per-second-variance( 2 ),
                            particle-lifespan-seconds( 14.0s ), particle-lifespan-seconds-variance( 1.5s ),
							particle-initial-velocity( 25px, -60px ), particle-initial-velocity-variance( 15px, 15px ),
							particle-velocity-min( -100px, -200px ), particle-velocity-max( 100px, 15px ),
							gravity-acceleration( 0px, 16px ),
							gravity-acceleration-particle-variance( 30px, 50px ),
							particle-start-color( #0f644e22 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #558fc800 ), particle-end-color-variance( #22111110 ),
						  particle-sharpness( 0.4 ), particle-sharpness-variance( 0.2 ),
							particle-flicker( 0.3 ), particle-flicker-variance( 0.2 )
                          );
	}
}


.ScreenSaverMode  #BackgroundMovie, .GamesRunning #BackgroundMovie
{
	z-index: -10000;

	animation-name: particle-system-anim-screensaver;
	animation-duration: 40.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;

	
//	background-image: url( "file://{movies}/Background1080p.webm" );
//	opacity: 0.3;

	width: 100%;
	height: 100%;
}

@keyframes 'particle-system-anim-screensaver'
{
	0%
	{
		background-color: particle-system( base-position( 180px, 1250px ), base-position-variance( 50px, 450px ), 
                            particle-size( 10px ), particle-size-variance( 15px ), 
                            particles-per-second( 18 ), particles-per-second-variance( 4 ),
                            particle-lifespan-seconds( 14s ), particle-lifespan-seconds-variance( 6s ),
							particle-initial-velocity( 110px, -70px ), particle-initial-velocity-variance( 15px, 15px ),
							particle-velocity-min( 60px, -100px ), particle-velocity-max( 200px, 15px ),
							gravity-acceleration( 0px, 26px ),
							gravity-acceleration-particle-variance( 40px, 60px ),
							particle-start-color( #164e7022 ), particle-start-color-variance( #11111111 ),
							particle-end-color( #2889c600 ), particle-end-color-variance( #33333333 ),
						  particle-sharpness( 0.3 ), particle-sharpness-variance( 0.3 ),
							particle-flicker( 0.8 ), particle-flicker-variance( 0.3 )
                          );
	}
	
//quickly moving left
	20%
	{
		background-color: particle-system( base-position( 1950px, 1300px ), base-position-variance( 10px, 300px ), 
                            particle-size( 188px ), particle-size-variance( 30px ), 
                            particles-per-second( 5 ), particles-per-second-variance( 1 ),
                            particle-lifespan-seconds( 6.5s ), particle-lifespan-seconds-variance( 1.0s ),
							particle-initial-velocity( -900px, -90px ), particle-initial-velocity-variance( 50px, 15px ),
							particle-velocity-min( -950px, -150px ), particle-velocity-max( 180px, -30px ),
							gravity-acceleration( 0px, -45px ),
							gravity-acceleration-particle-variance( 30px, 100px ),
							particle-start-color( #98802022 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #03423211 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.4 ), particle-sharpness-variance( 0.4 ),
							particle-flicker( 0.4 ), particle-flicker-variance( 0.2 )
                          );
	}
	
	//quickly moving left NEW
	25%
	{
		background-color: particle-system( base-position( 1950px, 1300px ), base-position-variance( 600px, 400px ), 
                            particle-size( 288px ), particle-size-variance( 30px ), 
                            particles-per-second( 2 ), particles-per-second-variance( 1 ),
                            particle-lifespan-seconds( 7.5s ), particle-lifespan-seconds-variance( 1.0s ),
							particle-initial-velocity( -500px, -70px ), particle-initial-velocity-variance( 50px, 15px ),
							particle-velocity-min( -950px, -150px ), particle-velocity-max( -150px, 0px ),
							gravity-acceleration( -50px, -45px ),
							gravity-acceleration-particle-variance( 30px, 20px ),
							particle-start-color( #98208333 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #218e9811 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.8 ), particle-sharpness-variance( 0.2 ),
							particle-flicker( 0.4 ), particle-flicker-variance( 0.2 )
                          );
	}

//slowly moving right
	65%
	{
		background-color: particle-system( base-position( 900px, 1180px ), base-position-variance( 200px, 100px ), 
                            particle-size( 44px ), particle-size-variance( 6px ), 
                            particles-per-second( 8 ), particles-per-second-variance( 10 ),
                            particle-lifespan-seconds( 3.0s ), particle-lifespan-seconds-variance( 0.5s ),
							particle-initial-velocity( 210px, -180px ), particle-initial-velocity-variance( 100px, 50px ),
							particle-velocity-min( 75px, -350px ), particle-velocity-max( 480px, -90px ),
							gravity-acceleration( 0px, 16px ),
							gravity-acceleration-particle-variance( 60px, 100px ),
							particle-start-color( #0f644e33 ), particle-start-color-variance( #01280122 ),
							particle-end-color( #0e295e00 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.2 ), particle-sharpness-variance( 0.4 ),
							particle-flicker( 0.6 ), particle-flicker-variance( 0.4 )
                          );
	}
	
//slowly moving right
	85%
	{
		background-color: particle-system( base-position( 900px, 1100px ), base-position-variance( 400px, 200px ), 
                            particle-size( 24px ), particle-size-variance( 6px ), 
                            particles-per-second( 14 ), particles-per-second-variance( 10 ),
                            particle-lifespan-seconds( 3.0s ), particle-lifespan-seconds-variance( 0.5s ),
							particle-initial-velocity( 180px, -650px ), particle-initial-velocity-variance( 100px, 50px ),
							particle-velocity-min( 75px, -750px ), particle-velocity-max( 480px, -90px ),
							gravity-acceleration( 0px, 16px ),
							gravity-acceleration-particle-variance( 60px, 100px ),
							particle-start-color( #0f644e66 ), particle-start-color-variance( #01280122 ),
							particle-end-color( #0e295e00 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.6 ), particle-sharpness-variance( 0.3 ),
							particle-flicker( 0.2 ), particle-flicker-variance( 0.2 )
                          );
	}	
	

	
//quickly moving left
	95%
	{
		background-color: particle-system( base-position( 1950px, 1300px ), base-position-variance( 80px, 80px ), 
                            particle-size( 188px ), particle-size-variance( 30px ), 
                            particles-per-second( 5 ), particles-per-second-variance( 1 ),
                            particle-lifespan-seconds( 3.5s ), particle-lifespan-seconds-variance( 1.0s ),
							particle-initial-velocity( -900px, -60px ), particle-initial-velocity-variance( 50px, 15px ),
							particle-velocity-min( -950px, -150px ), particle-velocity-max( 180px, -30px ),
							gravity-acceleration( 0px, -45px ),
							gravity-acceleration-particle-variance( 30px, 100px ),
							particle-start-color( #98802022 ), particle-start-color-variance( #01280110 ),
							particle-end-color( #03423211 ), particle-end-color-variance( #01111110 ),
						  particle-sharpness( 0.4 ), particle-sharpness-variance( 0.4 ),
							particle-flicker( 0.4 ), particle-flicker-variance( 0.2 )
                          );
	}
	

}

// we can author a new particle system here if we want
.LoginMode #BackgroundMovie
{
	animation-name: particle-system-anim-screensaver;
}

BackgroundVideoPanel.IngameOverlayBackground #BackgroundMovie
{
	background-image: url( "file://{images}/overlay/overlay_bg_wash.png" );
	saturation: 0.7;
	background-size: 100%;
	opacity: 0.95;
}

BackgroundVideoPanel.IngameOverlayBackground.GhostMode #BackgroundMovie,
{
	visibility: collapse;
}

BackgroundVideoPanel.IngameOverlayBackground.GhostMode
{
	background-color: #00000000;
}

BackgroundVideoPanel #BackgroundThrobber
{
	align: center center;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
}

BackgroundVideoPanel.SteamOS.GamesRunning #BackgroundThrobber
{
	opacity: 1.0;
	animation-name: gamesrunning-throbber-anim;
	animation-duration: 5.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
		
}

BackgroundVideoPanel.SteamOS.GamesRunning.HideThrobber #BackgroundThrobber
{
	opacity: 0.0;
}

BackgroundVideoPanel.SteamOS.Windows.GamesRunning #BackgroundThrobber,
BackgroundVideoPanel.SteamOS.OSX.GamesRunning #BackgroundThrobber
{
	// we might run -steamos on other actual platforms, don't show the throbber since doesn't make sense as focus 
	// restores interactivity
	opacity: 0.0;
}

@keyframes 'gamesrunning-throbber-anim'
{
	0%
	{
		opacity: 0.0;
	}
	
	95%
	{
		opacity: 0.0;
	}
	
	100%
	{
		opacity: 1.0;
	}
	
}