/* ═══════════════════════════════════════════════════════════════
   VoxMachina — AI Academy page visuals (single-purpose)
   1. Hero "lesson player" mock + floating chips
   2. 80/20 (Pareto) bars
   3. Centred stats with icons
   4. Icon "why" tiles
   Animations: transform / opacity only. Bars fill when main.js adds
   .is-in to .reveal; html.reveal-off (reduced motion) shows them full.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Hero ─────────────────────────────────────────────────── */
@media (min-width: 960px) {
	.split.acad-hero-split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 56px;
	}
}

.acad-player {
	--pl-ink: #e0f6f9;
	--pl-muted: rgba(224, 246, 249, 0.7);
	--pl-line: rgba(151, 240, 255, 0.24);
	--pl-signal: #97f0ff;
	--pl-face: rgba(0, 30, 35, 0.55);
	position: relative;
	max-width: 480px;
	margin-inline: auto;
	padding-block: 28px;
}
.acad-player__win {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	background-color: var(--pl-face);
	box-shadow:
		inset 0 0 0 1px var(--pl-line),
		0 30px 70px rgba(0, 20, 24, 0.35);
	overflow: hidden;
}
.acad-player__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--pl-line);
	font-family: 'Roboto Mono', ui-monospace, monospace;
	font-size: 12px;
	color: var(--pl-muted);
}
.acad-player__bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--pl-line);
}
.acad-player__bar span {
	margin-left: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Video" area: code-skeleton lines + play button */
.acad-player__screen {
	position: relative;
	display: grid;
	gap: 9px;
	padding: 22px 22px 26px;
	background-image:
		linear-gradient(rgba(151, 240, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(151, 240, 255, 0.05) 1px, transparent 1px);
	background-size: 22px 22px;
}
.acad-code {
	height: 9px;
	border-radius: 999px;
	background-color: rgba(151, 240, 255, 0.22);
	transform-origin: left;
	animation: acad-type 7s ease-in-out infinite;
}
.acad-code--hi {
	background-color: rgba(151, 240, 255, 0.55);
}
.acad-code.w-40 { width: 40%; }
.acad-code.w-55 { width: 55%; margin-left: 8%; animation-delay: 0.25s; }
.acad-code.w-70 { width: 70%; margin-left: 8%; animation-delay: 0.5s; }
.acad-code.w-35 { width: 35%; margin-left: 16%; animation-delay: 0.75s; }
.acad-code.w-60 { width: 60%; margin-left: 8%; animation-delay: 1s; }
.acad-code.w-25 { width: 25%; animation-delay: 1.25s; }
.acad-play {
	position: absolute;
	right: 22px;
	bottom: 22px;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--pl-signal);
	color: #00363d;
	box-shadow: 0 0 0 0 rgba(151, 240, 255, 0.5);
	animation: acad-ping 2.8s ease-out infinite;
}
.acad-play .material-symbols-rounded {
	font-size: 32px;
	font-variation-settings: 'FILL' 1;
}

/* Progress */
.acad-progress {
	display: grid;
	gap: 8px;
	padding: 16px 22px;
	border-top: 1px solid var(--pl-line);
	font-size: 13px;
	color: var(--pl-muted);
}
.acad-progress__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.acad-progress__row strong {
	color: var(--pl-ink);
	font-weight: 500;
}
.acad-progress__track {
	height: 6px;
	border-radius: 999px;
	background-color: rgba(151, 240, 255, 0.15);
	overflow: hidden;
}
.acad-progress__fill {
	width: 68%;
	height: 100%;
	border-radius: inherit;
	background-color: var(--pl-signal);
	transform-origin: left;
	animation: acad-fill 2.2s cubic-bezier(0.2, 0, 0, 1) 0.4s both;
}

/* Lesson list */
.acad-lessons {
	display: grid;
	margin: 0;
	padding: 6px 12px 12px;
	list-style: none;
}
.acad-lessons li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 12px;
	font-size: 14px;
	color: var(--pl-ink);
}
.acad-lessons .material-symbols-rounded {
	font-size: 20px;
	color: var(--pl-signal);
	font-variation-settings: 'FILL' 1;
}
.acad-lessons li.is-now {
	background-color: rgba(151, 240, 255, 0.1);
}
.acad-lessons li.is-now::after {
	content: '';
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-radius: 50%;
	background-color: var(--pl-signal);
	animation: acad-blink 1.4s ease-in-out infinite;
}

