/* ==========================================================================
   The Game + Signature Mechanics
   ========================================================================== */
.weights__row--physical,
.ring__seg--physical,
.test-card--physical,
[data-active="physical"] { --seg: var(--c-asa); }

.weights__row--mental,
.ring__seg--mental,
.test-card--mental,
[data-active="mental"] { --seg: var(--c-ogbon); }

.weights__row--strategy,
.ring__seg--strategy,
.test-card--strategy,
[data-active="strategy"] { --seg: var(--c-gold); }

.weights__row--cultural,
.ring__seg--cultural,
.test-card--cultural,
[data-active="cultural"] { --seg: var(--c-bronze); }

.weights__row--social,
.ring__seg--social,
.test-card--social,
[data-active="social"] { --seg: var(--c-iwa); }

.ring__value,
.weights__table td,
.test-card__num,
.test-card__weight,
.mchapter__num,
.mech-index__num {
	font-variant-numeric: lining-nums;
}

/* Game hero ------------------------------------------------------------- */
.game-hero__sub {
	margin-top: var(--s-3);
	color: var(--c-text-muted);
	font-size: var(--fs-lead);
}

.game-hero__marks {
	position: absolute;
	top: 50%;
	right: var(--gutter);
	display: none;
	grid-template-columns: repeat(3, clamp(3.25rem, 1rem + 3.5vw, 5rem));
	gap: var(--s-4);
	transform: translateY(-45%);
	pointer-events: none;
}

@media (min-width: 64em) {
	.game-hero__marks {
		display: grid;
	}
}

.game-hero__mark {
	color: var(--c-gold);
	opacity: 0.4;
	animation: eru-rise 1s var(--ease-out) both;
	animation-delay: calc(var(--i) * 0.1s);
}

.game-hero__mark:nth-child(2),
.game-hero__mark:nth-child(5) {
	margin-top: 3rem;
}

.game-hero__mark .glyph {
	width: 100%;
	height: auto;
}

.game-hero__marks--art {
	grid-template-columns: repeat(3, 4.75rem);
	align-items: end;
	gap: 0.85rem 1rem;
}

.game-hero__marks--art .game-hero__mark,
.game-hero__marks--art .game-hero__mark:nth-child(2),
.game-hero__marks--art .game-hero__mark:nth-child(3),
.game-hero__marks--art .game-hero__mark:nth-child(5) {
	margin-top: 0;
	opacity: 0.9;
}

@media (min-width: 64em) {
	.game-hero .page-hero__title,
	.game-hero .page-hero__lead {
		max-width: min(38rem, calc(100% - 18rem));
	}
}

.mech-art,
.mech-art img {
	display: block;
	width: 100%;
	height: auto;
}

.game-hero__mark .mech-art {
	max-height: 5.5rem;
	filter: drop-shadow(0 8px 20px rgb(0 0 0 / 0.5));
}

.game-hero__mark .mech-art img {
	max-height: 5.5rem;
	object-fit: contain;
}

/* Weights --------------------------------------------------------------- */
.weights {
	background: linear-gradient(180deg, var(--c-bg), var(--c-charcoal));
}

.weights__grid {
	display: grid;
	gap: var(--s-8);
	align-items: center;
}

@media (min-width: 64em) {
	.weights__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--s-9);
	}
}

.weights__ring {
	position: relative;
	width: min(100%, 30rem);
	margin: 0 auto;
}

.ring {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-90deg);
	transition: transform 1.4s var(--ease-out), opacity 1s var(--ease-out);
}

.js .weights__ring:not(.is-visible) .ring {
	opacity: 0;
	transform: rotate(-200deg) scale(0.75);
}

.ring__track {
	fill: none;
	stroke: var(--c-line);
	stroke-width: 18;
}

.ring__seg {
	fill: none;
	stroke: var(--seg);
	stroke-width: 18;
	opacity: 0.35;
	cursor: pointer;
	transition: opacity var(--dur-2) var(--ease-out), stroke-width var(--dur-2) var(--ease-out);
}

.ring__seg.is-active {
	opacity: 1;
	stroke-width: 24;
}

.ring__center {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	pointer-events: none;
}

.ring__value {
	color: var(--c-text-strong);
	font-family: var(--ff-display);
	font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem);
	font-weight: 600;
	line-height: 1;
}

.ring__value small {
	color: var(--c-gold);
	font-size: 0.45em;
}

