/* ===================================
   Full-screen menu (opened by the persistent menu button, assets/js/navigation.js)
   - Open: the sheet glides down (850ms in-out), then the logo, links, the "20+" circle and
     LinkedIn rise in one after another; the circle's outline rings ripple out behind it and
     "Celebrating over twenty years…" writes in word by word.
   - Close (.is-closing, ~0.7s): the pieces lift away bottom to top and the sheet follows up.
   Timings: docs/motion.md, "full-screen menu".
=================================== */
.full_screen_menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	z-index: 999;
	background-color: #e4eaee;
	transform: translateY(-100%);
	overflow: hidden;
	transition: transform var(--dur-medium) var(--ease-in-out);
}
.full_screen_menu.open_m {
	transform: translateY(0);
	transition: transform var(--dur-long) var(--ease-in-out);
}
body.admin-bar .full_screen_menu {
	top: 32px;
	height: calc(100dvh - 32px);
}
.full_screen_menu .container {
	display: flex;
	flex-direction: column;
	gap: 110px;
}

.full_screen_menu .full_screen_logo {
	--i: 0; /* first in the menu's entrance stagger */
	padding-top: 45px;
	margin-left: -109px;
}

.full_screen_menu a.closed-menu-icon {
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--darkgreen);
	color: var(--wp--preset--color--white);
	width: 80px;
	height: 80px;
	font-size: 40px;
	z-index: 3;
}

.full_screen_navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.full_screen_navigation ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.full_screen_navigation ul li a {
	margin: 0;
	padding: 0;
	text-transform: capitalize;
	text-decoration: none;
	color: var(--wp--preset--color--darkblue);
	font-family: var(--wp--preset--font-family--playfairdisplay);
	font-size: var(--wp--preset--font-size--large-50);
}
.full_screen_navigation ul li.current_page_item a,
.full_screen_navigation ul li.active a {
	color: var(--wp--preset--color--darkgreen);
}
@media (hover: hover) and (pointer: fine) {
	.full_screen_navigation ul li a:hover {
		color: var(--wp--preset--color--darkgreen);
	}
}
.full_screen_navigation ul li .mobile_arrow {
	display: none;
}
.full_screen_navigation {
	margin-top: 92px;
}
.full_screen_content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	max-width: 1423px;
	margin-top: 33px;
}
.full_screen_circle_box {
	max-width: 1000px;
	width: 100%;
	display: flex;
	gap: 11%;
	align-items: center;
}
.full_screen_menu .circle_box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26vw;
	max-width: 409px;
	aspect-ratio: 1;
	border-radius: 100%;
	position: relative;
}

