/*	style-home.css
	--------------
	JS 1dec22 - this is a separate css file for the homepage aka frontpage.
	See also home.php and home.js
*/

/* ----------------------------------------------------------------- */
/* Frontpage - Homepage - the old layout from before 2022 */
/* ----------------------------------------------------------------- */

.frontpage-text, .project-text, .project-credits, .project-credits-new {
	clear:both;
	padding:5px 0px 10px 0px;
}

.frontpage-text-main { }

/* the frontpage text gets a thicker font to give it more body */
/* JS 11aug21 - lets NOT do that, it looks odd. */
.frontpage-compact {
	width:85%; line-height:150%; text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding:5px 0;
	
	text-align:justify; /* JS 11aug21 - justify align the text */
}

/* JS 11aug21 - add some extra margins above and below the intro text */
.frontpage-compact P:first-child {
	margin:15px 0;
}

.frontpage-text A {
	color:#222;
	text-decoration:none;
	margin:0 -2px;
	padding:0 2px;
}

.frontpage-text A:hover {
	color:#fff;
	background:#222;
	text-decoration:none;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.frontpage-text HR {
	margin:15px 0px;
}

.frontpage-col-def { float:left; width:258px; }
.frontpage-col-alt { float:left; width:240px; }
.frontpage-spacer  { width:100%; display:block; clear:both; }

/* ----------------------------------------------------------------- */
/* Frontpage - the new 2022 layout */
/* ----------------------------------------------------------------- */

/* JS 23nov22 - the vimeo loop DIVs */
DIV.fp-vimeo-loop { display:block; overflow:hidden; border-radius:3px; }

/* this is the primary text on the 2022 frontpage */
DIV.frontpage-primary-2022 			{ padding:0px 180px; font-size:28px; }
DIV.frontpage-primary-2022 P		{ margin:40px; line-height:200%; }

/* animated button on homepage */
DIV.frontpage-primary-2022 A		{ font-family: var(--fontHead); background-color:var(--colBack); padding:0 2pt 0 0; transition: padding 0.2s; }
DIV.frontpage-primary-2022 A:hover	{ border-radius:40px; color:#fff; background-color:var(--colTheme); padding:0 12px; transition: padding 0.2s; }

/* the floating box with the vimeo items in it */
DIV.fp-2022-project {
	padding-bottom:40px;
}

DIV.fp-2022-summary {
	padding-bottom:5px;
	line-height:200%;
}

/* A HREF links on the frontpage, for the vimeo loops */
A.fp-2022 {
	margin:0;
	padding:0;
	text-decoration:none;
}

A.fp-2022:hover {
    /*color: #666 !important;*/
    color: initial !important;
    background: initial !important;
    border: initial !important;
}

/* the "full story >" button */
.fp-2022-link {
	border-radius: 30px;
	padding: 5px 0px;

	background-color:var(--colBack);
	color:var(--colTheme);
	
	transition: padding 0.2s, background-color 0.1s, color 0.1s;
}

.fp-2022-link-hover {
	border-radius: 30px;
	padding: 5px 20px;
	
	background-color:var(--colTheme); 
	color:var(--colBack);  

	transition: padding 0.2s, background-color 0.1s, color 0.1s;
}


/* ---------------------------------------------------------------------- */
/* JS 24nov22 - motoko loader screen on new '2022' homepage. see home.php */
/* ---------------------------------------------------------------------- */

/* the DIV that fills up the entire screen */
#motoko-loader-screen { 
	position:fixed; 
	width:100%; 
	height:100%; 
	left:0; top:0; 
	background:var(--colBack); /* #f7f7f7 #222 */
	z-index:101;
	display:block;
}

/* JS 16mar25 - we add a new box with the message that motoko stopped business. */
#motoko-ends-business-box { 
	width:640px; 
	height:300px; 
	position:absolute; 
	margin:auto;
	left:0; top:0; right:0; bottom:0; 
	overflow:visible;
	color:#fff;
	text-transform:initial;
	font-weight:normal;
	font-family: var(--fontBody);
	font-size:17px;
	padding: 20px;
	border-radius: 20px;
	background: #333;
}
#motoko-ends-business-box IMG { width:50px; height:50px; margin:0; }
.motoko-ends-center { width:100%; text-align:center; }
/* the [continue to motoko.nl] button */
#motoko-ends-business-box A {
	color: #000;
	text-decoration: none;
	background: #FFF;
	display: inline-block;
	padding: 8px 16px;
	border-radius: 30px;
	font-family: var(--fontHead);	
	margin-top:10px;
}
#motoko-ends-business-box A:hover {
	background:#ddd;
}

/* the small centered box holding the logo - this will be animated. */
#motoko-loader-box { 
	width:64px; 
	height:64px; 
	position:absolute; 
	margin:auto;
	left:0; top:0; right:0; bottom:0; 
	overflow:hidden; 
	animation-name:animate-loader-wait; 
	animation-duration:1.5s; 
	animation-iteration-count:infinite; 
	animation-timing-function:ease; 
}

/* animate the clipping of the small box holding the logo */
/* clip: rect(0px,64px,16px,0px); */
/* new clipping method - see https://bennettfeely.com/clippy/ */
@keyframes animate-loader-wait {
	0%		{ clip-path: inset(0 0 100% 0); } 	/* start invisible; fully clipped from the bottom */
	50%		{ clip-path: inset(0 0 0 0); } 		/* clipping animated from top to bottom, now fully visible */
	100%	{ clip-path: inset(100% 0 0 0); } 	/* clip from top to bottom, now invisible again */
}

/* the IMG src with the logo inside the centered box */
#motoko-loader-progress { 
	width:100%; 
	height:100%; 
	line-height:0; 
	display:block; 
}

/* this class will be set to #motoko-loader-screen once the page had loaded, and will hide the loader screen using a fade out animation */
.motoko-loader-hide {
	animation-name:animate-loader-hide; 
	animation-duration:0.5s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0.3, 0, 0.2, 1); /* ease-out | ease */
	animation-fill-mode: forwards;	
}

@keyframes animate-loader-hide {
	0%		{ display:block; clip-path: inset(0 0 0 0); } /* full visible */
	99%		{ display:block; clip-path: inset(100% 0 0 0); } /* fully invisible */
	100%	{ display:none; clip-path: inset(100% 0 0 0); } /* fully invisible */
}

/* ---------------------------------------------------------------------- */
/* animate the buttons and texts when page has loaded. */
/* ---------------------------------------------------------------------- */

.fp-animate-init { padding:10px 0 0px 0; opacity:0; }

.fp-animate-play {
	animation-name:animate-fp-item; 
	animation-duration:0.4s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0, 0, 0.3, 1); /* ease-out | ease */
	animation-fill-mode: forwards;	
}

@keyframes animate-fp-item {
	0%		{ opacity:0; padding:10px 0 0px 0; }
	100%	{ opacity:1; padding:0px 0 10px 0; }
}