/* Special Title Formatting — INEVMA letter vars live in css/variables.css */

/* ********************************************
	INEVMA
******************************************** */

/* Core Animation Settings */
.animate-custom {
  animation-duration: 2s; /* Replaces animate__slow */
  animation-fill-mode: both;
}

/* Delay Utilities */
.delay-0p5s { animation-delay: 0.5s; }
.delay-1s   { animation-delay: 1s; }
.delay-2s   { animation-delay: 2s; }
.delay-2p5s { animation-delay: 2.5s; }

/* Bounce In Right Animation */
.animate-bounce-in-right {
  animation-name: bounceInRight;
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
	opacity: 0;
	transform: translate3d(3000px, 0, 0);
  }
  60% {
	opacity: 1;
	transform: translate3d(-25px, 0, 0);
  }
  75% {
	transform: translate3d(10px, 0, 0);
  }
  90% {
	transform: translate3d(-5px, 0, 0);
  }
  to {
	transform: translate3d(0, 0, 0);
  }
}

/* Zoom In Animation */
.animate-zoom-in {
  animation-name: zoomIn;
}

@keyframes zoomIn {
  from {
	opacity: 0;
	transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
	opacity: 1;
  }
}


/* ********************************************
	CLEARVIEW TITLE
******************************************** */

#clearTitleWrap {
	position: relative;
	height: 100%;
	margin: auto;
	max-width: 1160px;

	/* IMPORTANT: '--bs-gutter-x' is part of bootstrap measure system;
	setting it HERE enables this part of the '#page-title' section to horizontally align well with the "#content" section;
	it automatically sets the correct padding/margins  */
	--bs-gutter-x: 2rem;
	width: calc(100% - var(--bs-gutter-x) * 2);
}

#titleContainer {
	height: 0;
	position: absolute;
	z-index: 9;
	margin-bottom: -16px;

	font-size: 100%;
}


#clearTitleWrap .title {
	position: absolute;
	font-size: 3.5em;
	padding: 0;
	z-index: 2;
	height: auto;
	width: auto;
	bottom: 160px;
	white-space: nowrap;
	-webkit-border-radius: var(--yim-br10);
	border-radius: var(--yim-br10);
}

#clearTitleWrap .b-line {
	line-height: 1;
	width: auto;
}

#clearTitleWrap .title .b-line {
	font-weight: 400;
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	margin-left: 0;
	margin-top: 0.6em;
	white-space: nowrap;
	opacity: 0;
	letter-spacing: 0;
	text-transform: uppercase;
	font-family: 'Marcellus SC', serif;
}


#clearTitleWrap .title .ttl {
	position: absolute;
	width: 100%;
}


#clearTitleWrap .title .t-line {
	line-height: 1;
	width: auto;
	font-size: 0.5em;
	white-space: nowrap;
}


body:not(.dark) #clearTitleWrap > div:not(.in-content) .t-line,
body.dark #clearTitleWrap .t-line {
	color: var(--dark-col-base);
	text-shadow: var(--dark-ts);
}

body:not(.dark) #clearTitleWrap > div.in-content .t-line {
	color: var(--light-col-base);
	text-shadow: var(--light-ts);
}

#clearTitleWrap .title #sb1 .likeyim {
	opacity: 0;
	margin: 0;
}

#clearTitleWrap .t-line span {
	font-family: 'Marcellus', serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: 0;
	display: inline-block;
}


#clearTitleWrap .t-line scaps {
	font-family: 'YIMind';
	letter-spacing: 0.075em;
	margin-left: 0.075em;
}


#clearTitleWrap #ttl2 .b-line {
	width: 0;
	overflow: hidden;

}

#clearTitleWrap .title .b-line .main {

	font-weight: bold;
	display: inline-block;

	white-space: nowrap;
	letter-spacing: 0.035em;
	text-align: left;
	margin-right: 16px;
	width: auto;
}


#clearTitleWrap .title #ttl2 .b-line .main {
	margin-left: -20px;
	letter-spacing: 0.076em;
}

#clearTitleWrap .title .on2lines,
#clearTitleWrap .title .on3lines {
	font-family: 'YIMind', sans-serif;
	font-weight: 700;
	font-style: italic;
	display: inline-block;
	text-align: left;
	padding-bottom: 3px;
	margin-left: 0;
	margin-right: 16px;
	width: auto;
	white-space: nowrap;
	letter-spacing: 0.08em;
	color: rgb(255, 250, 245);
	text-shadow: 0 0 1.5px black;
}

#clearTitleWrap .title .on2lines {
	font-size: 0.4em;
	line-height: 1.05;
	text-align: left;
}


#clearTitleWrap .title .on3lines {
	font-size: 0.26em;
	line-height: 1.1;
}


