/* HTML IDs are JavaScript hooks, not CSS selectors:
	#fsBtn toggles fullscreen; #prev and #next navigate.
	#dots, #counter, and #bar show slide progress.
	#stepChoice, #stepRisk, and #stepOverview identify slides.
	#myVoucher and #choiceStatus report the selection.
	#btnSent, #btnLost, and #outcome control the outcome demo.
*/

/* Theme colors and shared surface values used throughout the page. */
:root {
	--bg1: #00005b;
	--bg2: #00008f;
	--accent: #ff1721;
	--gold: #00a3e0;
	--green: #34d399;
	--red: #ff1721;
	--text: #fff;
	--muted: #c2cbe8;
	--card: rgba(255, 255, 255, .08);
	--line: rgba(255, 255, 255, .18);
}

/* Reset default browser spacing and use predictable box sizing. */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Make the page shell fill the browser viewport. */
html,
/* Overall page layout, background, and default text color. */
body {
	height: 100%;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: radial-gradient(circle at top, var(--bg2), var(--bg1));
	color: var(--text);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Header row containing the brand and fullscreen control. */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
}

/* Keep the logo and page title aligned as one brand group. */
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Size the logo while preserving its original aspect ratio. */
.brand-logo {
	display: block;
	width: auto;
	height: 48px;
	max-width: 150px;
	object-fit: contain;
}

/* Main page title shown beside the logo. */
h1 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--muted);
}

/* Shared appearance and interaction behavior for buttons. */
button {
	font: inherit;
	color: var(--text);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 18px;
	cursor: pointer;
	transition: all .2s;
}

/* Hover feedback for enabled buttons. */
/* Language selector styled to match the page controls. */
.language-select {
	font: inherit;
	color: var(--text);
	background: var(--bg1);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
}

.language-select option {
	color: var(--text);
	background: var(--bg1);
}

button:hover:not(:disabled) {
	background: rgba(255, 255, 255, .14);
	transform: translateY(-1px);
}

/* Dim controls that are unavailable at the current step. */
button:disabled {
	opacity: .35;
	cursor: default;
}

/* Track behind the progress fill; #bar is the fill updated by script.js. */
.progress {
	height: 4px;
	background: rgba(255, 255, 255, .08);
}

.progress div {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--accent), var(--gold));
	transition: width .6s ease;
}

/* Viewport that contains and clips the slide panels. */
main {
	flex: 1;
	position: relative;
	overflow: hidden;
}

/* Shared full-screen panel layout for each presentation step. */
.step {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transform: translateX(60px);
	transition: opacity .6s ease, transform .6s ease;
	pointer-events: none;
}

/* Position steps already passed to the left of the viewport. */
.step.before {
	transform: translateX(-60px);
}

/* Reveal the current step and allow its controls to be used. */
.step.active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Heading within each slide. */
.step h2 {
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	margin-bottom: 12px;
	text-align: center;
}

/* Supporting description beneath each slide heading. */
.step .desc {
	max-width: 760px;
	text-align: center;
	color: var(--muted);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.6;
	margin-bottom: 28px;
}

/* Main visual arrangement inside the instructional slides. */
.scene {
	width: min(920px, 100%);
	height: clamp(230px, 42vh, 340px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 16px;
}

/* Framed content blocks used for organizations and examples. */
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px;
	text-align: center;
	min-width: 130px;
}

/* Large emoji or symbol at the top of a content block. */
.icon {
	font-size: clamp(2.6rem, 6vw, 4rem);
	display: block;
	margin-bottom: 6px;
}

/* Secondary captions used beneath icons and values. */
.label {
	font-size: .95rem;
	color: var(--muted);
}