.full_screen_menu .circle_year {
	letter-spacing: -20px;
	transform: translateY(-16%);
}
.full_screen_menu .circle_year .plus {
	margin-left: 10px;
}
.full_screen_menu .celeb_text {
	font-style: normal;
	font-weight: 700;
	line-height: 27.979px;
	letter-spacing: 3.917px;
	max-width: 480px;
}
.full_screen_menu .circle_box span.crl {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 100%;
	border: 1px solid var(--wp--preset--color--white);
	transform: translateX(39px);
	z-index: -1;
}
.circle_box span.crl:nth-child(2) {
	transform: translateX(78px);
}
.circle_box span.crl:nth-child(3) {
	transform: translateX(117px);
}
.circle_box span.crl:nth-child(4) {
	transform: translateX(156px);
}
.circle_box span.crl:nth-child(5) {
	transform: translateX(195px);
}
.circle_box span.crl:nth-child(6) {
	transform: translateX(234px);
}
.circle_box span.crl:nth-child(7) {
	transform: translateX(273px);
}
.circle_box span.crl:nth-child(8) {
	transform: translateX(312px);
}
.circle_box span.crl:nth-child(9) {
	transform: translateX(351px);
}
.circle_box span.crl:nth-child(10) {
	transform: translateX(390px);
}
.circle_box span.crl:nth-child(11) {
	transform: translateX(429px);
}
@media screen and (max-width: 1900px) {
	.full_screen_menu .circle_box span.crl {
		transform: translateX(2vw);
	}
	.circle_box span.crl:nth-child(2) {
		transform: translateX(4vw);
	}
	.circle_box span.crl:nth-child(3) {
		transform: translateX(6vw);
	}
	.circle_box span.crl:nth-child(4) {
		transform: translateX(8vw);
	}
	.circle_box span.crl:nth-child(5) {
		transform: translateX(10vw);
	}
	.circle_box span.crl:nth-child(6) {
		transform: translateX(12vw);
	}
	.circle_box span.crl:nth-child(7) {
		transform: translateX(14vw);
	}
	.circle_box span.crl:nth-child(8) {
		transform: translateX(16vw);
	}
	.circle_box span.crl:nth-child(9) {
		transform: translateX(18vw);
	}
	.circle_box span.crl:nth-child(10) {
		transform: translateX(20vw);
	}
	.circle_box span.crl:nth-child(11) {
		transform: translateX(22vw);
	}
}
.full_screen_menu .linkedin_link a {
	position: relative;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small-21);
	font-weight: 700;
	letter-spacing: -0.42px;
	color: var(--wp--preset--color--darkblue);
}
@media (hover: hover) and (pointer: fine) {
	.full_screen_menu .linkedin_link a:hover {
		color: var(--wp--preset--color--darkgreen);
	}
}
.full_screen_menu .linkedin_link a::before {
	content: "\e807";
	font-family: "excentric";
	font-weight: normal;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 51px;
	height: 51px;
	background-color: var(--wp--preset--color--white);
	border-radius: 100%;
	margin-right: 27px;
	transition: 0.3s var(--ease-out);
	transition-property: background-color, color;
}
@media (hover: hover) and (pointer: fine) {
	.full_screen_menu .linkedin_link a:hover::before {
		background-color: var(--wp--preset--color--darkgreen);
		color: var(--wp--preset--color--white);
	}
}
/* its ↗ arrow, with the extending tail, is the shared arrow (global/hero.css) */
@media screen and (max-width: 1750px) {
	.full_screen_menu .full_screen_logo {
		margin-left: 0;
	}
}
@media screen and (max-width: 1300px) {
	.full_screen_circle_box {
		max-width: 800px;
		gap: 7%;
		justify-content: end;
	}
	.full_screen_menu .circle_box {
		width: 29vw;
	}
	.full_screen_menu .celeb_text {
		max-width: 330px;
	}
}

@media screen and (max-width: 900px) {
	.full_screen_menu .full_screen_logo {
		padding-top: 21px;
	}
	.full_screen_menu .container {
		gap: 30px;
	}
	.full_screen_content {
		margin-top: 0;
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}
	.full_screen_navigation {
		margin-top: 30px;
	}
	.full_screen_circle_box {
		justify-content: center;
	}
	.full_screen_menu .linkedin_link {
		text-align: center;
	}
	.full_screen_menu .circle_year {
		letter-spacing: -10px;
	}
	.full_screen_navigation ul li {
		text-align: center;
	}
}
@media screen and (max-width: 768px) {
	.full_screen_menu .full_screen_logo img {
		width: 241px;
	}
}
/* -----------------------------------
   Choreography
----------------------------------- */
.full_screen_menu .full_screen_logo,
.full_screen_menu .full_screen_navigation li,
.full_screen_menu .full_screen_circle_box,
.full_screen_menu .linkedin_link {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}
.full_screen_menu.open_m .full_screen_logo,
.full_screen_menu.open_m .full_screen_navigation li,
.full_screen_menu.open_m .full_screen_circle_box,
.full_screen_menu.open_m .linkedin_link {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--dur-long) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out);
	/* wait for the sheet to mostly arrive, then stagger */
	transition-delay: calc(350ms + var(--i, 0) * var(--stagger));
}
.full_screen_menu .full_screen_navigation li:nth-child(1) {
	--i: 1;
}
.full_screen_menu .full_screen_navigation li:nth-child(2) {
	--i: 2;
}
.full_screen_menu .full_screen_navigation li:nth-child(3) {
	--i: 3;
}
.full_screen_menu .full_screen_navigation li:nth-child(4) {
	--i: 4;
}
.full_screen_menu .full_screen_navigation li:nth-child(5) {
	--i: 5;
}
.full_screen_menu .full_screen_navigation li:nth-child(6) {
	--i: 6;
}
.full_screen_menu .full_screen_navigation li:nth-child(7) {
	--i: 7;
}
.full_screen_menu .full_screen_navigation li:nth-child(n + 8) {
	--i: 8;
}
.full_screen_menu .linkedin_link {
	--i: 8;
}
/* the "20+" circle is fourth, and also settles from slightly smaller */
.full_screen_menu .full_screen_circle_box {
	--i: 4;
	transform: translate3d(0, 28px, 0) scale(0.94);
}