#clearTitleWrap #ttl1.permanent + #ttl2 .b-line {
	display: none;
}

.inevma-container {
	position: sticky;
	top: 50%;
	height: 168px;
}

body.all-padded .inevma-container {
	top: 15%;
}

.inevma {
	z-index: 1;
	position: absolute;
	right: 115px;
}

.inevma.noimg {
	margin-right: 30px !important;
}

.inevma .txt {
	left: auto;
	right: 0;
	margin-top: 0 !important;

	position: relative;
	clear: both;
	height: auto;
	width: auto;
	min-width: 318px;
	line-height: 0.92;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 60px;
	text-align: right;
}

.inevma .author-container {
	position: absolute;
	max-width: 106px;
	max-height: 106px;
	top: 4%;
	right: -115px;
	-webkit-border-radius: 20%;
	border-radius: 20%;
	margin: 0;
	background: rgb(0 0 0 / 20%);
	overflow: hidden;
}

.inevma .author-container img {
	width: 100%;
	height: 100%;
}

.inevma .text-container div:first-child,
.inevma .text-container div:nth-child(2),
.inevma .text-container div:nth-child(3) {
	right: 0;
}

.inevma:not(.noimg) .text-container div:nth-child(3) {
	margin-right: -115px;
}

#slider .inevma .author-container {
	right: -24%;
}

#slider .inevma .text-container div:nth-child(3) {
	margin-right: -24%;
}

.inevma .text-container .txt div {
	position: relative;
}

.inevma .text-container .txt div::before,
.inevma .text-container .txt div::after,
#clearTitleWrap :not(.in-content) .b-line .main,
body.dark #clearTitleWrap .b-line .main {

	background: -webkit-linear-gradient(270deg, white 50%, rgb(200 100 75 / 100%) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: none;

	filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 30%));
}

body:not(.dark) #clearTitleWrap .in-content .b-line .main {
	background: -webkit-linear-gradient(270deg, rgb(120 155 160 / 100%) 40%,rgb(60 100 100 / 100%) 60%,rgb(204 107 55 / 100%) 90%, rgb(200 100 75 / 100%) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: none;

	filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 30%));
}

#clearTitleWrap .in-content .b-line .on2lines,
#clearTitleWrap .in-content .b-line .on3lines {
	color: var(--light-col-quote);
	text-shadow: var(--light-ts);
}

.dark #clearTitleWrap .in-content .b-line .on2lines,
.dark #clearTitleWrap .in-content .b-line .on3lines {
	color: var(--dark-col-quote);
	text-shadow: var(--dark-ts);
}

/* **********************************************
		ANIMATIONS
********************************************** */

/* RESTORED WORKING BASELINE */
.inevma .text-container .txt {
  display: block !important;
  width: 100%;
  position: relative;
  clear: both;
  margin-bottom: 0px;
  height: 58px;
}

.inevma .text-container .txt > div {
  position: relative;
  display: inline-block;
  min-height: 1.2em;
}

#inEvma1 div::before, #inEvma1 div::after,
#inEvma2 div::before, #inEvma2 div::after,
#inEvma3 div::before, #inEvma3 div::after {
  position: absolute;
  top: 0;
  white-space: nowrap;
  animation-fill-mode: backwards !important;
}
.tright div::before, .tright div::after,
.fright div::before, .fright div::after {
  position: absolute;
  top: 0;
  right: 0;                  /* 👈 Keep it perfectly flush at 0 */
  text-align: right;
  white-space: nowrap;

  /* THE AUTOMATIC ALIGNMENT FIX */
  transform-origin: right center !important;
}


/* 1. FIRST GROUP (PRESENCE, LOVE, TRUTH) */
@keyframes inevmaWordCycleOut {
  0%, 40%  { opacity: 1; transform: translateX(0); }
  50%, 90% { opacity: 0; transform: translateX(20px); }
  100%     { opacity: 1; transform: translateX(0); }
}

/* 2. SECOND GROUP (INTEGRATE, EVOLVE, MANIFEST) */
@keyframes inevmaWordCycleIn {
  0%, 40%  { opacity: 0; transform: translateX(-20px); }
  50%, 90% { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; transform: translateX(-20px); }
}
@keyframes evo {
  0%, 40%  { opacity: 0; transform: translateX(-20px); }
  50%, 90% { opacity: 1; transform: translateX(5.5px); }
  100%     { opacity: 0; transform: translateX(-20px); }
}


.inevma .text-container .txt div::before,
.inevma .text-container .txt div::after,
#clearTitleWrap :not(.in-content) .b-line,
body.dark #clearTitleWrap .b-line {

	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-duration: 12s;
	animation-direction: normal;

}


#inEvma1 div::before {
	content: 'PRESENCE';
	animation-name: inevmaWordCycleOut;
	position: absolute;
	text-align: right;
	right: 0;
	animation-delay: 3s;
}

