html { scroll-behavior: smooth; }
body.home { background-color: #000 !important; }
body.home #content { padding-top: 0; }
#masthead { transition: all 0.6s ease-in-out; }
#masthead:not(.has-scrolled) { transform: translateY(-100%); }

.Introduction {
	position: relative;
	overflow: hidden;
	height: calc(100 * var(--vh));
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	gap: min(50px, 10vw);
	padding: 3% 0 9% !important;
	--orb-size: 250px;
	--particle-size: 4px;
	--time: 7s;	
}
@media (min-width: 820px) {
	.Introduction {
		min-height: 800px;
		justify-content: flex-start;
	}
}

.Introduction__Animation {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0; 
	height: 0; 
	transform-style: preserve-3d;
	/* perspective: 1000px; - this made it rotate off axis - do we need? */
	animation: rotate var(--time) 2 linear; 
	transform-origin: 50% 50%;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.Introduction__Animation .p {
  position: absolute;
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50% !important;
  animation: orbit var(--time) 1 linear;
  animation-delay: calc(var(--order) * .01s); 
  background-color: #ef476f !important;
  opacity: 0; 
}
.loaded .Introduction__Animation {
	opacity: 1;
}

.Introduction__Video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}
.Introduction__Video::after {
	content: "";
	display: block;
	height: 100%;
	width: 100%; 
	position: absolute;
	top: 0;
	left: 0;
	background: #000 url("../images/sunrise4.jpg") top center no-repeat !important;
	background-size: cover !important;
	transition: opacity 2s ease-in-out !important; 
	opacity: 0;
}
.Introduction__Video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	opacity: 0;
	transition: opacity 2s ease-in-out !important; 
}
.Introduction h2 {
	font-family: "century-gothic", sans-serif;
	font-size: min(50px, 9vw);
	line-height: 1.3 !important;
	text-align: center !important;
	width: 90%;
	max-width: 600px;
	padding-bottom: 0em !important;
	color: #fff !important;
}
.Introduction h2 .awaken {
	opacity: 0;
	transition: opacity 2s 4.2s ease-in-out !important; 
	text-transform: uppercase;
	letter-spacing: 0.3em !important;
}
.Introduction h2 .letter {
	opacity: 0;
	font-size: 0.6em !important;
	transition: opacity 1s ease-in-out !important;
	transition-delay: calc(var(--order) * 0.3s + 4.5s) !important; 
}
.Introduction h3 {
	color: #fff !important;
	font-size: max(15px, 1vw);
}

.Introduction__Channels {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	position: static;
	width: 90%;
}
.Introduction__Channel {
	position: static;
	text-align: center !important;
	pointer-events: none;
	flex: 1 1 33%;
}
@media (min-width: 820px) {
	.Introduction__Channels {
		width: 100%;
	}
	.Introduction__Channel {
		flex: 1 1 14%;
	}
}

.Introduction__Orb {
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50% !important;
	margin: 0 auto 15px !important;
	box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.5) !important;
	opacity: 0;
	transition: box-shadow 0.3s 0s ease-in-out, opacity 0.5s 0s ease-in-out !important;
}
.Introduction__Orb::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit !important;
	margin: auto;
	transition: opacity 0.3s 0s ease-in-out !important;
	box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.5) !important;
	opacity: 0;
}
.Introduction__Orb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50% !important;
}
.Introduction__Channel--ancestral .Introduction__Orb { transition-delay: 0s, 0.4s !important; }
.Introduction__Channel--relationships .Introduction__Orb { transition-delay: 0s, 0.8s !important; }
.Introduction__Channel--health .Introduction__Orb { transition-delay: 0s, 1.2s !important; }
.Introduction__Channel--purpose .Introduction__Orb { transition-delay: 0s, 1.6s !important; }
.Introduction__Channel--spiritual .Introduction__Orb { transition-delay: 0s, 2s !important; }
.Introduction__Channel--awakening .Introduction__Orb { transition-delay: 0s, 2.4s !important; }
@media (min-width: 820px) {
	.Introduction__Orb { width: 80px; height: 80px; }
	.Introduction__Channel--ancestral .Introduction__Orb { transition-delay: 0s, 0.8s !important; }
	.Introduction__Channel--relationships .Introduction__Orb { transition-delay: 0s, 1.6s !important; }
	.Introduction__Channel--health .Introduction__Orb { transition-delay: 0s, 2.4s !important; }
	.Introduction__Channel--purpose .Introduction__Orb { transition-delay: 0s, 2s !important; }
	.Introduction__Channel--spiritual .Introduction__Orb { transition-delay: 0s, 1.2s !important; }
	.Introduction__Channel--awakening .Introduction__Orb { transition-delay: 0s, 0.4s !important; }
}

.Introduction__Channels h3 {
	font-family: "century-gothic", sans-serif;
	opacity: 0;
	transition: opacity 1s 3s ease-in-out !important;
}
@media (min-width: 820px) {
	.Introduction__Channels { padding: 2%; }
	.Introduction__Channel--ancestral,
	.Introduction__Channel--spiritual { margin-bottom: 9% !important; }
	.Introduction__Channel--purpose,
	.Introduction__Channel--relationships { margin-bottom: 17% !important; }
	.Introduction__Channel--health { margin-bottom: 20% !important; }
}

