/*
Theme Name: Bonelight
Theme URI: https://bonelight.studio
Author: Bonelight Studio
Description: Minimal block theme for an animation and VFX studio. Dark specimen plate, hairline rules, monospace annotation. Ships a [unicorn] shortcode for embedding Unicorn Studio WebGL scenes.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bonelight
*/

/* ---------------------------------------------------------------
   Bonelight
   Colours, fonts and spacing live in theme.json — edit them there.
   This file handles layout, the hero, and the annotation details.
   --------------------------------------------------------------- */

:root {
	--bl-hairline: rgba(230, 227, 220, 0.14);
	--bl-hairline-strong: rgba(230, 227, 220, 0.32);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Keyboard focus stays visible everywhere. Do not remove. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--cobalt-lift);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Registration mark — the small solid square from the plate image.
   Used in the header and as the hero anchor.
   --------------------------------------------------------------- */

.bl-mark {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--wp--preset--color--bone);
	flex: none;
}

/* ---------------------------------------------------------------
   Header — floats over the hero, does not push it down.
   --------------------------------------------------------------- */

.bl-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 10;
	padding: var(--wp--preset--spacing--40) var(--wp--custom--gutter);
	mix-blend-mode: difference;
}

.bl-header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.bl-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bl-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--bone);
}

.bl-header .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------
   Hero — the WebGL scene is the page's thesis. Everything else
   in the viewport is annotation laid on top of it.
   --------------------------------------------------------------- */

.bl-hero {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: clip;
}

.bl-hero .bl-scene {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
}

/* Fallback while the scene loads or if WebGL is unavailable. */
.bl-scene {
	background:
		radial-gradient(70% 90% at 72% 60%, rgba(27, 79, 168, 0.55), transparent 70%),
		var(--wp--preset--color--void);
	width: 100%;
}

.bl-hero__overlay {
	position: relative;
	width: 100%;
	padding: var(--wp--custom--gutter);
	padding-block-end: clamp(2rem, 6vh, 5rem);
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.bl-hero__title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: clamp(2.5rem, 7vw, 6rem);
	font-weight: 500;
	line-height: 0.94;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--bone);
}

.bl-hero__sub {
	margin: 0;
	max-width: 36ch;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--graphite);
}

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */

.bl-section {
	padding-block: clamp(4rem, 12vh, 9rem);
	border-block-start: 1px solid var(--bl-hairline);
}

/* An eyebrow is a catalogue number, not decoration. Use it only
   where the label carries real information (department, year, code). */
.bl-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
	margin-block-end: 1.5rem;
}

.bl-section h2 {
	font-family: var(--wp--preset--font-family--grotesk);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

/* ---------------------------------------------------------------
   Long-form content
   --------------------------------------------------------------- */

.wp-block-post-content a {
	color: var(--wp--preset--color--bone);
	text-decoration-color: var(--bl-hairline-strong);
	text-underline-offset: 0.25em;
}

.wp-block-post-content a:hover {
	color: var(--wp--preset--color--cobalt-lift);
	text-decoration-color: currentColor;
}

hr.wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--bl-hairline);
	opacity: 1;
}

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

.bl-footer {
	border-block-start: 1px solid var(--bl-hairline);
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
}

.bl-footer a {
	color: inherit;
	text-decoration: none;
}

.bl-footer a:hover {
	color: var(--wp--preset--color--bone);
}

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */

@media (max-width: 599px) {
	.bl-header {
		mix-blend-mode: normal;
	}

	.bl-hero {
		min-height: 92svh;
	}
}