#inEvma1 div::after {
	content: 'INTEGRATE';
	animation-name: inevmaWordCycleIn;
	animation-delay: 3s;
	opacity: 0;
}

#inEvma2 div::before {
	content: 'LOVES';
	animation-name: inevmaWordCycleOut;
	position: absolute;
	text-align: right;
	right: 0;
	animation-delay: 4s;
}

#inEvma2 div::after {
	content: 'EVOLVE';
	animation-name: evo;
	animation-delay: 4s;
	opacity: 0;
	letter-spacing: 5.5px;

}

#inEvma3 div::before {
	content: 'TRUTH';
	animation-name: inevmaWordCycleOut;
	position: absolute;
	text-align: right;
	right: 0;
	animation-delay: 5s;

}

#inEvma3 div::after {
	content: 'MANIFEST';
	animation-name: inevmaWordCycleIn;
	animation-delay: 5s;
	opacity: 0;

}

@keyframes inthespirit {
	0%,
	5% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	48% {
		opacity: 1;
	}
	52% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

#clearTitleWrap #ttl1 #sb1 span {
	opacity: 0;
	display: inline-block;
	animation: inthespirit 16s ease-in 4s infinite;
	animation-delay: calc(var(--it) * 0.2s);
}

@keyframes forwhatmatters {
	0%,
	10% {
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	48% {
		opacity: 1;
	}
	52% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

#clearTitleWrap #ttl2 #sb2 span {
	opacity: 0;
	display: inline-block;
	animation: forwhatmatters 16s ease-in 4s infinite;
	animation-delay: calc(8s + (var(--it2) * 0.2s));
}


/* --------------------------------------- */

/* WELCOME!  or the larger bottom line */

@keyframes welcome {
	0%,
	3% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	50% {
		opacity: 1
	}
	55% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes lookwithin {

	0%,
	3% {
		opacity: 0;
		width: 0;
	}

	15% {
		width: 0;
		opacity: 1;
	}

	30%, 50% {
		opacity: 1;
		width: min(500px, calc(100vw - var(--bs-gutter-x, 2rem) * 2));
	}

	55%,
	82% {
		opacity: 0;
		width: min(500px, calc(100vw - var(--bs-gutter-x, 2rem) * 2));
	}

	98% {
		opacity: 0;
		width: 0;
	}
}

 @keyframes permanent {
	0%,
	3% {
		opacity: 0;
	}
	24%,
	50% {
		opacity: 1;
	}
	58.33% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

#clearTitleWrap.noanim .title .t-line,
#clearTitleWrap.noanim .title .b-line {
	animation-name: none !important;
	animation-iteration-count: 0 !important;
	animation-delay: 0.01s !important;
	animation-duration: 0.01s !important;
	opacity: 1;
}

#clearTitleWrap .title #ttl1 .b-line {
	animation-name: welcome;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-delay: 0s;
	animation-duration: 16s;
	animation-direction: normal;
}

#clearTitleWrap .title #ttl1.permanent .b-line {
	animation-name: permanent;
	animation-iteration-count: 1;
}

/* look within */
#clearTitleWrap .title #ttl2 .b-line {
	animation-name: lookwithin;
	animation-fill-mode: none;
	animation-iteration-count: infinite;
	animation-delay: 8s;
	animation-duration: 16s;
	animation-direction: normal;

	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
}


@media (min-width: 992px) {

	.inevma .txt {
		font-size: 60px;
		right: 340px;
	}

	.inevma .author-container {
		width: 106px;
		height: 106px;
	}
}

@media only screen and (max-width: 991.98px) {

	#clearTitleWrap #titleContainer {
		font-size: 80%;
	}
}

@media only screen and (max-width: 767.98px),
only screen and (max-height: 520px) and (orientation: landscape) {

	html:has(body.clearview),
	body.clearview,
	body.clearview #wrapper,
	body.clearview #page-title {
		overflow-x: clip;
		max-width: 100%;
	}
}

@media only screen and (max-width: 767.98px) {

	#clearTitleWrap {
		width: calc(100% - var(--bs-gutter-x) * 2);
		max-width: 100%;
	}

	#clearTitleWrap #titleContainer {
		font-size: 60%;
	}

	.inevma-container {
		height: 110px;
	}

	.inevma {
		right: 75px;
	}

	.inevma .txt {
		font-size: 40px;
	}

	.inevma .text-container .txt {
		height: 38px;
	}

	.inevma:not(.noimg) .text-container div:nth-child(3) {
		margin-right: -78px;
	}

	.inevma .author-container {
		width: 65px;
		height: 65px;
		right: -72px;
	}
}

/* lookwithin width uses min(500px, calc(100vw - gutter)) — no separate mobile keyframes */