/* Funding voucher badge, including its initial hidden state. */
.voucher {
	display: inline-block;
	background: linear-gradient(135deg, var(--gold), #008fcc);
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	padding: 10px 16px;
	box-shadow: 0 8px 20px rgba(0, 163, 224, .25);
	font-size: .95rem;
	opacity: 0;
}

/* .pop reveals matching items with a scale-in animation. */
.voucher::before {
	content: "🎟️";
	margin-right: .35em;
}

.step.active .pop {
	animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) forwards;
	animation-delay: var(--d, 0s);
}

/* .fly brings matching items into the active slide. */
.step.active .fly {
	animation: fly 1s ease forwards;
	animation-delay: var(--d, 0s);
}

/* .fade-in reveals supporting text and arrows. */
.step.active .fade-in {
	animation: fadeIn .8s ease forwards;
	animation-delay: var(--d, 0s);
}

/* .pulse highlights the active voucher or funding block. */
.step.active .pulse {
	animation: pulse 2s ease-in-out infinite;
}

/* Animation frames used by the matching reveal classes above. */
@keyframes pop {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fly {
	0% {
		opacity: 0;
		transform: translateX(-120px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(0, 163, 224, .4);
	}

	50% {
		box-shadow: 0 0 0 14px rgba(0, 163, 224, 0);
	}
}

/* Emphasized organization names and financial labels. */
.bank {
	font-size: 1.2rem;
	font-weight: 700;
}

/* Row of employee illustrations and their vouchers. */
.people {
	display: flex;
	gap: 14px;
}

/* Individual employee illustration and caption. */
.person {
	width: 70px;
	text-align: center;
	font-size: .8rem;
	color: var(--muted);
}

/* Employee emoji within each .person item. */
.person span {
	display: block;
	font-size: 2.2rem;
}

/* Keep translated employee names at caption size, not emoji size. */
.person .employee-name {
	font-size: .8rem;
}

/* Wrap and center the available union choices. */
.unions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Clickable organization choice on the selection slide. */
.union {
	cursor: pointer;
	min-width: 150px;
}

/* Highlight the organization selected by the user. */
.union.chosen {
	border-color: var(--green);
	box-shadow: 0 0 0 2px var(--green);
}

/* Confirmation message displayed after a union is selected. */
.status {
	margin-top: 18px;
	min-height: 1.6em;
	color: var(--green);
	font-weight: 600;
}

/* Large amount representing funds available to an organization. */
.funds {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	color: var(--gold);
}

/* Row of example actions funded by the organization. */
.uses {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Side-by-side controls for the sent/lost voucher simulation. */
.toggle {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Result panel updated by the #btnSent and #btnLost controls. */
.outcome {
	min-height: 90px;
	max-width: 620px;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.6;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--card);
}

/* Successful result state when the voucher is submitted. */
.outcome.ok {
	border-color: var(--green);
	color: var(--green);
}

/* Warning result state when the voucher is not submitted. */
.outcome.lost {
	border-color: var(--red);
	color: var(--red);
}

/* Red emphasis for loss warnings. */
.warning {
	color: var(--red);
	font-weight: 700;
}

/* Cross out actions no longer funded in the loss example. */
.strike {
	text-decoration: line-through;
	opacity: .5;
}

/* Bottom navigation controls and slide indicators. */
footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	flex-wrap: wrap;
}

/* Container for the clickable slide-position indicators. */
.dots {
	display: flex;
	gap: 8px;
}

/* One indicator dot; script.js creates one for each slide. */
.dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	cursor: pointer;
	transition: all .3s;
}

/* Mark the dot for the currently displayed slide. */
.dots i.on {
	background: var(--accent);
	transform: scale(1.3);
}

/* Current slide number, updated by script.js. */
.counter {
	color: var(--muted);
	font-size: .9rem;
	min-width: 60px;
	text-align: center;
}

/* Overview slide: stacked flow diagram and its shared rows. */
.flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: min(960px, 100%);
}