/* close: a short fold-away (navigation.js adds .is-closing for its duration). Items lift toward
   where the sheet is going (up), bottom to top (LinkedIn first, logo last), 30ms apart; the sheet
   starts 160ms in and carries the last ones away. A standard ease, so the fade doesn't vanish in
   its first frames. */
.full_screen_menu.is-closing {
	transition: transform 560ms var(--ease-in-out) 160ms;
}
.full_screen_menu.is-closing
	:is(.full_screen_logo, .full_screen_navigation li, .full_screen_circle_box, .linkedin_link) {
	opacity: 0;
	transform: translate3d(0, -18px, 0);
	transition:
		opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) calc((8 - var(--i, 0)) * 30ms),
		transform 340ms cubic-bezier(0.4, 0, 0.2, 1) calc((8 - var(--i, 0)) * 30ms);
}
.full_screen_menu.is-closing .full_screen_circle_box {
	transform: translate3d(0, -18px, 0) scale(0.97);
}

/* "20+" echo rings: when the menu opens, the outline rings ripple out from behind the
   circle to their places, one after another (secondary motion following the circle's arrival).
   Closed: tucked behind the circle and invisible; closing folds them back quickly. */
.full_screen_menu:not(.open_m) .circle_box span.crl {
	transform: none;
	opacity: 0;
	transition:
		transform 260ms var(--ease-in),
		opacity 180ms var(--ease-in);
}
.full_screen_menu.open_m .circle_box span.crl {
	opacity: 1;
	transition:
		transform 1000ms var(--ease-out) calc(620ms + var(--n, 1) * 45ms),
		opacity 500ms var(--ease-out) calc(620ms + var(--n, 1) * 45ms);
}
/* ripple order = distance from the circle (the innermost ring is the last element) */
.full_screen_menu .circle_box span.crl:last-child {
	--n: 1;
}
.full_screen_menu .circle_box span.crl:nth-child(2):not(:last-child) {
	--n: 2;
}
.full_screen_menu .circle_box span.crl:nth-child(3):not(:last-child) {
	--n: 3;
}
.full_screen_menu .circle_box span.crl:nth-child(4):not(:last-child) {
	--n: 4;
}
.full_screen_menu .circle_box span.crl:nth-child(5):not(:last-child) {
	--n: 5;
}
.full_screen_menu .circle_box span.crl:nth-child(6):not(:last-child) {
	--n: 6;
}
.full_screen_menu .circle_box span.crl:nth-child(7):not(:last-child) {
	--n: 7;
}
.full_screen_menu .circle_box span.crl:nth-child(8):not(:last-child) {
	--n: 8;
}
.full_screen_menu .circle_box span.crl:nth-child(9):not(:last-child) {
	--n: 9;
}
.full_screen_menu .circle_box span.crl:nth-child(10):not(:last-child) {
	--n: 10;
}
.full_screen_menu .circle_box span.crl:nth-child(11):not(:last-child) {
	--n: 11;
}

/* "Celebrating over twenty years…": written in word by word out of a soft blur,
   in step with the echo rings (assets/js/motion.js splits the words; screen readers get the plain text). */
.full_screen_menu .celeb_text .cw-word {
	display: inline-block;
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(0, 0.35em, 0);
	transition:
		opacity 200ms var(--ease-in),
		filter 200ms var(--ease-in),
		transform 200ms var(--ease-in);
}
.full_screen_menu.open_m .celeb_text .cw-word {
	opacity: 1;
	filter: none;
	transform: none;
	transition:
		opacity 600ms var(--ease-out),
		filter 700ms var(--ease-out),
		transform 800ms var(--ease-out);
	transition-delay: calc(700ms + var(--w, 0) * 70ms);
}

/* phones: a compact "20+" block; the rings step by a share of the circle and the text sits clear of
   them in two or three lines */
@media screen and (max-width: 600px) {
	.full_screen_circle_box {
		gap: calc(104px * 0.55 + 18px);
	}
	.full_screen_menu .circle_box {
		width: 104px;
		min-width: 104px;
	}
	.full_screen_menu.open_m .circle_box span.crl {
		transform: translateX(calc(var(--n, 1) * 5.5%));
	}
	.full_screen_menu .circle_year {
		font-size: 58px;
		letter-spacing: -4px;
	}
	.full_screen_menu .circle_year .plus {
		margin-left: 2px;
		font-size: 36px;
	}
	.full_screen_menu .celeb_text {
		max-width: 190px;
		font-size: 11px;
		line-height: 17px;
		letter-spacing: 1.8px;
	}
}