/**
 * Página Nossa História e sua linha do tempo.
 */

@font-face {
	font-family: "Argent CF";
	src: url("../fonts/argent-cf-regular.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

.vtr-history-page__body {
	position: relative;
	isolation: isolate;
	background-color: #eee3cc;
	color: #183c37;
	overflow: hidden;
}

.vtr-history-page__body::before,
.vtr-history-page__body::after {
	position: absolute;
	z-index: 0;
	width: min( 48vw, 650px );
	aspect-ratio: 1326 / 1187;
	background: #06473f;
	content: "";
	opacity: 0.045;
	pointer-events: none;
	-webkit-mask: url("../images/home/cross-book-watermark.png") center / contain no-repeat;
	mask: url("../images/home/cross-book-watermark.png") center / contain no-repeat;
}

.vtr-history-page__body::before {
	top: calc( var( --vtr-global-nav-height ) + clamp( 72px, 9vw, 124px ) );
	right: clamp( 24px, 4vw, 64px );
}

.vtr-history-page__body::after {
	bottom: clamp( 24px, 4vw, 64px );
	left: clamp( 24px, 4vw, 64px );
}

.vtr-history-page__paper {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient( rgba( 78, 65, 37, 0.032 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 78, 65, 37, 0.032 ) 1px, transparent 1px ),
		radial-gradient( ellipse at 14% 18%, rgba( 132, 92, 38, 0.055 ), transparent 26% ),
		radial-gradient( ellipse at 84% 52%, rgba( 111, 75, 30, 0.045 ), transparent 30% ),
		radial-gradient( ellipse at 36% 88%, rgba( 126, 84, 34, 0.04 ), transparent 27% ),
		radial-gradient( circle at 50% 10%, rgba( 255, 250, 232, 0.48 ), transparent 40% ),
		linear-gradient( 115deg, rgba( 255, 255, 255, 0.1 ), rgba( 114, 76, 31, 0.025 ) );
	background-position: center top;
	background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	box-shadow:
		inset 0 0 90px rgba( 83, 52, 20, 0.055 ),
		inset 0 0 220px rgba( 70, 43, 17, 0.035 );
	filter: saturate( 0.96 ) sepia( 0.04 );
	pointer-events: none;
}

.vtr-history-page__container {
	position: relative;
	z-index: 1;
	width: min( calc( 100% - 96px ), 1120px );
	margin: 0 auto;
	padding: calc( var( --vtr-global-nav-height ) + clamp( 64px, 8vw, 104px ) ) 0 clamp( 86px, 10vw, 144px );
}

.vtr-history-page__intro {
	max-width: 780px;
	margin: 0 auto clamp( 84px, 10vw, 136px );
	text-align: center;
}

.vtr-history-page__title {
	margin: 0 0 34px;
	color: #06473f;
	font-size: clamp( 54px, 7vw, 88px );
	font-weight: 700;
	letter-spacing: -0.055em;
	line-height: 0.96;
	text-align: center;
	text-transform: none;
}

.vtr-history-page__intro > p:last-child {
	max-width: 670px;
	margin: 0 auto;
	color: #294b46;
	font-size: clamp( 18px, 2vw, 23px );
	font-weight: 700;
	line-height: 1.55;
}

.vtr-history-timeline {
	position: relative;
}

.vtr-history-timeline__list {
	--vtr-timeline-progress: 0%;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtr-history-timeline__list::before,
.vtr-history-timeline__list::after {
	position: absolute;
	top: 8px;
	bottom: 0;
	left: 50%;
	width: 2px;
	border-radius: 999px;
	content: "";
	transform: translateX( -50% );
}

.vtr-history-timeline__list::before {
	background: rgba( 5, 85, 76, 0.28 );
}

.vtr-history-timeline__list::after {
	bottom: auto;
	height: var( --vtr-timeline-progress );
	background: linear-gradient( #126f65, #00a89f );
	box-shadow: 0 0 16px rgba( 0, 168, 159, 0.24 );
}

.vtr-history-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 94px minmax( 0, 1fr );
	min-height: 310px;
	align-items: start;
	padding: 0 0 clamp( 72px, 8vw, 116px );
}

.vtr-history-timeline__item:last-child {
	padding-bottom: 44px;
}

.vtr-history-timeline__marker {
	position: relative;
	z-index: 2;
	grid-column: 2;
	justify-self: center;
	width: 17px;
	height: 17px;
	margin-top: 10px;
	border: 4px solid #eee3cc;
	border-radius: 50%;
	background: #07574f;
	box-shadow: 0 0 0 2px #07574f;
	transition: background-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.vtr-history-timeline__item.is-visible .vtr-history-timeline__marker,
.vtr-history-timeline__item.is-featured .vtr-history-timeline__marker {
	background: #00a89f;
	box-shadow: 0 0 0 2px #07574f, 0 0 0 8px rgba( 0, 168, 159, 0.13 );
	transform: scale( 1.08 );
}

.vtr-history-timeline__entry {
	grid-row: 1;
	width: min( 100%, 445px );
	color: #29433f;
	opacity: 1;
	transform: none;
	transition: opacity 650ms ease, transform 650ms cubic-bezier( 0.22, 1, 0.36, 1 );
}

.vtr-history-page.has-timeline-motion .vtr-history-timeline__entry {
	opacity: 0;
	transform: translateY( 34px );
}

.vtr-history-timeline__item:nth-child( odd ) .vtr-history-timeline__entry {
	grid-column: 1;
	justify-self: end;
	padding-right: 6px;
	text-align: right;
}

.vtr-history-timeline__item:nth-child( even ) .vtr-history-timeline__entry {
	grid-column: 3;
	justify-self: start;
	padding-left: 6px;
	text-align: left;
}

.vtr-history-page.has-timeline-motion .vtr-history-timeline__item.is-visible .vtr-history-timeline__entry {
	opacity: 1;
	transform: none;
}

.vtr-history-timeline__period {
	display: block;
	margin: 0 0 12px;
	color: #07574f;
	font-size: clamp( 27px, 3.2vw, 40px );
	font-style: normal;
	font-weight: 850;
	letter-spacing: -0.045em;
	line-height: 1;
}

.vtr-history-timeline__entry h3 {
	margin: 0 0 20px;
	color: #173f39;
	font-size: clamp( 19px, 2vw, 25px );
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.12;
}

.vtr-history-timeline__copy {
	font-size: clamp( 15px, 1.45vw, 18px );
	font-weight: 500;
	line-height: 1.58;
}

.vtr-history-timeline__copy p {
	margin: 0 0 16px;
}

.vtr-history-timeline__copy p:last-child {
	margin-bottom: 0;
}

.vtr-history-timeline__entry blockquote {
	margin: 24px 0 0;
	color: #07574f;
	font-family: "Argent CF", Georgia, "Times New Roman", serif;
	font-size: clamp( 23px, 2.6vw, 32px );
	font-style: italic;
	line-height: 1.15;
}

.vtr-history-timeline__item.is-featured .vtr-history-timeline__entry {
	position: relative;
	padding-top: 25px;
	padding-bottom: 28px;
}

.vtr-history-timeline__item.is-featured .vtr-history-timeline__entry::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient( 90deg, transparent, rgba( 0, 117, 105, 0.72 ) );
	content: "";
}

.vtr-history-timeline__item.is-featured:nth-child( even ) .vtr-history-timeline__entry::before {
	background: linear-gradient( 90deg, rgba( 0, 117, 105, 0.72 ), transparent );
}

.vtr-history-page__closing {
	max-width: 850px;
	margin: clamp( 68px, 9vw, 120px ) auto 0;
	color: #16443d;
	text-align: center;
	opacity: 1;
	transform: none;
	transition: opacity 650ms ease, transform 650ms cubic-bezier( 0.22, 1, 0.36, 1 );
}

.vtr-history-page.has-timeline-motion .vtr-history-page__closing {
	opacity: 0;
	transform: translateY( 34px );
}

.vtr-history-page.has-timeline-motion .vtr-history-page__closing.is-visible {
	opacity: 1;
	transform: none;
}

.vtr-history-page__closing > p {
	margin: 0;
	font-size: clamp( 16px, 1.8vw, 20px );
	font-weight: 600;
}

.vtr-history-page__closing blockquote {
	margin: 26px 0 0;
	color: #07574f;
	font-family: "Argent CF", Georgia, "Times New Roman", serif;
	font-size: clamp( 34px, 5vw, 62px );
	font-style: italic;
	line-height: 1.05;
}

.vtr-history-page.no-timeline-motion .vtr-history-timeline__entry,
.vtr-history-page.no-timeline-motion .vtr-history-page__closing {
	opacity: 1;
	transform: none;
}

@media ( max-width: 767px ) {
	.vtr-history-page__body::before {
		top: calc( var( --vtr-global-nav-height ) + 72px );
		right: 24px;
		width: calc( 100% - 48px );
		opacity: 0.035;
	}

	.vtr-history-page__body::after {
		bottom: 24px;
		left: 24px;
		width: calc( 100% - 48px );
		opacity: 0.035;
	}

	.vtr-history-page__container {
		width: calc( 100% - var( --vtr-mobile-content-gutter ) - var( --vtr-mobile-content-gutter ) );
		padding: calc( var( --vtr-global-nav-height ) + 56px ) 0 88px;
	}

	.vtr-history-page__intro {
		margin-bottom: 82px;
		text-align: center;
	}

	.vtr-history-page__title {
		margin-bottom: 28px;
		font-size: clamp( 46px, 13vw, 62px );
		line-height: 1;
	}

	.vtr-history-page__intro > p:last-child {
		font-size: 18px;
	}

	.vtr-history-timeline__list::before,
	.vtr-history-timeline__list::after {
		left: 10px;
	}

	.vtr-history-timeline__item {
		grid-template-columns: 42px minmax( 0, 1fr );
		min-height: 0;
		padding-bottom: 76px;
	}

	.vtr-history-timeline__item:last-child {
		padding-bottom: 30px;
	}

	.vtr-history-timeline__marker {
		grid-column: 1;
		justify-self: start;
		margin-top: 7px;
		margin-left: 2px;
	}

	.vtr-history-timeline__item:nth-child( n ) .vtr-history-timeline__entry {
		grid-column: 2;
		justify-self: stretch;
		width: 100%;
		padding-right: 0;
		padding-left: 0;
		text-align: left;
	}

	.vtr-history-timeline__period {
		font-size: clamp( 28px, 8.5vw, 37px );
	}

	.vtr-history-timeline__entry h3 {
		font-size: clamp( 20px, 5.8vw, 25px );
	}

	.vtr-history-timeline__copy {
		font-size: 16px;
		line-height: 1.56;
	}

	.vtr-history-timeline__item.is-featured:nth-child( n ) .vtr-history-timeline__entry::before {
		background: linear-gradient( 90deg, rgba( 0, 117, 105, 0.72 ), transparent );
	}

	.vtr-history-page__closing {
		margin-top: 64px;
		text-align: center;
	}

	.vtr-history-page__closing blockquote {
		font-size: clamp( 36px, 11vw, 52px );
	}
}

@media ( max-width: 420px ) {
	.vtr-history-page__paper {
		background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	}

	.vtr-history-timeline__item {
		grid-template-columns: 36px minmax( 0, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vtr-history-timeline__entry,
	.vtr-history-page__closing,
	.vtr-history-timeline__marker {
		transition: none;
	}

	.vtr-history-timeline__entry,
	.vtr-history-page__closing {
		opacity: 1;
		transform: none;
	}
}