.ring__label {
	max-width: 12ch;
	margin: var(--s-2) auto 0;
	color: var(--c-text-muted);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.weights__table {
	width: 100%;
	border-collapse: collapse;
}

.weights__table thead th {
	padding: 0 0 var(--s-3);
	border-bottom: 1px solid var(--c-line-strong);
	color: var(--c-text-muted);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-align: left;
	text-transform: uppercase;
}

.weights__table thead th:last-child,
.weights__table td {
	text-align: right;
}

.weights__table tbody th,
.weights__table td {
	border-bottom: 1px solid var(--c-line);
	font-weight: 400;
}

.weights__table td {
	padding-left: var(--s-4);
	color: var(--c-text-muted);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	transition: color var(--dur-2) var(--ease-out);
}

.weights__btn {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	width: 100%;
	min-height: 3.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-text);
	font: inherit;
	font-size: var(--fs-body);
	text-align: left;
	cursor: pointer;
	transition: color var(--dur-1) var(--ease-out);
}

.weights__swatch {
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	border: 1px solid var(--seg);
	transform: rotate(45deg);
	transition: background-color var(--dur-2) var(--ease-out);
}

.weights__btn:hover,
.weights__btn[aria-pressed="true"] {
	color: var(--c-text-strong);
}

.weights__btn[aria-pressed="true"] {
	font-weight: 700;
}

.weights__btn[aria-pressed="true"] .weights__swatch {
	background: var(--seg);
}

.weights__row:has([aria-pressed="true"]) td {
	color: var(--seg);
}

.weights__detail {
	margin-top: var(--s-6);
	padding-left: var(--s-5);
	border-left: 2px solid var(--seg, var(--c-gold));
	transition: border-color var(--dur-2) var(--ease-out);
}

.weights__detail-test {
	color: var(--c-text-muted);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.weights__detail-question {
	margin-top: var(--s-2);
	color: var(--c-text-strong);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	line-height: 1.2;
}

/* Two phases ------------------------------------------------------------- */
.phases__grid {
	display: grid;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 64em) {
	.phases__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-5);
	}
}

.phase-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	height: 100%;
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border: 1px solid var(--c-line-strong);
	background:
		radial-gradient(80% 80% at 100% 0%, rgb(186 138 32 / 0.16), transparent 62%),
		var(--c-charcoal);
}

.phase-card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0;
	color: var(--c-text-muted);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.phase-card__num {
	color: var(--c-gold);
}

.phase-card__title {
	margin: 0;
	padding-top: 0.08em;
	color: var(--c-bone);
	font-family: var(--ff-display);
	font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem);
	font-weight: 600;
	line-height: 1.05;
	text-transform: uppercase;
}

.phase-card__when {
	margin: 0;
	color: var(--c-gold-soft);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	line-height: 1.2;
}

.phase-card__body {
	max-width: 42rem;
	margin: 0;
	color: var(--c-text);
}

/* The eight tests ------------------------------------------------------- */
.tests {
	border-top: 1px solid var(--c-line);
}

.tests__grid {
	display: grid;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.tests__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.test-card__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	height: 100%;
	padding: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
	border: 1px solid var(--c-line);
	background: var(--c-charcoal);
}

.test-card__num {
	color: var(--c-gold);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1;
}

.test-card__name {
	margin: 0;
	padding-top: 0.06em;
	color: var(--c-bone);
	font-family: var(--ff-display);
	font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.4rem);
	font-weight: 600;
	line-height: 1.08;
	text-transform: uppercase;
}

.test-card__stake {
	margin: 0;
	color: var(--c-gold-soft);
	font-family: var(--ff-display);
	font-size: 1.25rem;
	line-height: 1.3;
}

.test-card__body {
	margin: 0;
	color: var(--c-text);
}

.finale {
	margin-top: var(--s-6);
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
	border: 1px solid rgb(186 138 32 / 0.45);
	background:
		radial-gradient(80% 120% at 0% 0%, rgb(186 138 32 / 0.18), transparent 60%),
		var(--c-obsidian);
}

