@charset 'utf-8';

.titlecard-container		{
	position:	absolute;
	top:		calc(var(--menubar-height) + calc(var(--mb-border-width) * 2));
	left:		0;
	width:		var(--titlecard-width);
	height:		var(--titlecard-height);
	clear:		both;
	float:		left;
	overflow:	hidden;
	border:		var(--titlecard-bwidth) solid grey;
	border-radius:	var(--titlecard-bradius);
/*
background-color: purple; 
*/
}
div[class^="title"]		{
	position:	relative;
 	opacity:	0;
	animation:	fade-in 2s ease-out 0.5s 1 forwards;
}
div[class^="title"] > h1 	{
	font-size:	4vw;
	text-shadow:	2px 2px gray;
}
.title-left        		{
	position:	absolute;
 	opacity:	0;
	top:		calc(var(--titlecard-height) * 0.3);
	left:		5%;
	/*  1/2 the width of the container minus the indent.
	    height will be determined by the font size used
	    in the <h1> tag.
	*/
	width:		calc(var(--titlecard-width) * 0.33);
 	text-align:	left;
	animation:	fade-in 2s ease-out 0.5s 1 forwards;
}
.image-right       		{
	position:	absolute;
	top:		2vw;
	left:		calc(var(--titlecard-width) * 0.62);
	opacity:	0;
	width:		calc(var(--titlecard-width)  * 0.3);
	height:		calc(var(--titlecard-height) * 0.71);
        box-shadow: 	8px 8px 8px grey;
 	border: 	10px solid black;   
	border-radius:	14px;
	animation:	fade-in 2s ease-out 0.5s 1 forwards;
}
div[class^="image"] > img	{
	width:		100%;
	height:		auto;
	margin-bottom: -4px;
}

/*  Provides the rolling shade effect. It works because
    of absolute positioning. "block" class is virtual.
*/
.block-effect			{
	position:		absolute;
	top:			0;
	left:			0;
	width:			100%;
	height:			var(--titlecard-height);
	background-color:	rgba(0, 0, 0, 0.3);
	transform-origin:	center left;
 	transform:		scaleX(0);
 	animation:		shadewave 2.5s ease-out 0s 1 forwards;
}

.titlecard-container > img	{
	position:		absolute;
	top:			0;
	left:			0
	width:			var(--titlecard-width);
	height:			auto;
/*
	object-fit:		cover;
	object-position:	center;
*/
/*
	transform:		scale(.2);
*/
	-webkit-filter: 	blur(var(--titlecard-blur));
	filter: 		blur(var(--titlecard-blur));
/* 	animation: 		img-out 2s ease-out 0s 1 forwards;  */
}

@keyframes shadewave	{
	to {	transform: scaleX(1);
}	   }
@keyframes fade-in	{
	to {	opacity: 1;
}	   }
@keyframes img-out {
	to {	transform: scale(1);
}	   }




/*  Defines the animation start point.

.titlecard-container > div.block-effect {
	transform-origin: center left;
}*/
.titlecard-container > div.block-right {
	transform-origin: center right;
}
.titlecard-container > div.block-center {
	transform-origin: center center;
}