/* Styles for library background on main menu */

/*@define bgcolor: #0d1921ff;
@define bgcolorwash: #3a9fdea0;
@define bgcolorwashmedium: #3a9fde60;
@define bgcolorwashlight: #3a9fde25;*/

#LibraryMostRecent
{
	width: 1920px;
	height: 1080px;
	opacity: 1.0;

	perspective-origin: 62% 5% invert;

}

#MostRecentBackgroundWrapper
{ 
	perspective: 1000;
	z-index: -1000.0;

	perspective-origin: 62% 5% invert;
}

#MostRecentBackground
{
	width: 1920px;
	height: 1080px;
	perspective-origin: 62% 5% invert;
	transition-property: transform, saturation, opacity, position, blur, opacity-mask;
	transition-duration: 0.35s;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 1.0;

}

.MostRecentCarousel
{
	animation-name: library-perspective;
	animation-duration: 20s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

	perspective: 1000;
	width: 3500px;
	height: 1080px;
	overflow: noclip clip;
	transform: translatex( -150px ) translatey( 0px ) translatez( -100px );
	opacity: 1.0;

	transition-property: saturation, opacity, position, blur, transform, wash-color, pre-transform-scale2d, opacity-mask;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;

	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 1.0;
}

#LibraryMostRecent #CarouselGlow
{
	perspective: 1000;
	width: 3500px;
	height: 1080px;
	overflow: noclip clip;
	transform: translatex( -150px ) translatey( 0px ) translatez( -100px );
	opacity: 0.0;

	background-image: url( "file://{images}/carousel_bg.png") ;
	background-size: 1920px 400px;
	background-repeat: no-repeat;
	background-position: center;

	transition-property: saturation, opacity, position, blur, transform, wash-color, pre-transform-scale2d, opacity-mask;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

#LibraryMostRecent:descendantfocus #CarouselGlow
{
	position: -790px -10px -220px;
	animation-name: none;
	perspective-origin: 50% 50%;
	pre-transform-scale2d: 1.00;

	transform: translatez( -600px ) translatey( -250px );
}

#LibraryMostRecent #CarouselGlow.Visible
{
	position: -790px -120px -220px;
	transform: translatez( 0px );
	opacity: 1.0;
}

#LibraryMostRecent:descendantfocus .MostRecentCarousel
{
	position: -790px -10px -220px;
	animation-name: none;
	perspective-origin: 50% 50%;
	pre-transform-scale2d: 1.00;
	saturation: 0.5;
	opacity: 0.9;
	wash-color: bgcolorwashlight;

}

#LibraryMostRecent.NoRecentGames .MostRecentCarousel,
#LibraryMostRecent.NoRecentGames:descendantfocus .MostRecentCarousel
{
	opacity: 0.0;
}

#LibraryMostRecent:descendantfocus .MostRecentCarousel .RecentApp,
#LibraryMostRecent:descendantfocus .MostRecentCarousel #CarouselTitle,
.AboveLibraryDetailsView .RecentApp,
.AboveLibraryDetailsView #CarouselTitle 
{
	opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 1.0;
}

#MenuRow.MenuRow:descendantfocus .MostRecentCarousel
{
	position: -6700px -130px 0px;
}

#LibraryMostRecent:descendantfocus .MostRecentCarousel .RecentApp #AppImage
{
	opacity: 1.0;
	saturation: 0.8;
	wash-color: #00000011;
}

#LibraryMostRecent:descendantfocus .MostRecentCarousel:descendantfocus .RecentApp:focus #AppImage,
{
	opacity: 1.0;
	saturation: 1.0;
	wash-color: #00000000;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


#LibraryMostRecent:descendantfocus .MostRecentCarousel:hover
{

	animation-name: none;
	perspective-origin: 50% 50%;
	pre-transform-scale2d: 1.04;
}

#LibraryMostRecent:descendantfocus .MostRecentCarousel:descendantfocus
{
	position: -790px -120px 0px;
	animation-name: none;
	perspective-origin: 50% 50%;
	pre-transform-scale2d: 1.0;
	opacity: 1.0;
	saturation: 1.0;
	wash-color: none;
	height: 1080px;

}

#LibraryMostRecent:descendantfocus .MostRecentCarousel:descendantfocus .RecentApp,
#LibraryMostRecent:descendantfocus .MostRecentCarousel:descendantfocus #CarouselTitle 
{
	opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.0;
}


@keyframes 'library-perspective'
{
	from
	{
		perspective-origin: 60% 50% invert;
	}

	10%
	{
		perspective-origin: 64% 52% invert;
	}

	15%
	{
		perspective-origin: 64% 52% invert;
	}
	
	25%
	{
		perspective-origin: 66% 55% invert;
	}

	50%
	{
		perspective-origin: 68% 60% invert;
	}

	75%
	{
		perspective-origin: 63% 52% invert;
	}

	80%
	{
		perspective-origin: 63% 52% invert;
	}

	to	
	{
		perspective-origin: 60% 50% invert;
	}
}

.MostRecentBaseVisible 
{
	transform-origin: 0% 0% parent-relative;
	transform: rotateZ( -32deg ) rotateX( 30deg ) translate3d( 64px, 600px, 330px );
	opacity: 1.0;	
}

.LibraryVisible:descendantfocus .MostRecentBaseVisible
{
	transform-origin: 0% 0% parent-relative;
	transform: rotateZ( 0deg ) translate3d( 0px, 0px, 0px );
	opacity: 1.0;
}


.MostRecentBaseInvisible
{
	opacity: 0.0;
}

.MostRecentTransitionDownAndOff
{
	transform-origin: 0% 0% parent-relative;
	transform: translateY( 800px ) translateZ( 0px ) rotateZ( -32deg ) rotateX( 30deg ) translate3d( 0px, 580px, 230px ) ;
	saturation: 0.7;
	opacity: 0.0;
}

.MostRecentTransitionLeftAndOff
{
	transform-origin: 0% 0% parent-relative;
	transform: translateX( -1000px ) translateY( 200px ) translateZ( 0px ) rotateZ( -32deg ) rotateX( 30deg ) translate3d( 0px, 580px, 230px ) ;
	saturation: 0.7;
	opacity: 0.0;
}

.MostRecentTransitionRightAndOff
{
	transform-origin: 0% 0% parent-relative;
	transform: translateX( 1200px ) translateY( -100px ) translateZ( 0px ) rotateZ( -32deg ) rotateX( 30deg ) translate3d( 0px, 580px, 230px );
	saturation: 0.7;
	opacity: 0.0;
}

.RecentApp
{
	opacity: 0.0;
	pre-transform-scale2d: 0.57065;
	blur: gaussian( 8, 8, 2 );

	saturation: 0.5;
	wash-color: bgcolorwashlight;
	border-radius: 2px;
}

.LibraryPanel:descendantfocus .RecentApp
{
	border-radius: 0px;
	wash-color: white;
	opacity: 1.0;
	saturation: 1.0;
	box-shadow: none;
	blur: none;
}

.MostRecentCarousel:descendantfocus .RecentApp
{
	transform: translatex(0px);
	opacity: 1.0;
	blur: none;
	saturation: 1.0;
	wash-color: white;
	pre-transform-scale2d: 1.0;
	//	transition-duration: 0.3s;
	transition-property: transform, pre-transform-scale2d, background-color, position, border, opacity, blur, pre-transform-scale2d, opacity-mask;
}

.RecentApp0
{
	transform: translate3d( 736px, -99px, 150px );
	saturation: 1.0;
	wash-color: none;
	blur: none;
	opacity: 1.0;

	transition-property: opacity;
}

.RecentApp3
{
	transform: translate3d( 948px, 68px, 20px );
	saturation: 0.7;
	wash-color: bgcolorwashmedium;
	blur: none;
	opacity: 1.0;
}

.RecentApp12
{
	transform: translate3d( 646px, 29px, -150px );
	saturation: 0.6;
	wash-color: bgcolorwashmedium;
	blur: gaussian( 0.9 );
	opacity: 0.9;

}

.RecentApp11
{
	transform: translate3d( 938px, 176px, -200px );
	blur: gaussian( 1.6 );
	visibility: visible;
	opacity: 0.8;
	wash-color: bgcolorwashmedium;

}

.RecentApp7
{
	transform: translate3d( 908px, -58px, -200px );
	blur: gaussian( 1.25 );
	visibility: visible;
	opacity: 0.9;
	saturation: 0.8;
	wash-color: bgcolorwashmedium;
}

.RecentApp2
{
	transform: translate3d( 626px, 348px, -490px );
	blur: gaussian( 1.6 );
	visibility: visible;
	opacity: 0.8;
	wash-color: bgcolorwashmedium;
}

.RecentApp13
{
	transform: translate3d( 848px, -176px, -380px );
	blur: gaussian( 1.8 );
	visibility: visible;
	opacity: 0.9;
	saturation: 0.5;
	wash-color: bgcolorwashmedium;
}

.RecentApp8
{
	transform: translate3d( 566px, -296px, -230px );
	blur: gaussian( 1.3 );
	visibility: visible;
	opacity: 0.9;
	saturation: 0.6;
	wash-color: bgcolorwashmedium;
}

.RecentApp14
{
	transform: translate3d( 696px, -300px, -440px );
	saturation: 0.2;
	wash-color: bgcolorwashmedium;
	blur: gaussian( 2.0 );
	opacity: 0.3;
}

.RecentApp15
{
	transform: translate3d( 226px, 150px, -700px );
	blur: gaussian( 2.5 );
	opacity: 0.2;
	saturation: 0.1;
	wash-color: bgcolorwashmedium;
}

.RecentApp10
{
	transform: translate3d( 446px, 270px, -600px );
	blur: gaussian( 2.5 );
	opacity: 0.2;
	saturation: 0.1;
	wash-color: bgcolorwashmedium;
}

.RecentApp6
{
	transform: translate3d( 394px, 240px, -200px );
	saturation: 0.4;
	opacity: 0.6;
	wash-color: bgcolorwashmedium;
	blur: gaussian( 0.5 );
}

.RecentApp4
{
	transform: translate3d( 260px, -240px, -270px );
	saturation: 0.4;
	opacity: 0.4;
	wash-color: bgcolorwashmedium;
	blur: gaussian( 1.2 );
}

.RecentApp1
{
	transform: translate3d( 424px, 50px, 56px );
	blur: gaussian( 0.3 );
	saturation: 0.7;
	visibility: visible;
	wash-color: bgcolorwashmedium;
	opacity: 1.0;
}

.RecentApp5
{
	transform: translate3d( 354px, -55px, 150px );
	wash-color: bgcolorwash;
	blur: gaussian( 1.2 );
	visibility: visible;
	opacity: 1.0;
	saturation: 0.4;

	/*	animation-duration: 2.4s;
	animation-name: LibraryImage1;
	animation-iteration-count: 1;
*/
}

.RecentApp9
{
	transform: translate3d( 192px, 110px, 26px );
	saturation: 0.4;
	wash-color: bgcolorwashmedium;
	blur: gaussian( 1.5 );
	visibility: visible;
	opacity: 0.8;


}