.finale__kicker {
	margin: 0 0 var(--s-3);
	color: var(--c-gold);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.finale__title {
	margin: 0 0 var(--s-4);
	padding-top: 0.06em;
	color: var(--c-bone);
	font-family: var(--ff-display);
	font-size: clamp(2rem, 1.2rem + 2vw, 3.5rem);
	font-weight: 600;
	line-height: 1.05;
	text-transform: uppercase;
}

.finale p {
	max-width: 46rem;
}

.finale__close {
	margin-top: var(--s-4);
	color: var(--c-gold-soft);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.explore__grid--two {
	max-width: var(--w-default);
}

@media (min-width: 80em) {
	.explore__grid--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Signature Mechanics
   ========================================================================== */
.mech-hero__grid {
	display: grid;
	gap: var(--s-7);
	align-items: center;
}

@media (min-width: 64em) {
	.mech-hero__grid {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.mech-hero__ring {
	--size: min(78vw, 26rem);
	--node: clamp(2.75rem, 2rem + 1.5vw, 3.75rem);
	position: relative;
	width: var(--size);
	height: var(--size);
	margin-inline: auto;
}

.mech-hero__orbit {
	position: absolute;
	inset: calc(var(--node) / 2);
	border: 1px dashed var(--c-line-strong);
	border-radius: 50%;
	animation: eru-spin 120s linear infinite;
}

.mech-hero__core {
	position: absolute;
	inset: 39%;
	color: var(--c-gold);
	filter: drop-shadow(0 0 28px rgb(186 138 32 / 0.5));
}

.mech-hero__core .glyph {
	width: 100%;
	height: 100%;
}

.mech-hero__node {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: var(--node);
	height: var(--node);
	margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
	border: 1px solid var(--c-line-strong);
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-gold-soft);
	transform: rotate(calc(var(--i) * (360deg / var(--n, 8)))) translateY(calc(var(--size) / -2 + var(--node) / 2)) rotate(calc(var(--i) * (-360deg / var(--n, 8))));
	transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.mech-hero__node:hover {
	border-color: var(--c-gold);
	color: var(--c-bone);
}

.mech-hero__node .glyph {
	width: 48%;
	height: 48%;
}

/* Layout + index */
.mech-layout {
	position: relative;
}

.mech-index {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + var(--announce-h, 0px));
	z-index: 50;
	border-bottom: 1px solid var(--c-line);
	background: rgb(0 26 23 / 0.9);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.mech-index__list {
	display: flex;
	gap: var(--s-1);
	margin: 0;
	padding: 0 var(--gutter);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.mech-index__list::-webkit-scrollbar {
	display: none;
}

.mech-index__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 3.5rem;
	padding: 0 var(--s-3);
	color: var(--c-text-muted);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-1) var(--ease-out);
}

.mech-index__link::after {
	content: "";
	position: absolute;
	right: var(--s-3);
	bottom: -1px;
	left: var(--s-3);
	height: 2px;
	background: var(--c-gold);
	transform: scaleX(0);
	transition: transform var(--dur-2) var(--ease-out);
}

.mech-index__num {
	color: var(--c-gold);
	font-size: var(--fs-label);
	font-weight: 700;
}

.mech-index__link:hover,
.mech-index__link[aria-current] {
	color: var(--c-text-strong);
}

.mech-index__link[aria-current]::after {
	transform: none;
}

@media (min-width: 80em) {
	.mech-layout {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
	}

	.mech-index {
		align-self: start;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + var(--announce-h, 0px) + var(--s-6));
		border: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.mech-index__list {
		flex-direction: column;
		gap: 0;
		padding: var(--s-6) 0 var(--s-6) var(--gutter);
		overflow: visible;
	}

	.mech-index__link {
		width: 100%;
		min-height: 2.75rem;
		padding: 0 0 0 var(--s-4);
		border-left: 1px solid var(--c-line);
		white-space: normal;
	}

	.mech-index__link::after {
		top: 0;
		right: auto;
		bottom: 0;
		left: -1px;
		width: 2px;
		height: auto;
		transform: scaleY(0);
	}

	.mech-index__link[aria-current]::after {
		transform: none;
	}
}

/* Chapters */
.mchapter {
	display: flex;
	align-items: center;
	min-height: 86svh;
	padding: var(--section-y) var(--gutter);
	border-bottom: 1px solid var(--c-line);
	background: radial-gradient(60% 70% at 20% 50%, rgb(150 108 22 / 0.16), transparent 70%);
	scroll-margin-top: calc(var(--announce-h, 0px) + 3.5rem);
}

.mchapter:nth-child(even) {
	background: radial-gradient(60% 70% at 80% 50%, rgb(0 84 74 / 0.4), transparent 70%);
}

.mchapter__grid {
	display: grid;
	gap: var(--s-7);
	align-items: center;
	width: 100%;
	max-width: var(--w-default);
	margin-inline: auto;
}

@media (min-width: 64em) {
	.mchapter__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--s-9);
	}

	.mchapter:nth-child(even) .mchapter__grid {
		grid-template-columns: 7fr 5fr;
	}

	.mchapter:nth-child(even) .mchapter__visual {
		order: 2;
		justify-self: end;
	}
}

@media (min-width: 80em) {
	.mchapter {
		padding-left: var(--s-6);
		scroll-margin-top: var(--announce-h, 0px);
	}
}

.mchapter__visual {
	width: min(100%, 24rem);
}

@media (max-width: 63.99em) {
	.mchapter__visual {
		width: min(64%, 16rem);
	}
}

.mchapter__num {
	color: var(--c-gold);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
}

.mchapter__title {
	margin: var(--s-3) 0 var(--s-5);
	padding-top: 0.12em;
	font-size: var(--fs-h1);
	line-height: var(--lh-display);
	text-transform: uppercase;
}

.mchapter__lead {
	max-width: 34rem;
	color: var(--c-text-strong);
	font-size: var(--fs-lead);
	line-height: 1.55;
}

.mchapter__lead + .mchapter__lead {
	margin-top: var(--s-3);
}

.mchapter__label {
	margin-top: var(--s-6);
	color: var(--c-text-muted);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mchapter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: var(--s-4) 0 0;
	padding: 0;
	list-style: none;
}

.mchapter__list li {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--s-4);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	color: var(--c-text-strong);
	font-size: var(--fs-small);
	text-transform: capitalize;
}

.js .mchapter__list li {
	opacity: 0;
	transform: translate3d(0, 0.5rem, 0);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
	transition-delay: calc(var(--i) * 80ms + 0.15s);
}

.js .mchapter__list.is-visible li {
	opacity: 1;
	transform: none;
}

.mchapter__pairs {
	display: grid;
	gap: var(--s-2);
	margin: var(--s-5) 0 0;
	padding: 0;
	overflow-x: clip;
	list-style: none;
}

.mchapter__pairs li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: baseline;
	gap: var(--s-3);
	padding-block: var(--s-3);
	border-bottom: 1px solid var(--c-line);
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 0.75rem + 2.4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.mchapter__pair-a {
	color: var(--c-text-strong);
	text-align: right;
}

.mchapter__pair-b {
	color: var(--c-gold-soft);
}

.mchapter__pair-or {
	color: var(--c-text-muted);
	font-family: var(--ff-body);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
}

.js .mchapter__pair-a,
.js .mchapter__pair-b {
	opacity: 0;
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
	transition-delay: calc(var(--i) * 0.12s + 0.1s);
}

.js .mchapter__pair-a { transform: translate3d(-1.5rem, 0, 0); }
.js .mchapter__pair-b { transform: translate3d(1.5rem, 0, 0); }

.js .mchapter__pairs.is-visible .mchapter__pair-a,
.js .mchapter__pairs.is-visible .mchapter__pair-b {
	opacity: 1;
	transform: none;
}

.mchapter__pairs li > span {
	transition-delay: inherit;
}

.mchapter__lines {
	display: grid;
	gap: var(--s-3);
	margin: var(--s-6) 0 0;
	padding: 0;
	list-style: none;
}

.mchapter__lines li {
	max-width: 30ch;
	color: var(--c-text-strong);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	line-height: 1.2;
	transition: color 0.7s var(--ease-out);
}

.js .mchapter__lines li {
	color: rgb(232 220 196 / 0.46);
}

.js .mchapter__lines li.is-lit {
	color: var(--c-text-strong);
}

.mchapter--final-rite .mchapter__lines li {
	font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem);
	font-weight: 600;
	line-height: 1.05;
	text-transform: uppercase;
}