/* Center a group of flow items and let them wrap on narrow screens. */
.row {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

/* Align the destination pots and loss bin along their bottoms. */
.dispatch {
	align-items: flex-end;
	gap: 26px;
}

/* Horizontal transition arrow between process stages. */
.arrow {
	font-size: 2rem;
	color: var(--accent);
}

/* Label and arrow showing the downward dispatch direction. */
.arrow-down {
	color: var(--accent);
	font-weight: 600;
}

/* Hide items until their overview animation begins. */
.dropin {
	opacity: 0;
}

/* Drop overview vouchers and symbols into their destinations. */
.step.active .dropin {
	animation: dropIn .7s ease forwards;
	animation-delay: var(--d, 0s);
}

@keyframes dropIn {
	0% {
		opacity: 0;
		transform: translateY(-40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Compact voucher badge used in the overview diagram. */
.voucher.small {
	font-size: .8rem;
	padding: 6px 10px;
}

/* Muted appearance for a voucher that was not submitted. */
.voucher.lost {
	background: linear-gradient(135deg, #64748b, #475569);
	color: #e2e8f0;
	box-shadow: none;
}

/* Shared layout for each union's pot and the discarded-voucher bin. */
.pot-wrap,
.bin-wrap {
	width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/* Colored rim at the top of each funding pot. */
.rim {
	width: 124px;
	height: 10px;
	background: var(--gold);
	border-radius: 6px;
}

/* Empty container whose liquid level represents union funding. */
.pot {
	width: 110px;
	height: 96px;
	border: 3px solid var(--gold);
	border-top: none;
	border-radius: 0 0 26px 26px;
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
}

/* Funding fill animated inside each .pot. */
.liquid {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	background: linear-gradient(180deg, #00a3e0, #00008f);
	transition: height 1.4s ease 1.2s;
}

/* Fill the pot to the per-item --fill percentage on the overview. */
.step.active .liquid {
	height: var(--fill, 50%);
}

/* Bin body receiving a voucher that was not submitted. */
.bin {
	width: 110px;
	height: 96px;
	border: 3px solid var(--red);
	border-top: none;
	border-radius: 6px 6px 22px 22px;
	background: repeating-linear-gradient(
		90deg,
		rgba(248, 113, 113, .15) 0 10px,
		transparent 10px 18px
	);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 8px;
	font-size: 2rem;
}

/* Lid animated when the overview slide becomes active. */
.bin-lid {
	width: 124px;
	height: 12px;
	background: var(--red);
	border-radius: 6px;
	transform-origin: 15% 50%;
}

/* Open and close the bin lid as the loss is illustrated. */
.step.active .bin-lid {
	animation: lid 1.2s ease 1.6s both;
}

@keyframes lid {
	0% {
		transform: rotate(0);
	}

	40% {
		transform: translateY(-10px) rotate(-16deg);
	}

	100% {
		transform: rotate(0);
	}
}

/* Compact label for each example of funded union activity. */
.chip {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card);
	font-size: .95rem;
}

/* Closing note beneath the overview process diagram. */
.note {
	max-width: 680px;
	text-align: center;
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.5;
}

/* Center the warning caption beneath the loss bin. */
.bin-wrap .label.warning {
	text-align: center;
}

/* Compact header, scenes, and employee rows on small screens. */
@media (max-width: 640px) {
	main {
		min-height: 0;
	}

	.step {
		justify-content: flex-start;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 20px 16px;
	}

	header {
		flex-wrap: wrap;
		padding: 12px 16px;
	}

	.brand {
		gap: 8px;
	}

	.brand-logo {
		height: 36px;
		max-width: 112px;
	}

	.brand h1 {
		font-size: .9rem;
	}

	.scene {
		flex-direction: column;
		height: auto;
		padding: 12px 0;
	}

	.people {
		flex-wrap: wrap;
		justify-content: center;
	}

	.step#stepOverview .flow > .row:first-child {
		flex-direction: column;
		gap: 12px;
	}

	.step#stepOverview .flow > .row:first-child .arrow {
		transform: rotate(90deg);
	}
}