/* ROOT */

	@import url("./globals.css");

/* LAYOUT */

	body.home main {
	    display: flex;
	    align-items: center;
	    justify-content: center;

	    margin-top: 0;
	    
	}	
	body.home main .entry-content{
		max-width: 600px;
		padding: 0;
	}

/* BACKGROUND */

	#bg{
		position: absolute; width: 100%; height: 100%; top: 0; left: 0;

	    background-image: url('../img/background_large.jpg');
		background-repeat: no-repeat;
		/* background-size: 100% auto; */
		background-size:  auto 100%;
		background-position: 50% 0%;
	    z-index: 0;

	    transition: opacity 1s;

	    mask-repeat: no-repeat;
	    mask-position: center center;
		mask-size: auto 100%;
		mask-image: url('../img/masks/mask-03.png');
	}

	#bg::before{
		content: "";
		position: absolute; width: 100%; height: 100%; top: 0; left: 0;
		background: linear-gradient(0deg, var(--colorC) 0%, rgba(0, 0, 0, 0) 25%);	
		z-index: 1;
	}

	#bg::after{
		content: "";
	    background-image: url('../img/patterns/dark-mesh.png');
	    position: fixed; width: 100%; height: 100%; top: 0; left: 0;
	    z-index: 3;
	    opacity: 0.5;
	}

	/* HIDE UNTIL READY */
		#bg{
			opacity: 0;
		}

		.ready #bg{
			opacity: 1;
		}

	@media (max-aspect-ratio: 16/9) {
	 	#bg{
	    	mask-size: 100% 100%;
	    }
	}
	@media  (max-width: 599px) {
	    #bg{
	    	/* background-size: cover; */
	    }
	    .ready #bg{
	     	opacity: 0.66;
	    }
	    #bg::before{
			background: linear-gradient(0deg, #020a0e 0%, rgba(0, 0, 0, 0) 50%);	
		}
	}

/* START CONTENT */

	#start_content{
		opacity: 0;
		transition: opacity 0.5s;
		left: 0;
		padding-top: 6.66rem;

		/* position: absolute; */
	}

	:root .home :where(.is-layout-constrained) > * {
	    margin-block-start: 0;
	    margin-block-end: 0;
	    width: 100%;
    	max-width: 100%;
	}

	.ready #start_content{
		display: block !important;
	}
	.splash_ready #start_content{
		opacity: 1;
	}

	#start_content .display-posts-listing{
		max-width: 100%;
		/* width: 50%; */
	}

	#start_content .listing-item{
		margin-bottom: 0em;
		border-color: transparent;
	}
	#start_content .listing-item *{
		display: block;
		width: 100%;
		text-align: center;

		cursor: pointer;
	}

	#start_content .listing-item .excerpt-dash{
		opacity: 0;
	}

	#start_content .listing-item .excerpt{
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.5s;

		border-radius: 0.5em;
		border: 1px solid var(--color4);
		background: #00000033;
		overflow-y: auto;

		color: var(--color5) !important;
	}

	#start_content .listing-item:hover .excerpt-dash{
		opacity: 1;
		max-height: initial;
	}

	#start_content .listing-item:hover .excerpt{
		opacity: 1;
		max-height: 6em;

		
	}

	#start_content .listing-item:hover .title{
		transition: color 0.5s;
		color: var(--color3);
	}

	#start_content .listing-item .excerpt-content{
		margin: 1em;
		width: calc(100% - 2em);

		/* CLAMP */
    	/*
    	padding: 0;
    	max-height: 4em;

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;  
		overflow: hidden;
		text-overflow: ellipsis;
		*/

	}

	#start_content .display-posts-listing .title,
	#start_content .display-posts-listing .wp-block-post-title{
		font-size: 3rem;
	}
	#start_content .display-posts-listing .wp-block-post-subtitle{
		font-size: 1rem;
	}
	#start_content .display-posts-listing .split_title .wp-block-post-subtitle{
		margin-bottom: 0.33rem;
	}

	#start_content .display-posts-listing .listing-item a{
		text-decoration: none !important;
	}


/* EFFECTS */
	
	/*
	#start_content .display-posts-listing .excerpt{
	    clip-path: inset(0 0 100% 0);
		-webkit-clip-path: inset(0 0 100% 0);
	}
	*/

	#start_content .display-posts-listing .listing-item{
		position: relative;
		overflow: hidden;
		padding-top: 0;
    	padding-bottom: 0;
	}

	#start_content .display-posts-listing .excerpt::before{
	    content: "";
	    width: 260%;
	    height: 260%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    margin-left: -80%;
	    margin-bottom: -80%;
	    background: url(../img/logo_trn_blk.png);
	    background-size: contain;
	    background-repeat: no-repeat;
	    background-position: center center;
	    pointer-events: none;
	    opacity: 0.5;
	    transition: all 0.5s;
	    -webkit-animation-name: rotate;
	    -webkit-animation-duration: 3s;
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
	    z-index: -1;
	}