.js .mchapter--final-rite .mchapter__lines li.is-lit:last-child {
	color: var(--c-gold);
}

.mchapter__kicker {
	max-width: 24ch;
	margin-top: var(--s-6);
	color: var(--c-gold-soft);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-style: italic;
	line-height: 1.2;
}

.mchapter--token .mchapter__label + .mchapter__kicker {
	margin-top: var(--s-2);
	font-size: var(--fs-h2);
	font-style: normal;
	text-transform: uppercase;
}

.js .mchapter--token .mchapter__kicker.is-visible {
	animation: mech-vanish 3.2s var(--ease-in-out) 0.6s both;
}

.mchapter--duel .mchapter__kicker {
	max-width: 22ch;
	margin-top: 0;
	color: var(--c-text-strong);
	font-size: var(--fs-h2);
	font-style: normal;
	line-height: 1.1;
}

.mchapter__more {
	margin-top: var(--s-6);
}

/* Mechanic visuals */
.mvis {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	color: var(--c-gold);
}

.mvis__ring {
	position: absolute;
	border-radius: 50%;
}

.mvis__ring--outer {
	inset: 0;
	border: 1px dashed var(--c-line-strong);
	animation: eru-spin 140s linear infinite;
}

.mvis__ring--inner {
	inset: 16%;
	border: 1px solid rgb(186 138 32 / 0.25);
	background: radial-gradient(circle, rgb(186 138 32 / 0.12), transparent 70%);
}

