/*
	The Blitz3D+ homepage - /Home/home.php.

	Loaded after /Home/home.css, whose .b3d-home tokens and components
	(buttons, cards, chips, bands, section headings) the homepage shares
	with the other showcase pages; its own classes start hp-. The live
	demo player is a picture of a screen, like the .b3d-ide mockups: it
	pins the IDE palette (the --hp-* tokens) on itself so it looks the
	same in every site skin. Colours follow BLITZ3D_PLUS_COLOUR_REFERENCE.docx.
*/

/* ---------------------------------------------- hero heading */
.b3d-home .hp-head{
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
	margin: 4px 0 22px 0;
}
.b3d-home .hp-head > *{ min-width: 0; }
.b3d-home .hp-logo{
	width: 236px; height: auto;
	display: block;
	margin: -6px 0 -6px -8px;
	filter: drop-shadow(0 10px 26px var(--hb-logo-shadow));
}
.b3d-home .hp-head h1{
	font: 700 38px/1.08 var(--hb-font-display);
	color: var(--hb-bright);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 8px 0;
	padding: 0;
	border: none;
	text-shadow: none;
}
.b3d-home .hp-head h1 em{
	font-style: normal;
	color: var(--hb-green);
	text-shadow: 0 0 22px var(--hb-glow-green);
}
.b3d-home .hp-head p.lead{ font-size: 15px; color: var(--hb-muted); max-width: 64ch; margin: 0; }
.b3d-home .hp-head-cta{
	display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
	text-align: right;
}
.b3d-home .hp-head-cta .fineprint{ max-width: 23ch; }
.b3d-home .hp-under{
	justify-content: center;
	margin: 20px 0 0 0;
}
.b3d-home .hp-under .fineprint{ flex-basis: 100%; text-align: center; }

/* ---------------------------------------------- the player */
.b3d-home .hp-player{
	--hp-green: #00FF66;
	--hp-cyan: #AAFFFF;
	--hp-yellow: #FFEE00;
	--hp-aqua: #33FFDD;
	--hp-deep: #12344F;
	--hp-deeper: #0E2A40;
	--hp-panel: #184672;
	--hp-raised: #2B6394;
	--hp-hover: #2D6E9F;
	--hp-border: #70ADD1;
	--hp-muted: #C4DCEA;
	--hp-rows: 18;
	--hp-lh: 22px;
	--hp-fs: 13px;
	--hp-gutter: 46px;
	position: relative;
	border: 1px solid rgba(112,173,209,0.55);
	border-radius: 12px;
	overflow: hidden;
	background: var(--hp-deep);
	box-shadow: 0 24px 60px rgba(0,0,0,0.35);
	color: #EEEEEE;
	outline: none;
}
.b3d-home .hp-player:focus-visible{ outline: 2px solid var(--hp-aqua); outline-offset: 3px; }
.b3d-home .hp-player [hidden]{ display: none !important; }
/* the skins style every button (capitals, letter-spacing, pill shape,
   a glow on hover) - undo that inside the player, at zero extra
   specificity so the rules below still win */
.b3d-home :where(.hp-player) button{
	text-transform: none;
	letter-spacing: normal;
	border-radius: 5px;
	box-shadow: none;
	transition: none;
	font-family: 'Inter','Segoe UI',Tahoma,sans-serif;
}

