/* Styles for store background on main menu */

#StoreBackgroundWrapper
{
	z-index: -1000.0;
	opacity: 0.0;
}

.FrontPageLoaded #StoreBackgroundWrapper
{
	opacity: 1.0;
}

#StoreBackground
{
	perspective: 1000;
	width: 1920px;
	height: 1080px;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 1.0;

	transition-property: transform, opacity, position, opacity-mask;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;

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

}


.StoreBackgroundBaseVisible
{
	visibility: visible;
	opacity: 1.0;	
}

.StoreBlocked #StoreBackground
{
	visibility: collapse;
}

.WebBrowserActive #StoreBackground.StoreBackgroundBaseVisible
{
	transition-property: transform, opacity, position, opacity-mask;
	transition-duration: 0.4s;
	transform: translateY( -162px );
	animation-name: none;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 0;
}

.StoreBackgroundBaseInvisible
{
	visibility: collapse;
}

.StoreBackgroundTransitionDownAndOff
{
	saturation: 0.7;
	opacity: 0.0;
}

.StoreBackgroundTransitionLeftAndOff
{
	saturation: 0.7;
	opacity: 0.0;
}


@keyframes 'store-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;
	}
}

.StoreImage
{
	horizontal-align: left;
	vertical-align: center;
	visibility: collapse;
	opacity: 0.0;
	saturation: 0.5;
	wash-color: bgcolorwashmedium;
	flow-children: down;
	box-shadow: fill dark_box_shadow_color 20px 20px 40px -44px;
	opacity-mask: none;

	// Original image size without padding is 616x353, we squish down to fit more here,
	// but use the full images so we can transition into large view in the store.

	// Trick to add transparency around images which will get composition layers and then
	// interpolate edges alpha, stops texture crawl as they transform as the effect is like
	// antialiased edges even on a transform of the parent due to the fuzzy edges.
	padding: 4px 8px;
	margin: -4px -8px;

	border-width: 5px;
	border-style: solid;
	border-color: transparent;

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