/* ============================================================
   Holos Materials — design tokens ported from holos-web
   (app/globals.css). Hex values converted from the oklch
   source tokens; keep the two files in sync when the web
   dashboard palette changes.
   ============================================================ */

:root {
	/* Outer page + grid frame (from app/signin) */
	--page: #f0f0f3;
	--grid-border: rgba(0, 0, 45, 0.09);
	--grid-dot: #80838d;

	--background: #ececec;
	--foreground: #13161a;
	--card: #f0f0f0;
	--card-foreground: #1c2126;
	--primary: #f64e1c;
	--primary-foreground: #f0f0f3;
	--secondary: #dedede;
	--secondary-foreground: #80838d;
	--muted-foreground: #737373;
	--accent-foreground: #474747;
	--border: #d9d9dd;

	--font-sans: "Public Sans", ui-sans-serif, -apple-system, sans-serif, system-ui;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;
	--radius: 0.6rem;

	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #18191b;
		--grid-border: rgba(221, 234, 248, 0.08);
		--grid-dot: #777b84;

		--background: #00252b;
		--foreground: #f0f0f3;
		--card: #0a3138;
		--card-foreground: #f0f0f3;
		--primary: #f64e1c;
		--primary-foreground: #f0f0f3;
		--secondary: #13373d;
		--secondary-foreground: #f0f0f3;
		--muted-foreground: #c9cfcf;
		--accent-foreground: #f0f0f3;
		--border: #335155;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 1.5rem;
	min-height: 100svh;
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--page);
	color: var(--foreground);
}

/* ---- Signin-style page frame: rounded panel, grid lines, corner dots ---- */

.page-frame {
	display: grid;
	min-height: calc(100svh - 3rem);
	overflow: hidden;
	border-radius: 12px;
	background: var(--background);
	grid-template-rows: 16px 1fr 16px;
	grid-template-columns: minmax(16px, 1fr) minmax(0, 1080px) minmax(16px, 1fr);
}

@media (min-width: 768px) {
	.page-frame {
		grid-template-columns: minmax(40px, 1fr) minmax(0, 1080px) minmax(40px, 1fr);
	}
}

.frame-cell {
	position: relative;
}

.frame-top { border-bottom: 1px solid var(--grid-border); }
.frame-bottom { border-top: 1px solid var(--grid-border); }
.frame-top.frame-left-col,
.frame-bottom.frame-left-col { border-right: 1px solid var(--grid-border); }
.frame-top.frame-right-col,
.frame-bottom.frame-right-col { border-left: 1px solid var(--grid-border); }
.frame-side-left { border-right: 1px solid var(--grid-border); }
.frame-side-right { border-left: 1px solid var(--grid-border); }

.frame-dot {
	position: absolute;
	z-index: 10;
	width: 5px;
	height: 5px;
	border-radius: 9999px;
	background: var(--grid-dot);
	box-shadow: 0 0 0 2px var(--background);
}

.dot-br { bottom: -3px; right: -3px; }
.dot-bl { bottom: -3px; left: -3px; }
.dot-tr { top: -3px; right: -3px; }
.dot-tl { top: -3px; left: -3px; }

.frame-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.frame-content {
		padding: 2.5rem;
	}
}

p {
	color: var(--card-foreground);
	padding: 0.35rem;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
}

b {
	font-weight: 600;
}

a {
	color: var(--primary);
}

/* ---- Header ---- */

.logo {
	padding-bottom: 1rem;
}

.logo h1 {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--foreground);
}

.logo img {
	background: none;
	height: 2.5rem;
}

.logo h1 span {
	font-family: var(--font-mono);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--muted-foreground);
}

/* Wordmark SVG is black; invert to match the dark foreground */
@media (prefers-color-scheme: dark) {
	.logo img {
		filter: invert(1);
	}
}

/* ---- Grid ---- */

.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 1.25rem;
	padding-bottom: 1rem;
}

