/* Wirecraft Studio holding page: one screen in the ember brand scheme (warm
   near-black, orange voxels, cyan wire). No framework, no build step. */

:root {
	--bg: #140f0c;
	--panel: #1c1511;
	--line: #33271f;
	--text: #fff4ea;
	--muted: #bfae9f;
	--accent: #ff7a2f;
	--accent-soft: rgba(255, 122, 47, 0.12);
	--accent-2: #7cf2e4;
	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* A faint wash behind everything so the page is not a flat rectangle. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(60rem 30rem at 50% -10%, rgba(255, 122, 47, 0.10), transparent 70%),
		radial-gradient(40rem 24rem at 90% 110%, rgba(124, 242, 228, 0.05), transparent 70%);
	pointer-events: none;
}

main {
	position: relative;
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(3rem, 12vh, 8rem) 1.25rem 3rem;
}

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

.intro { text-align: center; }

/* The logo box is a 760x850 crop of the 1920x1080 animation (x 580-1340,
   y 180-1030). That holds everything the clip draws except the faint tops of
   the crane cables, which the mask fades out so the crop edge never shows.
   The video is sized and offset so that crop fills the box. The static image
   is the held final frame of that same crop, so the swap is seamless. */
.logo {
	position: relative;
	width: clamp(11rem, 42vw, 15rem);
	aspect-ratio: 760 / 850;
	margin: 0 auto 1rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
	mask-image: linear-gradient(to bottom, transparent, #000 12%);
}
.logo-static {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s ease-out;
}
.logo video {
	position: absolute;
	width: 252.63%;
	height: 127.06%;
	left: -76.32%;
	top: -21.18%;
	opacity: 0;
	transition: opacity 0.3s ease-out;
}
.logo.is-animated .logo-static { opacity: 0; }
.logo.is-animated video { opacity: 1; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

h1 {
	margin: 0;
	font-size: clamp(2.1rem, 6vw, 3.1rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.tagline {
	margin: 0.6rem 0 0;
	color: var(--muted);
	font-size: clamp(1rem, 2.4vw, 1.15rem);
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--text);
	font-size: 0.85rem;
}
.status .dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--accent-2);
}

/* ---- Products ---- */

.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin-top: clamp(2.5rem, 8vh, 4rem);
}

.card {
	padding: 1.4rem 1.4rem 1.2rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--panel);
}

.card h2 {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

.card p {
	margin: 0 0 1rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.link {
	color: var(--accent);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
}
.link:hover, .link:focus-visible { text-decoration: underline; text-decoration-color: var(--accent-2); }

/* ---- Footer ---- */

footer {
	margin-top: clamp(2.5rem, 8vh, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	text-align: center;
	color: var(--muted);
	font-size: 0.9rem;
}
footer p { margin: 0.35rem 0; }
footer a { color: var(--accent); }
.fine { font-size: 0.8rem; opacity: 0.75; }

@media (prefers-reduced-motion: no-preference) {
	.intro, .products, footer { animation: rise 0.5s ease-out both; }
	.products { animation-delay: 0.08s; }
	footer { animation-delay: 0.16s; }
}
@keyframes rise {
	from { opacity: 0; transform: translateY(0.5rem); }
	to { opacity: 1; transform: none; }
}