.Introduction__Globe {
	display: none;
}
@media (min-width: 820px) {
	.Introduction__Globe {
		display: block;
		width: 256.65vh; /* calc(100vh * 1.77 * 1.45); */
		height: 272.58vh; /* calc(100vh * 1.77 * 1.45 * 1.06206896552); */
		min-width: 2053.2px;
		min-height: 2180.64px;
		position: absolute;
		top: max(367px,45.7vh);
		left: 50%;
		transform: translateX(-50%);
		border-radius: 100% !important;
		overflow: hidden;  
		pointer-events: none;
		opacity: 0;
		box-shadow: 0 0 2vw 2vw #000 !important;
		transition: opacity 0.8s ease-in-out !important; 
		z-index: 2;
	}
	@media (min-aspect-ratio: 16/9) {
		.Introduction__Globe {
			/* border: 1px solid gold !important; */
			width: 145vw;
			height: 154vw;
			top: max(367px,25.7vw);
		}
	}
	
	.Introduction__Globe::before {
		content: "";
		position: absolute;
		top: 0;
		left: 5%;
		width: 70%;
		height: 20%;
		border-radius: 50%;
		background: radial-gradient(circle at 50% 0px, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.8) 58%);
		-webkit-filter: blur(50px);
		z-index: 2;
	}
	.Introduction__Globe img {
		position: absolute;
		display: block;
		width: 100vw;
		height: auto;
		top: max(-10%, -10vh);
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
	}
	#et-boc .et-l .Introduction__Globe p {
		font-family: "century-gothic",sans-serif !important;
		font-size: 2vw;
		line-height: 1.2;
		text-align: center !important;
		width: 90%;
		max-width: 600px;
		margin: 6vw auto !important;
		position: relative;
		z-index: 3;
		color: #fff !important;
		text-shadow: 0px 0px 20px rgba(0, 0, 0, 1) !important;
		transition: opacity 0.8s 0.4s ease-in-out !important; 
	}
	.Introduction__Channel:hover .Introduction__Globe {
		opacity: 1;
	}
}

.Introduction__Continue {
	display: block;
	position: relative;
	margin: auto;
	flex: 0 0 auto;
	width: min(100px, 10vw);
	height: min(100px, 10vw);
	color: #fff !important;
	font-size: 20px;
	border: 1px solid #ef476f !important;
	border-radius: 50% !important;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.3s 15s ease-in-out !important; 
}
@media (min-width: 820px) {
	.Introduction__Continue {
		position: absolute;
		bottom: 7%;
		left: 50%;
		transform: translateX(-50%);
	}
}
.Introduction__Continue::before,
.Introduction__Continue::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 1px solid #ef476f;
	border-radius: 50%;
	animation: pulse 2s infinite ease-in-out;
}
.Introduction__Continue::before {
	animation-delay: 0.5s;
}
.Introduction__Arrow {
	display: block;
	width: 26px;
	height: 26px;
	position: absolute;
	top: calc(50% - 13px);
	left: calc(50% - 13px);
	animation: pointer 2s infinite ease-in-out;
}
.Introduction__Arrow svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.Introduction__CTA {
	white-space: nowrap;
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
}

/* PLAYED / PLAYING */
.Introduction.playing .Introduction__Video video,
.Introduction.played .Introduction__Video::after,
.Introduction.played::before,
.Introduction.played h2 span,
.Introduction.played h3,
.Introduction.played .Introduction__Orb,
.Introduction.played .Introduction__Continue {
	opacity: 1;
}
.Introduction.played .Introduction__Animation {
	opacity: 0;
}

@media (max-width: 819px) {
	.Introduction.played .Introduction__Video::after {
		opacity: 0.2;	
	}
}
.Introduction.played .Introduction__Channel { 
	pointer-events: auto;
}
.Introduction.played .Introduction__Orb::before {
	animation: shimmer 1.5s 1 ease-in-out;
	animation-delay: calc(var(--order) * 0.1s + 9.5s) !important; 
}

/* ANIMATIONS */

@keyframes shimmer {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes pulse {
	0% {
		opacity: 1;
		transform: translate(-50%,-50%) scale(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-50%,-50%) scale(200%);
	}
	100% {
		opacity: 0;
		transform: translate(-50%,-50%) scale(100%);
	}
}


@keyframes pointer {
	0% {
		opacity: 1;
		transform: translateY(0%);
	}
	25% {
		opacity: 1;
		transform: translateY(0%);
	}
	50% {
		opacity: 0;
		transform: translateY(30%);
	}
	75% {
		opacity: 0;
		transform: translateY(-30%);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

@keyframes rotate {
	100% {
		transform: rotateY(360deg) rotateX(360deg);
	}
}

@keyframes orbit { 
	20% {
		opacity: 1;
	}
	30% {
		transform: rotateZ(calc(var(--z) * -1deg)) rotateY(calc(var(--y) * 1deg)) translateX(var(--orb-size)) rotateZ(calc(var(--z) * 1deg));
	}
	80% {
		transform: rotateZ(calc(var(--z) * -1deg)) rotateY(calc(var(--y) * 1deg)) translateX(var(--orb-size)) rotateZ(calc(var(--z) * 1deg));
		opacity: 1;
	}
	100% {
		transform: rotateZ(calc(var(--z) * -1deg)) rotateY(calc(var(--y) * 1deg)) translateX(var(--orb-size)) rotateZ(calc(var(--z) * 1deg));
		opacity: 0;
	}
}