.item {
	background: var(--card);
	color: var(--card-foreground);
	border-radius: calc(var(--radius) + 4px);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Tiles that are links: whole card is the hit target, no link styling */
a.item {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* ---- Intro ---- */

.intro-text {
	grid-column-start: 1;
	grid-column-end: 3;
	padding: 0.5rem 1rem;
}

.intro-headline {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--card-foreground);
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ---- Light/dark asset swapping ---- */

.dark-only {
	display: none;
}

@media (prefers-color-scheme: dark) {
	.dark-only {
		display: block;
	}

	.light-only {
		display: none;
	}
}

/* ---- Product cards (Capture / Learn) ---- */

.product-card {
	grid-column: span 2;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	overflow: hidden;
}

/* ---- Product heroes (ported from the onboarding vignette step) ---- */

@keyframes onboarding-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* Variant: rest position is the top of the bob (only travels downward) */
@keyframes onboarding-float-down {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

.product-hero {
	position: relative;
	width: 100%;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

.capture-hero img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.learn-hero {
	align-items: flex-end;
}

.learn-stage {
	position: relative;
	display: flex;
	height: 100%;
	width: 360px;
	max-width: 100%;
	align-items: flex-end;
	justify-content: center;
}

.learn-scissor {
	position: relative;
	z-index: 10;
	height: 200px;
	width: auto;
}

/* Each panel runs the same float keyframe with a different duration and a
   negative delay so they drift out of phase instead of bobbing in unison. */
.learn-panel-left {
	position: absolute;
	left: -40px;
	bottom: 28px;
	height: 160px;
	animation: onboarding-float 5.5s ease-in-out infinite;
	animation-delay: -1.2s;
}

.learn-panel-right {
	position: absolute;
	right: -30px;
	bottom: 10px;
	height: 210px;
	animation: onboarding-float 6.5s ease-in-out infinite;
	animation-delay: -3s;
}

.learn-panel-left img,
.learn-panel-right img {
	height: 100%;
	width: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Bottom course panel peeks up from the floor plane. Outer div handles
   centering; inner div carries the float so the transforms don't clash. */
.learn-panel-bottom {
	position: absolute;
	bottom: -14px;
	left: 50%;
	z-index: 20;
	width: 300px;
	transform: translateX(-50%);
}

.learn-panel-bottom-float {
	animation: onboarding-float-down 7s ease-in-out infinite;
	animation-delay: -2s;
}

.learn-panel-bottom img {
	width: 100%;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.product-card .product-icon {
	width: 3rem;
	height: 3rem;
	border-radius: calc(var(--radius) - 2px);
	margin-bottom: 0.5rem;
}

.product-card h2 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--card-foreground);
}

.product-card p {
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	color: var(--muted-foreground);
}

.product-link {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--primary);
	text-decoration: none;
	underline-offset: 4px;
}

.product-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Talk with the founders ---- */

.founders-block {
	grid-column: span 4;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.75rem;
}

.avatar-group {
	display: flex;
}

.avatar-group img {
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	object-fit: cover;
	border: 2px solid var(--card);
}

.avatar-group img + img {
	margin-left: -0.75rem;
}

.founders-copy h2 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--card-foreground);
}

.founders-copy p {
	margin: 0.375rem 0 0;
	padding: 0;
	font-size: 0.9375rem;
	color: var(--muted-foreground);
	max-width: 26rem;
}

/* shadcn primary button */
.btn-primary {
	display: inline-block;
	font-family: inherit;
	font-weight: 500;
	font-size: 0.9375rem;
	background: var(--primary);
	color: var(--primary-foreground);
	border: none;
	border-radius: calc(var(--radius) - 2px);
	box-shadow: var(--shadow-sm);
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition: opacity 150ms ease;
}

.btn-primary:hover {
	opacity: 0.9;
}

/* ---- Link tiles ---- */

.social-block {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.social-block p {
	font-size: 0.9375rem;
	padding: 0 0 1.25rem;
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--card-foreground);
}

.social-logo {
	height: auto;
	width: 5.5rem;
}

.emoji {
	margin: 0;
	width: 2.5rem;
}

/* ---- Responsive ---- */

@media (max-width: 1080px) {

	.logo {
		height: auto;
		padding: 1rem 0 1.5rem;
	}

	.grid-container {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
	}

	.social-block {
		padding: 1rem;
		display: grid;
	}

	.product-card,
	.founders-block {
		grid-column: span 2;
	}

	.a { order: 1; }
	.g { order: 2; }
	.h { order: 3; }
	.e { order: 4; }
	.j { order: 5; }
	.i { order: 6; }
}

@media (max-width: 557px) {

	body {
		padding: 0.75rem;
	}

	.page-frame {
		min-height: calc(100svh - 1.5rem);
	}

	.logo {
		padding: 1rem 0 1.5rem;
	}

	.logo h1 {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.social-block p {
		font-size: 0.875rem;
	}
}

@media (max-width: 320px) {

	.social-block p {
		font-size: 0.8125rem;
	}

	.social-logo {
		height: auto;
		width: 3.75rem;
	}
}