/*
 * Naamio Space: the naamio.space holding page.
 *
 * Compact first. Sizes are fluid, set in container units, so text and spacing grow with the
 * space available instead of jumping at breakpoints. Layout changes are container queries on
 * the element whose space they depend on; there are no viewport media queries for layout.
 * Colour comes from light-dark() and color-mix(), following the visitor's preference. Motion
 * is an enhancement: it runs only where the browser supports it and the visitor has not asked
 * for reduced motion.
 *
 * The design follows the slide deck: the brand's pale blue-grey ground and blue gradient,
 * rounded panels and pills, and the dots of the marks.
 */

@layer tokens, base, layout, components, motion;

@font-face {
	font-family: "MuseoModerno";
	src: url("/assets/fonts/museomoderno.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

/* An angle the browser can interpolate, so the anchor's ring can turn smoothly. */
@property --ring-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@layer tokens {
	:root {
		color-scheme: light dark;

		/* Brand colours, from the Naamio and Naamio Space marks. */
		--naamio-blue: #177dff;
		--naamio-deep: #004bab;
		--naamio-navy: #001b3e;
		--naamio-ground: #d8e0e8;

		--page: light-dark(var(--naamio-ground), #07111f);
		--surface: light-dark(color-mix(in srgb, #fff 62%, transparent), color-mix(in srgb, #13213a 72%, transparent));
		--surface-solid: light-dark(#f4f7fa, #13213a);
		--border: light-dark(color-mix(in srgb, #fff 80%, transparent), color-mix(in srgb, #8ab8ff 18%, transparent));
		--text: light-dark(var(--naamio-navy), #e6eefb);
		--text-muted: light-dark(#3a4a60, #b7c4d8);
		--accent: light-dark(var(--naamio-deep), #8ab8ff);
		--focus: light-dark(var(--naamio-blue), #8ab8ff);
		--glow: light-dark(color-mix(in srgb, var(--naamio-blue) 30%, transparent), color-mix(in srgb, var(--naamio-blue) 38%, transparent));
		--dots: light-dark(color-mix(in srgb, var(--naamio-deep) 22%, transparent), color-mix(in srgb, #8ab8ff 20%, transparent));
		--shadow: light-dark(0 1.2rem 3rem -1.4rem rgb(0 27 62 / 0.35), 0 1.2rem 3rem -1.4rem rgb(0 0 0 / 0.7));

		/* The brand gradient, and a variant that starts a little deeper wherever it carries
		   white text, so the text keeps a contrast of at least 4.5 to 1. */
		--gradient: linear-gradient(135deg, var(--naamio-blue), var(--naamio-deep));
		--gradient-text: linear-gradient(135deg, light-dark(#1468e0, #8ab8ff), light-dark(var(--naamio-deep), #c3d9ff));
		--gradient-fill: linear-gradient(135deg, #1468e0, var(--naamio-deep));

		--font-display: "MuseoModerno", system-ui, sans-serif;
		--font-body: "Inter", system-ui, sans-serif;
		--font-mono: ui-monospace, "SF Mono", Menlo, monospace;

		/* Fluid steps against the nearest container's inline size. */
		--step-0: clamp(1rem, 0.94rem + 0.3cqi, 1.15rem);
		--step-1: clamp(1.15rem, 1rem + 0.7cqi, 1.5rem);
		--step-2: clamp(1.3rem, 1.05rem + 1.1cqi, 1.9rem);
		--step-4: clamp(2.3rem, 1.3rem + 4.6cqi, 4.8rem);
		--space-xs: clamp(0.5rem, 0.42rem + 0.35cqi, 0.8rem);
		--space-s: clamp(0.75rem, 0.6rem + 0.7cqi, 1.25rem);
		--space-m: clamp(1.25rem, 0.9rem + 1.6cqi, 2.5rem);
		--space-l: clamp(2rem, 1.2rem + 4cqi, 6rem);
		--radius: clamp(1.1rem, 0.9rem + 1cqi, 2rem);

		/* Motion, after Material 3 Expressive: arrivals decelerate into place. */
		--ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
		--duration-arrive: 0.9s;
		--stagger: 0.09s;
	}
}

@layer base {
	*, *::before, *::after { box-sizing: border-box; }

	html {
		background-color: var(--page);
		/* A mesh of brand light behind everything: brighter at the top, fading towards the
		   footer. */
		background-image:
			radial-gradient(60rem 40rem at 85% -10%, var(--glow), transparent 70%),
			radial-gradient(40rem 30rem at -10% 30%, color-mix(in srgb, var(--naamio-blue) 14%, transparent), transparent 70%);
		background-repeat: no-repeat;
	}

	body {
		margin: 0;
		min-block-size: 100dvh;
		display: grid;
		grid-template-rows: auto 1fr auto;
		container: page / inline-size;
		color: var(--text);
		font-family: var(--font-body);
		font-size: var(--step-0);
		line-height: 1.55;
		-webkit-font-smoothing: antialiased;
	}

	h1, h2, h3 {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 600;
		line-height: 1.08;
		text-wrap: balance;
	}
	h1 { font-size: var(--step-4); }
	h3 { font-size: var(--step-1); }

	p { margin: 0; text-wrap: pretty; }

	a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
	a:hover { text-decoration-thickness: 0.14em; }

	:focus-visible {
		outline: 3px solid var(--focus);
		outline-offset: 3px;
		border-radius: 0.4em;
	}

	img { display: block; max-inline-size: 100%; height: auto; }
}

@layer layout {
	.site-header, main, .site-footer {
		inline-size: min(100% - 2 * var(--space-m), 72rem);
		margin-inline: auto;
	}

	main {
		display: grid;
		gap: var(--space-l);
		padding-block: var(--space-m) var(--space-l);
	}
}

@layer components {
	.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

	.icon {
		inline-size: 1.25em;
		block-size: 1.25em;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex: none;
	}

	/* Header: the product's name and mark, with the badge beside it, wrapping beneath it when
	   space is short. */
	.site-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		padding-block-start: var(--space-m);
	}

	.lockup {
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.01em;
	}
	.lockup img { inline-size: 1.6em; }

	/* Hero: text above the anchor when space is short, beside it when there is room. */
	.hero {
		container: hero / inline-size;
		display: grid;
		gap: var(--space-l);
		align-items: center;
	}

	@container page (inline-size > 52rem) {
		.hero { grid-template-columns: 1.35fr 1fr; }
	}

	.hero-text {
		display: grid;
		justify-items: start;
		gap: var(--space-s);
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
		padding: 0.4em 0.95em 0.4em 0.75em;
		border-radius: 999px;
		background: var(--surface);
		border: 1px solid var(--border);
		backdrop-filter: blur(12px);
		color: var(--text);
		font-size: 0.85em;
		font-weight: 600;
		box-shadow: var(--shadow);
	}
	.badge-dot {
		inline-size: 0.55em;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--gradient);
		box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--naamio-blue) 22%, transparent);
	}

	h1 em {
		font-style: normal;
		background: var(--gradient-text);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.lede { font-size: var(--step-1); color: var(--text-muted); max-inline-size: 30ch; }

	/* The visual anchor: the Naamio Space mark in a glow, on a field of dots that fades at
	   the edges, with a slowly turning ring. The spaces sit on the ring as chips around the
	   foundation they share, with an open place for the spaces still to come. The anchor
	   leaves room at its sides for the chips, so they never push past the page. */
	.anchor {
		container: anchor / inline-size;
		position: relative;
		inline-size: min(100% - 4rem, 30rem);
		aspect-ratio: 1;
		justify-self: center;
		display: grid;
		place-items: center;
		isolation: isolate;
	}
	.anchor::before {
		content: "";
		position: absolute;
		inset: -8%;
		z-index: -2;
		background-image: radial-gradient(circle, var(--dots) 1.4px, transparent 1.6px);
		background-size: 18px 18px;
		mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
	}
	.anchor-glow {
		position: absolute;
		inset: 14%;
		z-index: -1;
		border-radius: 50%;
		background: radial-gradient(circle, var(--glow), transparent 68%);
		filter: blur(10px);
	}
	.anchor-ring {
		position: absolute;
		inset: 10%;
		z-index: -1;
		border-radius: 50%;
		/* A thin ring drawn with a turning conic gradient, masked to its edge. */
		background: conic-gradient(from var(--ring-angle), transparent 0deg, var(--naamio-blue) 90deg, transparent 180deg, var(--naamio-deep) 270deg, transparent 360deg);
		mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
		opacity: 0.7;
	}
	.anchor-mark {
		inline-size: 52%;
		filter: drop-shadow(0 1.5rem 2rem color-mix(in srgb, var(--naamio-deep) 40%, transparent));
	}

	.chip {
		position: absolute;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.55em 1em;
		border-radius: 999px;
		background: var(--surface);
		border: 1px solid var(--border);
		backdrop-filter: blur(14px);
		box-shadow: var(--shadow);
		font-weight: 600;
		font-size: clamp(0.75rem, 0.5rem + 2cqi, 1rem);
		white-space: nowrap;
		color: var(--text);
	}
	.chip .icon { color: var(--accent); }
	.chip-more { padding: 0.55em; color: var(--accent); border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

	/* Where each chip rests when the spaces do not orbit. */
	.chip-data { inset-block-start: 6%; inset-inline-start: -4%; }
	.chip-code { inset-block-start: 60%; inset-inline-end: -6%; }
	.chip-more { inset-block-end: 4%; inset-inline-start: 24%; }

	.benefits h2, .spaces h2 { font-size: var(--step-2); }

	/* Benefits: cards stacked when narrow, in a row when the section has room. */
	.benefits {
		container: benefits / inline-size;
		display: grid;
		gap: var(--space-s);
	}
	.benefits ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--space-s);
	}

	@container benefits (inline-size > 46rem) {
		.benefits ul { grid-template-columns: repeat(3, 1fr); }
	}

	.card {
		display: grid;
		align-content: start;
		gap: var(--space-xs);
		padding: var(--space-m);
		border-radius: var(--radius);
		background: var(--surface);
		border: 1px solid var(--border);
		backdrop-filter: blur(16px);
		box-shadow: var(--shadow);
	}
	.card p { color: var(--text-muted); }
	.card-icon {
		display: grid;
		place-items: center;
		inline-size: 2.75em;
		aspect-ratio: 1;
		margin-block-end: var(--space-xs);
		border-radius: 0.9em;
		background: var(--gradient-fill);
		color: #fff;
		box-shadow: 0 0.6rem 1.4rem -0.6rem color-mix(in srgb, var(--naamio-deep) 70%, transparent);
	}

	/* Spaces: product tiles, stacked when narrow and side by side when the section has room.
	   Each tile carries a pool of brand light in its corner; the last tile is left open, an
	   outline waiting for the spaces still to come. */
	.spaces {
		container: spaces / inline-size;
		display: grid;
		gap: var(--space-s);
	}
	.spaces ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }

	@container spaces (inline-size > 46rem) {
		.spaces ul { grid-template-columns: repeat(3, 1fr); }
	}

	.space {
		display: grid;
		align-content: start;
		gap: var(--space-xs);
		padding: var(--space-m);
		border-radius: var(--radius);
		background:
			radial-gradient(20rem 14rem at 100% 0%, color-mix(in srgb, var(--naamio-blue) 18%, transparent), transparent 70%),
			var(--surface);
		border: 1px solid var(--border);
		backdrop-filter: blur(16px);
		box-shadow: var(--shadow);
	}
	.space p { color: var(--text-muted); }
	.space-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		margin-block-end: var(--space-xs);
	}
	.space .card-icon { margin: 0; }

	.space-more {
		background: none;
		border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, transparent);
		box-shadow: none;
		backdrop-filter: none;
	}
	.space-more .card-icon {
		background: color-mix(in srgb, var(--naamio-blue) 14%, transparent);
		color: var(--accent);
		box-shadow: none;
	}

	/* "Coming soon": a soft tinted pill with the brand dot, an announcement rather than a
	   warning. */
	.status {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.4em 0.95em 0.4em 0.75em;
		border-radius: 999px;
		background: color-mix(in srgb, var(--naamio-blue) 12%, transparent);
		color: var(--accent);
		font-weight: 600;
		font-size: 0.85em;
		white-space: nowrap;
	}
	.status::before {
		content: "";
		inline-size: 0.5em;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--gradient);
	}

	/* Footer: stacked when narrow, spread across the page when there is room. An element
	   cannot query its own size, so the footer asks the page container. */
	.site-footer {
		display: grid;
		gap: var(--space-s);
		justify-items: start;
		padding-block: var(--space-m);
		border-block-start: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
		color: var(--text-muted);
		font-size: 0.9em;
	}
	.wordmark { inline-size: 8rem; }
	.footer-end { display: flex; align-items: center; gap: var(--space-s); }

	.source {
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		border-radius: 50%;
		color: var(--text);
		background: var(--surface);
		border: 1px solid var(--border);
		transition: color 0.2s, background-color 0.2s;
	}
	.source:hover { color: #fff; background: var(--naamio-deep); }

	@container page (inline-size > 36rem) {
		.site-footer { grid-auto-flow: column; justify-content: space-between; align-items: center; }
	}
}

/* Motion: the page arrives in sequence, the mark floats, the ring turns, the spaces orbit
   the foundation, and cards rise into view as they are scrolled to. None of it carries
   meaning, so none of it runs for visitors who have asked for reduced motion. */
@layer motion {
	@media (prefers-reduced-motion: no-preference) {
		/* Arrival: header, headline, lede, then the anchor blooming open behind them. */
		.site-header, .hero h1, .lede { animation: arrive var(--duration-arrive) var(--ease-decelerate) both; }
		.hero h1 { animation-delay: calc(1 * var(--stagger)); }
		.lede { animation-delay: calc(2 * var(--stagger)); }
		.anchor { animation: bloom calc(1.4 * var(--duration-arrive)) var(--ease-decelerate) calc(3 * var(--stagger)) both; }

		.anchor-mark { animation: float 7s ease-in-out infinite; }
		.anchor-ring { animation: turn 24s linear infinite; }
		.chip { animation: float 9s ease-in-out infinite; }
		.chip-code { animation-delay: -3s; }
		.chip-more { animation-delay: -6s; }

		/* Where the browser can move an element along a shape, the chips travel the ring
		   itself, upright, a full turn every 90 seconds and evenly spaced. */
		@supports (offset-path: circle(40% at 50% 50%)) {
			.chip {
				inset: 0 auto auto 0;
				offset-path: circle(40% at 50% 50%);
				offset-anchor: center;
				offset-rotate: 0deg;
				animation: orbit 90s linear infinite;
			}
			.chip-data { animation-delay: -75s; }
			.chip-code { animation-delay: -25s; }
			.chip-more { animation-delay: -50s; }
		}

		/* The rise starts from partial opacity, so a card is never hidden: a static capture, a
		   reader view or a page printed before scrolling still shows every card. */
		@supports (animation-timeline: view()) {
			.card, .space {
				animation: rise linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 50%;
			}
		}
	}

	@keyframes arrive {
		from { opacity: 0; translate: 0 1.25rem; }
	}

	@keyframes bloom {
		from { opacity: 0; scale: 0.9; }
	}

	@keyframes orbit {
		to { offset-distance: 100%; }
	}

	@keyframes float {
		50% { translate: 0 -0.6rem; }
	}

	@keyframes turn {
		to { --ring-angle: 360deg; }
	}

	@keyframes rise {
		from { opacity: 0.4; translate: 0 1rem; }
	}
}