/* Floating chips around the player */
.acad-float {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px 7px 10px;
	border-radius: 999px;
	background-color: #ffffff;
	box-shadow: 0 12px 30px rgba(0, 30, 35, 0.25);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: #0d1c1f;
	animation: acad-bob 6s ease-in-out infinite;
}
.acad-float .material-symbols-rounded {
	font-size: 18px;
	color: #006874;
}
.acad-float--a { top: 2px; left: -18px; }
.acad-float--b { top: 18%; right: -26px; animation-delay: -2s; }
.acad-float--c { bottom: 0; left: 8%; animation-delay: -4s; }

@media (max-width: 600px) {
	.acad-float--a { left: 0; }
	.acad-float--b { right: 0; }
}

@keyframes acad-type {
	0% { transform: scaleX(0); opacity: 0.4; }
	18%,
	82% { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0.4; }
}
@keyframes acad-ping {
	0% { box-shadow: 0 0 0 0 rgba(151, 240, 255, 0.5); }
	70%,
	100% { box-shadow: 0 0 0 18px rgba(151, 240, 255, 0); }
}
@keyframes acad-fill {
	from { transform: scaleX(0); }
}
@keyframes acad-blink {
	50% { opacity: 0.25; }
}
@keyframes acad-bob {
	0%,
	100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* ── 2. 80/20 bars ───────────────────────────────────────────── */
.pareto {
	display: grid;
	gap: 26px;
	padding: clamp(24px, 4vw, 36px);
	border-radius: var(--r-md);
	background-color: var(--c-card);
	box-shadow: var(--shadow);
}
.pareto__row {
	display: grid;
	gap: 10px;
}
.pareto__label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--c-muted);
}
.pareto__label strong {
	color: var(--c-primary);
	font-weight: 700;
}
.pareto__bar {
	display: flex;
	height: 44px;
	border-radius: 12px;
	background-color: var(--c-raised);
	overflow: hidden;
}
.pareto__seg {
	display: flex;
	align-items: center;
	padding-inline: 14px;
	border-radius: 12px;
	background-color: var(--c-primary);
	color: var(--c-on-primary);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	transform-origin: left;
	transition: transform 1.1s cubic-bezier(0.2, 0, 0, 1);
}
.pareto__seg--20 { width: 20%; }
.pareto__seg--80 { width: 80%; transition-delay: 0.35s; }
.js:not(.reveal-off) main .pareto.reveal:not(.is-in) .pareto__seg {
	transform: scaleX(0);
}
.pareto__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
}
.pareto__note .material-symbols-rounded {
	color: var(--c-primary);
}

/* Compact icon points beside the bars */
.acad-points {
	display: grid;
	gap: 22px;
}
.acad-point {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	align-items: start;
}
.acad-point .icon-tile {
	grid-row: span 2;
}
.acad-point h3 {
	margin: 0;
	font-size: 18px;
}
.acad-point p {
	margin: 0;
	color: var(--c-muted);
}

/* ── 3. Centred stats with icons ─────────────────────────────── */
.stats.acad-stats > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.acad-stats .icon-tile {
	margin-bottom: 6px;
}

/* ── 4. Why tiles ─────────────────────────────────────────────── */
.acad-why {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	transition:
		transform var(--med) var(--ease),
		box-shadow var(--med) var(--ease);
}
.acad-why:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-raised);
}
.acad-why .icon-tile {
	margin-bottom: 6px;
	transition: transform var(--med) var(--ease);
}
.acad-why:hover .icon-tile {
	transform: scale(1.08) rotate(-4deg);
}
.acad-why h3 {
	margin: 0;
	font-size: 18px;
}
.acad-why p {
	margin: 0;
	color: var(--c-muted);
}

@media (prefers-reduced-motion: reduce) {
	.acad-code,
	.acad-play,
	.acad-progress__fill,
	.acad-lessons li.is-now::after,
	.acad-float {
		animation: none;
	}
	.pareto__seg,
	.acad-why,
	.acad-why .icon-tile {
		transition: none;
	}
}