/* ===================================
   Awards header: the award count in a circle, a caption and a row of award logos. Script:
   script.js.
=================================== */

.section_awards_header.global-block-ptb {
	padding-bottom: 0;
}
.section_awards_header .awards_logos {
	display: flex;
	gap: 4%;
	align-items: center;
	justify-content: center;
	padding: 70px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.section_awards_header .award_content_wrap {
	display: flex;
	padding-bottom: 167px;
}
.section_awards_header .award_content_wrap .award_intro {
	width: 59%;
}
.section_awards_header .award_content_wrap .award_circle {
	flex: 1;
}

.award_content_wrap .award_circle .award_circle_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 23vw;
	max-width: 434px;
	min-width: 230px;
	aspect-ratio: 1;
	border-radius: 100%;
	position: relative;
	z-index: 1;
}

.award_content_wrap .award_circle .award_circle_no {
	transform: translateY(-8%);
	line-height: 0.8;
	font-size: clamp(2.5rem, 0.1rem + 12vw, 14.5rem);
}
.award_content_wrap .award_circle .award_circle_no .plus {
	margin-left: -2vw;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 100;
	font-size: 82%;
	position: relative;
	top: -10px;
}
.award_content_wrap .award_circle .award_circle_text {
	letter-spacing: 2.773px;
	text-transform: uppercase;
}

@media only screen and (max-width: 1320px) {
	.award_content_wrap .award_circle .award_circle_text {
		letter-spacing: 1.5px;
		font-size: 15px;
	}
}
@media only screen and (max-width: 1024px) {
	.award_content_wrap .award_circle .award_circle_no {
		font-size: 110px;
	}
	.award_content_wrap .award_circle .award_circle_no .plus {
		margin-left: -9px;
		top: -5px;
	}
	.section_awards_header .award_content_wrap {
		padding-bottom: 100px;
	}
	.section_awards_header .awards_logos {
		padding: 30px 20px;
	}
}
@media only screen and (max-width: 600px) {
	.section_awards_header .award_content_wrap .award_circle {
		flex: unset;
		margin-left: auto;
	}
	.award_content_wrap .award_circle .award_circle_inner {
		width: 125px;
		min-width: 125px;
	}
	.award_content_wrap .award_circle .award_circle_no {
		font-size: 60px;
		letter-spacing: -3px;
	}
	.award_content_wrap .award_circle .award_circle_text {
		letter-spacing: 0.5px;
		font-size: 10px;
	}
	.section_awards_header .award_content_wrap {
		padding-bottom: 50px;
		align-items: center;
	}

	.section_awards_header .awards_logos {
		flex-wrap: wrap;
		gap: 6%;
		row-gap: 20px;
	}
	.section_awards_header .awards_logos .award-logo {
		width: 20%;
	}
}
@media only screen and (max-width: 420px) {
	.section_awards_header .award_content_wrap {
		flex-direction: column;
		align-items: start;
	}
	.section_awards_header .award_content_wrap .award_circle {
		margin-left: 0;
	}
}
/* ===================================
   Entrance: label comes into focus, heading rises line by line (js-line-reveal),
   the black disc spreads open from its centre like ink, "60" counts up (blocks/awards-header/script.js),
   the caption resolves, then the award logos rise in one after another.
=================================== */
/* Circle: resolves out of a soft blur in place, without scaling or an outline draw. The number then
   rolls up (assets/js/reels.js) and the caption follows. */
.award_circle.aw-enter .award_circle_inner {
	animation: aw-resolve 1100ms var(--ease-out) 300ms both;
}
@keyframes aw-resolve {
	from {
		opacity: 0;
		filter: blur(14px);
	}
	to {
		opacity: 1;
		filter: none;
	}
}
.award_circle.aw-enter .award_circle_no {
	animation: exc-reveal-fade 400ms var(--ease-out) 400ms both;
}
.award_circle.aw-enter .award_circle_text {
	--reveal-blur: 8px;
	animation: exc-reveal-up-blur 900ms var(--ease-out) 1000ms both;
}

.awards_logos.aw-enter .award-logo {
	--reveal-blur: 8px;
	animation: exc-reveal-up-blur 1000ms var(--ease-out) both;
	animation-delay: calc(1500ms + var(--k, 0) * 80ms); /* after the circle */
	img {
		max-width: 210px;
		max-height: 48px;
		width: 100%;
	}
}
.awards_logos.aw-enter .award-logo:nth-child(2) {
	--k: 1;
}
.awards_logos.aw-enter .award-logo:nth-child(3) {
	--k: 2;
}
.awards_logos.aw-enter .award-logo:nth-child(4) {
	--k: 3;
}
.awards_logos.aw-enter .award-logo:nth-child(5) {
	--k: 4;
}
.awards_logos.aw-enter .award-logo:nth-child(6) {
	--k: 5;
}
.awards_logos.aw-enter .award-logo:nth-child(7) {
	--k: 6;
}
.awards_logos.aw-enter .award-logo:nth-child(8) {
	--k: 7;
}
.awards_logos.aw-enter .award-logo:nth-child(n + 9) {
	--k: 8;
}
