/* About page. Scoped to [data-pmg-page="about"]. */

@keyframes pmgOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pmgCore { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes pmgInward { 0% { left: 100%; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: 0%; opacity: 0; } }

[data-pmg-page="about"] { overflow-x: clip; }
[data-pmg-page="about"] h1, [data-pmg-page="about"] h2, [data-pmg-page="about"] p { overflow-wrap: break-word; }

[data-pmg-page="about"] .pmg-about__orbit { animation: pmgOrbit 16s linear infinite; }
[data-pmg-page="about"] .pmg-about__core { animation: pmgCore 6s ease-in-out infinite; }

/* Methodology: force list rows, wheel nodes, spokes and practices share the active state (.is-on). */
[data-pmg-page="about"] .pmg-about__row { background: transparent; transition: background .3s; }
[data-pmg-page="about"] .pmg-about__row-n { color: #AEA7A6; transition: color .3s; }
[data-pmg-page="about"] .pmg-about__row-name { color: #AEA7A6; transition: color .3s; }
[data-pmg-page="about"] .pmg-about__row.is-on { background: rgba(248, 57, 0, .08); }
[data-pmg-page="about"] .pmg-about__row.is-on .pmg-about__row-n { color: #F83900; }
[data-pmg-page="about"] .pmg-about__row.is-on .pmg-about__row-name { color: #fff; }
[data-pmg-page="about"] .pmg-about__row:hover .pmg-about__row-name { color: #fff; }

[data-pmg-page="about"] .pmg-about__spoke { background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); }
[data-pmg-page="about"] .pmg-about__spoke.is-on { background: linear-gradient(90deg, rgba(248, 57, 0, .9), rgba(248, 57, 0, .15)); }
[data-pmg-page="about"] .pmg-about__spoke span { opacity: 0; animation: pmgInward 3.4s linear infinite; }
[data-pmg-page="about"] .pmg-about__spoke.is-on span { opacity: 1; }

[data-pmg-page="about"] .pmg-about__practice {
	color: #AEA7A6; border: 1px solid rgba(255, 255, 255, .16); box-shadow: none;
	transition: color .4s cubic-bezier(.2, .7, .2, 1), border-color .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s cubic-bezier(.2, .7, .2, 1);
}
[data-pmg-page="about"] .pmg-about__practice.is-on { color: #F83900; border-color: rgba(248, 57, 0, .6); box-shadow: 0 0 24px rgba(248, 57, 0, .3); }

[data-pmg-page="about"] .pmg-about__node {
	background: rgba(5, 3, 2, .9); border: 1px solid rgba(255, 255, 255, .22); color: #F3E3E1; padding: 11px 16px; box-shadow: 0 0 18px rgba(0, 0, 0, .6);
	transition: color .4s cubic-bezier(.2, .7, .2, 1), background .4s cubic-bezier(.2, .7, .2, 1), border-color .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s cubic-bezier(.2, .7, .2, 1), padding .4s cubic-bezier(.2, .7, .2, 1);
}
[data-pmg-page="about"] .pmg-about__node-name { font-size: 15px; transition: font-size .4s; }
[data-pmg-page="about"] .pmg-about__node-n { color: #AEA7A6; }
[data-pmg-page="about"] .pmg-about__node.is-on { background: #F83900; border-color: #F83900; color: #000; padding: 14px 20px; box-shadow: 0 0 40px rgba(248, 57, 0, .7); }
[data-pmg-page="about"] .pmg-about__node.is-on .pmg-about__node-name { font-size: 19px; }
[data-pmg-page="about"] .pmg-about__node.is-on .pmg-about__node-n { color: rgba(0, 0, 0, .55); }

/* Personality traits. */
[data-pmg-page="about"] .pmg-about__trait { color: rgba(255, 255, 255, .9); transition: color .3s; }
[data-pmg-page="about"] .pmg-about__trait.is-on { color: #F83900; }

[data-pmg-page="about"] .pmg-about__market:focus-visible { outline-offset: 6px; }

/* Phones: the wheel is drawn at its desktop proportions and scaled down so labels stay inside 375px. */
@media (max-width: 759px) {
	[data-pmg-page="about"] .pmg-about__wheel { transform: scale(.78); margin-block: -6%; }
}