.b3d-home .hp-screen{
	position: relative;
	padding: 22px;
	background:
		radial-gradient(ellipse at 78% 45%, rgba(45,110,159,0.45), rgba(45,110,159,0) 62%),
		linear-gradient(180deg, #1D4B77, #143755);
}
.b3d-home .hp-bg, .b3d-home .hp-overlay{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
	display: block;
	pointer-events: none;
}
.b3d-home .hp-overlay{ z-index: 3; }
.b3d-home .hp-stage{ position: relative; z-index: 1; }

/* the IDE window: the site's .b3d-ide component (skins/code.css) */
.b3d-home .hp-ide{
	position: relative;
	z-index: 1;
	width: 55%;
}
.b3d-home .hp-ide .b3d-ide-title{ position: relative; }
.b3d-home .hp-ide-name{ white-space: nowrap; }

/* the debugger's toolbar, live while a program is being debugged */
.b3d-home .hp-dbg{
	margin-left: auto;
	display: flex; gap: 3px;
}
.b3d-home .hp-dbg i{
	width: 22px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 4px;
	opacity: 0.32;
	transition: opacity 0.2s ease;
}
.b3d-home .hp-dbg.live i{ opacity: 0.95; }
.b3d-home .hp-dbg svg{ width: 13px; height: 13px; fill: var(--hp-muted); }
.b3d-home .hp-dbg svg .st{ fill: none; stroke: var(--hp-muted); stroke-width: 1.7; stroke-linecap: round; }
.b3d-home .hp-dbg i[data-b="run"] svg{ fill: var(--hp-green); }
.b3d-home .hp-dbg i[data-b="stop"] svg{ fill: #F06060; }
.b3d-home .hp-dbg i.hit{ background: rgba(0,255,102,0.22); box-shadow: 0 0 10px rgba(0,255,102,0.45); }
.b3d-home .hp-dbg i.hit svg{ fill: var(--hp-green); }
.b3d-home .hp-dbg i.hit svg .st{ stroke: var(--hp-green); }

/* file tabs double as the demo picker */
.b3d-home .hp-tabs{
	overflow-x: auto;
	scrollbar-width: none;
}
.b3d-home .hp-tabs::-webkit-scrollbar{ display: none; }
.b3d-home button.b3d-ide-tab{
	font: 600 11.5px 'Inter','Segoe UI',Tahoma,sans-serif;
	border-radius: 6px 6px 0 0;
	margin: 0;
	cursor: pointer;
	flex: none;
}
.b3d-home button.b3d-ide-tab:focus-visible{ outline: 2px solid var(--hp-aqua); outline-offset: -2px; }
.b3d-home button.b3d-ide-tab:not(.on):hover{ color: #FFFFFF; background: rgba(45,110,159,0.6); }

/* the editor surface */
.b3d-home .hp-editor{
	position: relative;
	height: calc(var(--hp-rows) * var(--hp-lh) + 20px);
	overflow: hidden;
	background: var(--hp-deeper);
	font: var(--hp-fs)/var(--hp-lh) 'JetBrains Mono','Consolas','Courier New',monospace;
}
.b3d-home .hp-editor .b3d-codegrid{
	font: inherit;
	height: 100%;
	padding: 10px 0;
	overflow: hidden;
}
.b3d-home .hp-gutter{
	position: absolute; left: 0; top: 0; bottom: 0;
	width: var(--hp-gutter);
	background: rgba(18,52,79,0.75);
	border-right: 1px solid rgba(112,173,209,0.14);
}
.b3d-home .hp-view{
	position: absolute; left: 0; right: 0; top: 10px; bottom: 10px;
	overflow: hidden;
}
.b3d-home .hp-scroller{ position: absolute; left: 0; right: 0; top: 0; }
.b3d-home .hp-line{
	position: relative;
	display: flex;
	height: var(--hp-lh);
	white-space: pre;
}
.b3d-home .hp-ln{
	flex: none;
	width: var(--hp-gutter);
	box-sizing: border-box;
	padding-right: 12px;
	text-align: right;
	color: #A8CFEA;
	opacity: 0.55;
	user-select: none;
}
.b3d-home .hp-src{ padding-left: 14px; color: #EEEEEE; }
.b3d-home .hp-bar{
	position: absolute; left: var(--hp-gutter); right: 0;
	height: var(--hp-lh);
	pointer-events: none;
}
.b3d-home .hp-bar.run{ background: rgba(0,120,212,0.62); }
.b3d-home .hp-bar.block{ background: rgba(0,120,212,0.38); }
.b3d-home .hp-bar.flash{ background: rgba(170,255,255,0.3); box-shadow: inset 3px 0 0 var(--hp-aqua); }
.b3d-home .hp-mark{
	position: absolute;
	border: 2px solid var(--hp-yellow);
	background: rgba(255,238,0,0.17);
	border-radius: 5px;
	pointer-events: none;
}
.b3d-home .hp-caret{
	position: absolute;
	width: 2px;
	background: #FFFFFF;
	pointer-events: none;
}
.b3d-home .hp-arrow{
	position: absolute; left: 7px; top: 0;
	width: 0; height: 0;
	border-left: 12px solid var(--hp-green);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	filter: drop-shadow(0 0 5px rgba(0,255,102,0.6));
	pointer-events: none;
}
.b3d-home .hp-bp{
	position: absolute; left: 6px; top: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #F03030;
	box-shadow: 0 0 0 2px rgba(14,42,64,0.9), 0 0 8px rgba(240,48,48,0.6);
	pointer-events: none;
}
.b3d-home .hp-sbar{
	position: absolute; right: 3px;
	width: 5px;
	border-radius: 3px;
	background: rgba(112,173,209,0.5);
}
.b3d-home .hp-ide .b3d-ide-status{ flex-wrap: nowrap; white-space: nowrap; }
.b3d-home .hp-status-l{ overflow: hidden; text-overflow: ellipsis; }
.b3d-home .hp-ide .b3d-ide-status .warn{ color: var(--hp-yellow); }
.b3d-home .hp-ide .b3d-ide-status .run{ color: var(--hp-aqua); text-shadow: 0 0 10px rgba(51,255,221,0.35); }

/* the program's window, and the dashed spot it opens in */
.b3d-home .hp-slot{
	position: absolute;
	right: 0; top: 50%;
	width: 52%;
	translate: 0 -50%;
	z-index: 2;
}
.b3d-home .hp-ghost{
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	border: 2px dashed rgba(170,255,255,0.26);
	border-radius: 10px;
	color: rgba(196,220,234,0.7);
	font: 600 13px 'Inter','Segoe UI',Tahoma,sans-serif;
	text-align: center;
	padding: 12px;
}
.b3d-home .hp-ghost-key{
	font: 700 15px 'Inter','Segoe UI',sans-serif;
	color: var(--hp-deep);
	background: #F5FFFF;
	border-radius: 8px;
	padding: 7px 14px;
	box-shadow: 0 4px 0 rgba(112,173,209,0.6);
	opacity: 0.8;
}
.b3d-home .hp-win{
	position: relative;
	border-radius: 8px;
	background: #F5FFFF;
	box-shadow: 0 26px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(18,52,79,0.35);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform-origin: 50% 50%;
}
.b3d-home .hp-win-title{
	height: 30px;
	display: flex; align-items: center; gap: 8px;
	padding: 0 12px 0 10px;
	color: #12344F;
	font: 400 13px 'Segoe UI','Inter',Tahoma,sans-serif;
}
.b3d-home .hp-win-icon{ width: 16px; height: 16px; }
.b3d-home .hp-win-btns{ margin-left: auto; display: flex; gap: 20px; align-items: center; }
.b3d-home .hp-win-btns i{ position: relative; display: block; width: 10px; height: 10px; }
.b3d-home .hp-win-btns .min::before{ content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1.3px solid #12344F; }
.b3d-home .hp-win-btns .max::before{ content: ""; position: absolute; inset: 0; border: 1.3px solid #12344F; }
.b3d-home .hp-win-btns .close::before, .b3d-home .hp-win-btns .close::after{
	content: ""; position: absolute; left: -1px; right: -1px; top: 4.5px;
	border-top: 1.3px solid #12344F;
	transform: rotate(45deg);
}
.b3d-home .hp-win-btns .close::after{ transform: rotate(-45deg); }
.b3d-home .hp-win-client{
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 1px 1px 1px;
	background: #000000;
	overflow: hidden;
	border-radius: 0 0 7px 7px;
}
.b3d-home .hp-gl{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.b3d-home .hp-nogl{
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	text-align: center;
	color: var(--hp-muted);
	font: 13px/1.5 'Inter','Segoe UI',sans-serif;
}

.b3d-home .hp-paused{
	position: absolute; left: 50%; top: 7px; z-index: 4;
	translate: -50% 0;
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--hp-yellow);
	color: var(--hp-deep);
	font: 700 11.5px/1.6 'Inter','Segoe UI',sans-serif;
	pointer-events: none;
}
.b3d-home .hp-bigplay{
	position: absolute; left: 50%; top: 50%; z-index: 5;
	translate: -50% -50%;
	display: flex; align-items: center; gap: 10px;
	padding: 13px 26px 13px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--hp-green);
	color: var(--hp-deep);
	box-shadow: 0 5px 0 var(--hp-panel), 0 10px 26px rgba(0,0,0,0.5);
	font: 700 17px/1 'Inter','Segoe UI',sans-serif;
	cursor: pointer;
}
.b3d-home .hp-bigplay:hover{ filter: brightness(1.06); }
.b3d-home .hp-bigplay svg{ width: 20px; height: 20px; fill: currentColor; }

/* what Blip is saying */
.b3d-home .hp-caption{
	display: flex; align-items: center; gap: 12px;
	min-height: 78px;
	padding: 9px 18px;
	background: var(--hp-panel);
	border-top: 1px solid rgba(112,173,209,0.4);
}
.b3d-home .hp-avatar{ flex: none; width: 54px; height: 54px; }
.b3d-home .hp-caption-text{
	flex: 1 1 auto;
	margin: 0;
	color: #FFFFFF;
	font: 16px/1.45 'Inter','Segoe UI',Tahoma,sans-serif;
}
.b3d-home .hp-caption-text code{
	font: 600 14.5px 'JetBrains Mono','Consolas',monospace;
	color: var(--hp-cyan);
	padding: 0 2px;
}
.b3d-home .hp-caption-text .pending,
.b3d-home .hp-caption-text .pending code{ color: transparent; }
.b3d-home .hp-caption-text .intro{ color: var(--hp-muted); }
.b3d-home .hp-sr{
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* transport */
.b3d-home .hp-controls{
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px;
	background: var(--hp-deep);
	border-top: 1px solid var(--hp-raised);
}
.b3d-home .hp-controls button{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 32px;
	padding: 0 8px;
	color: #FFFFFF;
	background: var(--hp-panel);
	border: 1px solid var(--hp-raised);
	border-radius: 5px;
	cursor: pointer;
}
.b3d-home .hp-controls button:hover{ background: var(--hp-hover); }
.b3d-home .hp-controls button:focus-visible,
.b3d-home .hp-progress:focus-visible{ outline: 2px solid var(--hp-aqua); outline-offset: 1px; }
.b3d-home .hp-controls svg{ width: 18px; height: 18px; fill: currentColor; }
.b3d-home .hp-controls svg .st{ fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.b3d-home .hp-controls .hp-play{ min-width: 46px; color: var(--hp-deep); background: var(--hp-green); border-color: var(--hp-green); }
.b3d-home .hp-controls .hp-play:hover{ background: var(--hp-cyan); }
.b3d-home .hp-play .i-pause, .b3d-home .hp-play.playing .i-play,
.b3d-home .hp-sound .i-on, .b3d-home .hp-sound[aria-pressed="true"] .i-off{ display: none; }
.b3d-home .hp-play.playing .i-pause, .b3d-home .hp-sound[aria-pressed="true"] .i-on{ display: block; }
.b3d-home .hp-progress{
	display: flex; gap: 4px;
	flex: 1 1 auto;
	height: 18px;
	padding: 4px 0;
	cursor: pointer;
	touch-action: none;
	border-radius: 3px;
}
.b3d-home .hp-progress .seg{
	position: relative;
	flex: 1 1 0;
	min-width: 8px;
	overflow: hidden;
	background: var(--hp-raised);
	border-radius: 3px;
}
.b3d-home .hp-progress .seg.on{ box-shadow: 0 0 0 1px rgba(170,255,255,0.35); }
.b3d-home .hp-progress .fill{
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 0;
	background: var(--hp-green);
}
.b3d-home .hp-time{
	min-width: 86px;
	text-align: center;
	color: var(--hp-muted);
	font: 12px/1 'JetBrains Mono','Consolas',monospace;
}

/* ---------------------------------------------- four-up feature cards */
.b3d-home .grid.four{ grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------- effects gallery */
.b3d-home .hp-fx{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.b3d-home .hp-fx-card{
	margin: 0;
	display: flex; flex-direction: column;
	background: var(--hb-card);
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-radius);
	overflow: hidden;
	outline: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.b3d-home .hp-fx-card:hover, .b3d-home .hp-fx-card:focus-visible{
	border-color: var(--hb-line-strong);
	box-shadow: 0 10px 30px var(--hb-shadow);
}
.b3d-home .hp-fx-card:focus-visible{ outline: 2px solid var(--hb-aqua); outline-offset: 2px; }
.b3d-home .hp-fx-pics{
	position: relative;
	aspect-ratio: 16 / 10;
	background: #0E2A40;
}
.b3d-home .hp-fx-pics img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.b3d-home .hp-fx-pics img.on{ transition: opacity 0.35s ease; }
.b3d-home .hp-fx-card.show-off .hp-fx-pics img.on{ opacity: 0; }
@media (hover: hover){
	.b3d-home .hp-fx-card:hover .hp-fx-pics img.on{ opacity: 0; }
}
.b3d-home .hp-fx-state{
	position: absolute; left: 10px; top: 10px;
	font: 700 10.5px 'Inter','Segoe UI',sans-serif;
	letter-spacing: 0.14em; text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	color: #052E18;
	background: #00FF66;
	box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.b3d-home .hp-fx-state .without{ display: none; }
.b3d-home .hp-fx-card.show-off .hp-fx-state{ color: #12344F; background: #F5FFFF; }
.b3d-home .hp-fx-card.show-off .hp-fx-state .with{ display: none; }
.b3d-home .hp-fx-card.show-off .hp-fx-state .without{ display: inline; }
@media (hover: hover){
	.b3d-home .hp-fx-card:hover .hp-fx-state{ color: #12344F; background: #F5FFFF; }
	.b3d-home .hp-fx-card:hover .hp-fx-state .with{ display: none; }
	.b3d-home .hp-fx-card:hover .hp-fx-state .without{ display: inline; }
}
.b3d-home .hp-fx-card figcaption{ padding: 13px 15px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.b3d-home .hp-fx-card h3{
	font: 700 15.5px var(--hb-font-display); letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--hb-cyan);
	margin: 0;
}
.b3d-home .hp-fx-card h3 span{
	font: 600 10.5px var(--hb-font-body); letter-spacing: 0.02em; text-transform: none;
	color: var(--hb-muted);
	margin-left: 6px;
}
.b3d-home .hp-fx-card p{ margin: 0; font-size: 13px; color: var(--hb-muted); }
.b3d-home .hp-fx-card code{
	display: block;
	margin-top: auto;
	padding: 7px 10px 7px 26px;
	text-indent: -16px;
	font: 600 11.5px/1.55 'JetBrains Mono','Consolas',monospace;
	background: #0E2A40;
	border: 1px solid rgba(112,173,209,0.3);
	border-radius: 6px;
	white-space: normal;
	/* a code snippet is always a dark code surface, whatever the skin */
	--code-fg: #EEEEEE; --code-k: #AAFFFF; --code-s: #00FF66; --code-c: #FFEE00; --code-n: #33FFDD; --code-i: #FFFFFF;
}

.b3d-home .hp-fx-card code .nw{ white-space: nowrap; }

.b3d-home .hp-close{ text-align: center; }
.b3d-home .hp-close .sect-sub{ margin-left: auto; margin-right: auto; }
.b3d-home .hp-close .cta-row{ justify-content: center; }

/* ---------------------------------------------- smaller screens */
@media (max-width: 1060px){
	.b3d-home .hp-head{ grid-template-columns: auto 1fr; }
	.b3d-home .hp-head-cta{ grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
	.b3d-home .hp-head-cta .fineprint{ max-width: none; }
	.b3d-home .hp-fx{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px){
	.b3d-home .grid.four{ grid-template-columns: 1fr 1fr; }
}
/* stacked: the program window sits under the IDE */
@media (max-width: 860px){
	.b3d-home .hp-player{ --hp-rows: 14; }
	.b3d-home .hp-ide{ width: 100%; }
	.b3d-home .hp-slot{ position: relative; top: auto; right: auto; width: 100%; translate: none; margin-top: 16px; }
	.b3d-home .hp-head{ grid-template-columns: 1fr; gap: 14px; }
	.b3d-home .hp-logo{ width: 200px; }
}
@media (max-width: 620px){
	.b3d-home .hp-player{ --hp-rows: 12; --hp-lh: 18px; --hp-fs: 11px; --hp-gutter: 38px; border-radius: 10px; }
	.b3d-home .hp-screen{ padding: 12px; }
	.b3d-home .hp-paused{ left: auto; right: 22px; top: 20px; translate: none; }
	.b3d-home .hp-src{ padding-left: 9px; }
	.b3d-home .hp-arrow{ left: 4px; border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
	.b3d-home .hp-bp{ left: 3px; width: 10px; height: 10px; }
	.b3d-home .hp-dbg{ display: none; }
	.b3d-home .hp-caption{ min-height: 84px; padding: 8px 12px; gap: 10px; }
	.b3d-home .hp-avatar{ width: 42px; height: 42px; }
	.b3d-home .hp-caption-text{ font-size: 14.5px; }
	.b3d-home .hp-caption-text code{ font-size: 13px; }
	.b3d-home .hp-time{ display: none; }
	.b3d-home .hp-head h1{ font-size: 30px; }
	.b3d-home .hp-fx{ grid-template-columns: 1fr; }
	.b3d-home .grid.four{ grid-template-columns: 1fr; }
	.b3d-home .hp-bigplay{ font-size: 14px; padding: 9px 16px 9px 12px; }
}