.mvis__glyph {
	position: relative;
	width: 34%;
	filter: drop-shadow(0 0 26px rgb(186 138 32 / 0.45));
}

.mvis__glyph .glyph,
.mvis__coin-face .glyph,
.mvis__side .glyph {
	width: 100%;
	height: auto;
}

.mvis--staff .mvis__glyph {
	width: 40%;
	animation: eru-breathe 6s var(--ease-in-out) infinite;
}

.mvis--final-rite .mvis__glyph {
	width: 38%;
	animation: eru-spin 60s linear infinite;
}

.mvis--crossroads .mvis__glyph {
	width: 37%;
}

/* Token */
.mvis__coin {
	position: relative;
	width: 36%;
	aspect-ratio: 1;
	perspective: 600px;
}

.mvis__coin-face {
	display: block;
	width: 100%;
	filter: drop-shadow(0 0 26px rgb(186 138 32 / 0.5));
}

.js .mchapter__visual.is-visible .mvis__coin-face {
	animation: mech-coin 2.4s var(--ease-out) 0.2s both;
}

.mvis__dust {
	position: absolute;
	inset: 26%;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(186 138 32 / 0.25), transparent 65%);
}

/* Oracle */
.mvis--oracle .mvis__glyph {
	width: 30%;
}

.mvis__word {
	position: absolute;
	top: 50%;
	left: 50%;
	color: var(--c-text-muted);
	font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg / var(--n))) translateY(-42cqw) rotate(calc(var(--i) * -360deg / var(--n)));
}

.mvis--oracle {
	container-type: inline-size;
}

.js .mchapter__visual .mvis__word {
	opacity: 0;
	transition: opacity 0.8s var(--ease-out);
	transition-delay: calc(var(--i) * 0.15s + 0.3s);
}

.js .mchapter__visual.is-visible .mvis__word {
	opacity: 1;
}

/* Oath */
.mvis__svg {
	position: relative;
	width: 70%;
	height: auto;
	overflow: visible;
}

.mvis__oath-a,
.mvis__oath-b {
	transition: transform 1.6s var(--ease-out) 0.2s;
}

.js .mchapter__visual:not(.is-visible) .mvis__oath-a { transform: translateX(-26px); }
.js .mchapter__visual:not(.is-visible) .mvis__oath-b { transform: translateX(26px); }

/* Duel */
.mvis--duel {
	grid-template-columns: 1fr auto 1fr;
	gap: 8%;
	padding-inline: 22%;
}

.mvis__side {
	position: relative;
	width: 100%;
	transition: transform 1.2s var(--ease-out) 0.2s;
}

.mvis__side--b {
	transform: scaleX(-1);
	color: var(--c-asa);
}

.mvis__divide {
	position: relative;
	width: 1px;
	height: 58%;
	background: linear-gradient(180deg, transparent, var(--c-gold), transparent);
}

.js .mchapter__visual:not(.is-visible) .mvis__side--a { transform: translateX(-40%); }
.js .mchapter__visual:not(.is-visible) .mvis__side--b { transform: translateX(40%) scaleX(-1); }

/* Client artwork */
.mvis--art {
	grid-template-columns: none;
	padding: 0;
}

.mvis__art {
	position: absolute;
	inset: 14% 17%;
	filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.55)) drop-shadow(0 0 34px rgb(186 138 32 / 0.25));
	transition: transform 1.2s var(--ease-out) 0.15s, opacity 1.2s var(--ease-out) 0.15s;
}

.mvis--staff .mvis__art {
	inset: 6% 17%;
}

.mvis__art .mech-art,
.mvis__art .mech-art img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mvis__art .mech-art {
	animation: mech-float 7s var(--ease-in-out) infinite;
}

.js .mchapter__visual:not(.is-visible) .mvis__art {
	opacity: 0;
	transform: translateY(8%) scale(0.94);
}

@keyframes mech-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3%); }
}

@media (prefers-reduced-motion: reduce) {
	.mvis__art .mech-art {
		animation: none;
	}
}

/* Ancestors */
.mvis__tree path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2.2s var(--ease-out) 0.2s;
}

.js .mchapter__visual:not(.is-visible) .mvis__tree path {
	stroke-dashoffset: 1;
}

@keyframes mech-coin {
	from { transform: rotateY(540deg) scale(0.85); }
	to { transform: rotateY(0) scale(1); }
}

@keyframes mech-vanish {
	0%, 55% { opacity: 1; filter: blur(0); }
	80% { opacity: 0.15; filter: blur(4px); }
	100% { opacity: 1; filter: blur(0); }
}