@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Space+Grotesk:wght@300..700&display=swap');

:root
{
	--splashBlur: 0px;
	--splashOpacity: 100%;
	--splashGradOpacity: 0.0;
	--loadDelay: 0s;
    --loadDur: 1s;
    --loadCol1: rgba(110,110,110,25%);
    --loadCol2: rgba(110,110,110,15%);
	--logoContainerHeightPercent: 25%;
}

body
{
    margin: 0;
    padding: 0;
	font-family: 'Source Sans 3', 'sans-serif';
}

h2
{
	font-family: 'Space Grotesk', 'sans-serif';
}

h3
{
	font-family: 'Space Grotesk', 'sans-serif';
}

.splash
{
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	
    display: block;
    padding: 0px;
	
	user-select: none;
	
	z-index: -3;
	
	filter: blur(var(--splashBlur));
	opacity: var(--splashOpacity);
}

#index-main-overlay
{
	z-index: 0;
    --gradMid: calc(var(--logoHeightPercent) * 1.625);
    --gradEnd: calc(var(--logoHeightPercent) * 4);
}

.index-overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: linear-gradient(180deg, rgba(255, 255, 255, var(--splashGradOpacity)) 0%, rgba(255, 255, 255, var(--splashGradOpacity)) var(--gradMid), rgba(255,255,255,0) var(--gradEnd));

	pointer-events: none;
}

.splash-portrait
{
	display: none;
	height: 85vh;
	width: auto;
}

.splash-landscape
{	display: none;
	width: 100%;
	height: auto;
	max-height: 85vh;
	
	object-fit: contain;
}


/*
@media screen and (min-aspect-ratio: 9/6)
{
    .splash-portrait {
      display: none;
    }.splash-landscape {
        display: inherit;
      }
}
@media screen and (max-aspect-ratio: 9/6)
{
    .splash-portrait {
        display: inherit;
    }.splash-landscape {
        display: none;
      }
}
*/

#index-splash-videos {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}


#index-splash-videos
{
	opacity: 100%;
	transition-property: opacity;
	transition-duration: 0.5s;
}

.video-showing #index-splash-videos {
	opacity: 0%;
	transition-duration: .75s;
}

#index-splash-videos video {
	height: 100%;
	max-height: 100dvh;
	width: 100%;


	opacity: 0%;
	transition-property: opacity;
	transition-duration: .125s;
}

#index-splash-videos video.show
{	
	opacity: 100%;
	transition-duration: .5s;
}


@media screen and (min-aspect-ratio: 1/1)
{
	#index-splash-videos
	{
		width: 100%;
	}

    #index-splash-videos .flanker
	{
      visibility: visible;
    }
	#index-splash-videos video
	{
		object-fit: cover;
	}
	#index-vision
	{
		margin-bottom: 2em;
	}
}
@media screen and (max-aspect-ratio: 1/1)
{
	#index-splash-videos
	{
		width: 300%;
	}
    #index-splash-videos .flanker
	{
      visibility: hidden;
    }

	#index-splash-videos video {
		object-fit: cover;
	}
	#index-vision {
		margin-bottom: 5em;
	}
}

#index-body
{
	max-width: 900px;
	font-size: 1.5rem;
	margin-top: 85vh; /* fallback */
	margin-top: 85dvh;
	
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
}

#index-main
{
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	
	min-height: 100vh; /* fallback */
	min-height: 100dvh;

	padding: 2em 2em 1em 2em;
}

@keyframes index-logo-anim {
    0% {
        transform: translateY(-85vh); /* fallback */
		transform: translateY(-85dvh);
    }
    100% {
        transform: translateY(0vh); /* fallback */
        transform: translateY(0dvh);
    }
}

#index-logo-container
{
	width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	position: sticky;
	top: 0em;
	padding-top: 1em;
	
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 2rem;
	user-select: none;
	
	background-color: clear;

	z-index: 2;
}

#index-logo-container.from-profile
{
    animation-name: index-logo-anim;
    animation-duration: .625s;
    animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

#index-logo-container.stuck
{
	background-color: white;
}

#index-human-powered
{
	margin-top: -1%;
	font-size: calc(min(5vw, 2.25rem));
	font-weight: 600;
}

#index-logo
{
	width: calc(min(75%, 450px));
	height:auto;
}

#index-copy
{
	text-align: left;
}

.index-copy-item
{
	margin-bottom: 5em;
}

#index-vision {
	width: 100%;
	border: none;

	opacity: 0%;
	transition-property: opacity;
	transition-duration: .5s;
}


#index-vision.show {
	opacity: 100%;
	transition-duration: .75s;
}

#index-vision iframe {
	width: 100%;
	aspect-ratio: 16/9;
	border: none;
}

#index-human-powered, .index-copy-item *
{
	opacity: 0%;
	
	transition-property: opacity;
	transition-duration: .5s;
}

#index-human-powered.show, .index-copy-item *.show
{
	opacity: 100%;
	transition-duration: .75s;
}

#index-footer
{
	width: 100%;
	font-size: .875em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 2em;
}

#index-footer a
{
	width: calc(min(75%, 250px));
	text-align: right;
}

#index-tc-logo
{
	margin-left: auto;
	width: 100%;
	height: auto;
}


/*
.user-speech::before
{
	content: '"';
}

.user-speech::after
{
	content: '"';
}
*/

.details-container
{
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	
	margin-bottom: 2em;
}


.details-copy
{
	top: 0;
	left: 0;
	height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	flex-basis: 67%;
}

#summary
{
	height:100%;
	text-align: right;
	max-width: 55%;
}


.profile-body
{
	max-width: calc(min(90vw, 1000px));
	margin: 2em auto;
	text-align: center;
	font-size: calc(min(4vw, 1.25em));
}

.logo
{
	margin-bottom: 2em;
	width: calc(min(75%, 450px));
	height: auto;
}


.user-action
{
	font-style: italic;
}

@keyframes loadingColors {
    0% {
        background-color: var(--loadCol1);
    }
    50% {
        background-color: var(--loadCol2);
    }
    100% {
        background-color: var(--loadCol1);
    }
}

.loading {
	display: inline-block;
    color: transparent;
    animation-name: loadingColors;
    animation-duration: var(--loadDur);
    animation-delay: var(--loadDelay);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    margin: 0 0 .25em 0;
    border-radius: .5em;
	user-select: none;
}

@keyframes revealContent {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

.content-reveal
{
	color: black;
	background-color: transparent;
	
    animation-fill-mode: both;
    animation-name: revealContent;
    animation-duration: 1s;
    animation-delay: var(--contentRevealDelay);
    animation-iteration-count: 1;
}

.username
{
	font-weight: bold;
}

#task-list
{
	display: grid;
}

.task-header-container
{
	display: flex;
	justify-content: start;
	
	cursor: pointer;
	user-select: none;
}


.task
{
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: space-between;
	
	overflow: hidden;
	height: 100%;
}

.task-bar
{
	height: 0vh;
	width: 100%;
		
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: start;
	gap: 1em;
	z-index: -1;
	
	margin-left: 2em;
	transform: translateX(-6.25vw);
	opacity: 0%;
	
	transition-property: height, transform, opacity;
	transition-duration: .25s, .25s, .125s;
	
	user-select: none;
	overflow: hidden;
}


.show .task-bar
{
	user-select: auto;
	transform: translateX(0);
	opacity: 100%;
	
	height: 50vh;
}

.task-details
{
	max-width: 33%;
}

.task-details-header
{
	font-size: 1.125em;
	margin-bottom: .25em;
	
	font-weight: 500;
}

.task-details-copy
{
	margin-bottom: 1em;
}

.task-image-container
{
	display: grid;
}

.task-image
{
	display: inline-block;
	grid-row: 1;
	grid-column: 1;
	
	width: auto;
	max-height: 45vh;
	
	border-radius: 6.25%;
	object-fit: contain;
	
	z-index: -5;
}

.task-image.active-image
{
	z-index: -1;
}

.task-foldout
{
	display: inline-block;
	transform: rotate(0);
	
	transition-property: transform;
	transition-duration: .25s;
}

.show .task-foldout
{
	transform: rotate(90deg);
}


.task-header
{
	margin-left: .25em;
	transition-property: margin-left;
	transition-duration: .25s;
}

.show .task-header
{	
	margin-left: 1em;
}

#testimonials
{
	margin-top: 1em;
	margin-bottom: 2em;
	display: grid;
	max-width: 100%;
	
	text-align: right;
}

.testimonial
{
	grid-row: 1;
	grid-column: 1;
	font-size: 1.125em;
	font-weight: 300;

	opacity: 0%;
	pointer-events: none;

	transition-property: opacity;
	transition-duration: 1s;
}

.testimonial.show
{
	opacity: 100%;
}

.testimonial-quote:before,.testimonial-quote:after
{
	content: '"';
}

.testimonial-quote
{
	font-style: italic;
}

.testimonial
{
	
}

#score
{
	font-weight: bold;
}

@keyframes loadingImgColors {
    0% {
        filter: brightness(90%);
    }
    50% {
        filter: brightness(75%);
    }
    100% {
        filter: brightness(90%);
    }
}

.loading-img {
    color: transparent;
    animation-name: loadingImgColors;
    animation-duration: var(--loadDur);
    animation-delay: var(--loadDelay);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    margin: 0 0 0 0;
	user-select: none;
}

.hide-img
{
	opacity: 0%;
}

.headshot-container
{
	height: auto;
	min-width: 150px;
	max-width: 250px;
	aspect-ratio: 1/1;
	overflow: hidden;
    border-radius: 50%;
	
	flex-basis: 33%;
	
	display: grid;
}

.headshot
{
	width: 100%;
	height: 100%;
	
	object-fit: cover;
	transform: scale(1.1);
}

.headshot-loader
{
	grid-column: 1;
	grid-row: 1;
}

.headshot-vid-container
{
	grid-column: 1;
	grid-row: 1;
	z-index: -1;
}

#details-body
{
	text-align: left;
}

#narrative-history
{
	width:100%;
	text-align: left;
}

.loading #candles-filler
{
	display: block;
	width:100%;
}

#candles
{
	width: 100%;
	overflow: hidden;
	
	pointer-events: none;
}

.loading #candles
{
	display: none
}