/*
Theme Name: BlackFoot Studios
Theme URI: https://www.blackfootstudios.com
Author: BlackFoot Studios
Author URI: https://www.blackfootstudios.com
Description: Night Ops, a minimalist dark block theme for BlackFoot Studios, an independent game development studio.
Version: 1.3.0
Requires at least: 6.4
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: blackfoot-studios
*/

:root {
	--bfs-bg: var(--wp--preset--color--background, #0b0d0c);
	--bfs-surface: var(--wp--preset--color--surface, #141816);
	--bfs-line: var(--wp--preset--color--line, #2a302c);
	--bfs-text: var(--wp--preset--color--text, #e9e5db);
	--bfs-muted: var(--wp--preset--color--muted, #9aa19b);
	--bfs-accent: var(--wp--preset--color--accent, #ff6a1a);
	--bfs-display: var(--wp--preset--font-family--display);
	--bfs-mono: var(--wp--preset--font-family--mono);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--bfs-accent); color: var(--bfs-bg); }

.wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
.bfs-header {
	background-color: rgba(11, 13, 12, 0.92) !important;
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.bfs-header > .wp-block-group { transition: min-height 0.3s ease; }
.is-scrolled .bfs-header {
	background-color: rgba(11, 13, 12, 0.97) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.is-scrolled .bfs-header > .wp-block-group { min-height: 64px; }
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
}
.bfs-header {
	border-bottom: 1px solid var(--bfs-line);
	position: relative;
	z-index: 10;
}
.bfs-header > .wp-block-group { min-height: 84px; }

.bfs-brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	font-family: var(--bfs-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}
.bfs-brand::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--bfs-text);
	transform: rotate(45deg);
	background: radial-gradient(var(--bfs-accent) 0 38%, transparent 40%) center / 100% 100% no-repeat,
		linear-gradient(var(--bfs-accent), var(--bfs-accent)) center / 8px 8px no-repeat;
	margin-left: 4px;
}
.bfs-brand a { color: var(--bfs-text); text-decoration: none; }

.bfs-nav {
	font-family: var(--bfs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	gap: 2.4rem;
}
.bfs-nav .wp-block-navigation-item__content {
	color: var(--bfs-muted);
	text-decoration: none;
	padding: 0.3rem 0;
	transition: color 0.2s ease;
}
.bfs-nav .wp-block-navigation-item__content::before {
	content: "/ ";
	color: var(--bfs-accent);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.bfs-nav .wp-block-navigation-item__content:hover,
.bfs-nav .wp-block-navigation-item__content:focus-visible { color: var(--bfs-text); }
.bfs-nav .wp-block-navigation-item__content:hover::before,
.bfs-nav .wp-block-navigation-item__content:focus-visible::before { opacity: 1; }
.bfs-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--bfs-bg);
	color: var(--bfs-text);
	padding: 2rem;
}
.bfs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1rem; }

/* ---------- Shared section pieces ---------- */
.bfs-section { position: relative; }

.bfs-label {
	font-family: var(--bfs-mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bfs-muted);
	margin-bottom: 0;
}
.bfs-spec > p + p { margin-top: 0.9rem; }
.bfs-label strong { color: var(--bfs-accent); font-weight: 500; }

.bfs-muted { color: var(--bfs-muted); }

.bfs-rule {
	border-top: 1px solid var(--bfs-line);
	padding-top: 2rem;
}

.bfs-outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--bfs-text);
}

.wp-block-button.bfs-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.wp-block-button.bfs-btn .wp-block-button__link:hover { gap: 1.2rem; }
.wp-block-button.bfs-btn-solid .wp-block-button__link {
	background: var(--bfs-accent);
	border-color: var(--bfs-accent);
	color: var(--bfs-bg);
}
.wp-block-button.bfs-btn-solid .wp-block-button__link:hover {
	background: var(--bfs-text);
	border-color: var(--bfs-text);
}

/* ---------- Hero ---------- */
.bfs-hero {
	position: relative;
	overflow: hidden;
	min-height: calc(100vh - 85px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background:
		radial-gradient(ellipse 60% 50% at 78% 38%, rgba(255, 106, 26, 0.1), transparent 70%),
		var(--bfs-bg);
}
.bfs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--bfs-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--bfs-line) 1px, transparent 1px);
	background-size: 80px 80px;
	opacity: 0.35;
	-webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
	pointer-events: none;
}
.bfs-hero::after {
	content: "";
	position: absolute;
	right: 11%;
	top: 14%;
	width: 250px;
	height: 250px;
	border: 1px solid rgba(233, 229, 219, 0.22);
	border-radius: 50%;
	background:
		url("assets/images/bfs-logo-light.png") center / 136px auto no-repeat,
		linear-gradient(rgba(233, 229, 219, 0.4), rgba(233, 229, 219, 0.4)) top center / 1px 22px no-repeat,
		linear-gradient(rgba(233, 229, 219, 0.4), rgba(233, 229, 219, 0.4)) bottom center / 1px 22px no-repeat,
		linear-gradient(rgba(233, 229, 219, 0.4), rgba(233, 229, 219, 0.4)) left center / 22px 1px no-repeat,
		linear-gradient(rgba(233, 229, 219, 0.4), rgba(233, 229, 219, 0.4)) right center / 22px 1px no-repeat;
	box-shadow: 0 0 0 14px rgba(233, 229, 219, 0.03), 0 0 80px rgba(255, 106, 26, 0.12);
	opacity: 0.92;
	animation: bfsDrift 9s ease-in-out infinite;
	pointer-events: none;
}
.bfs-hero > * { position: relative; z-index: 1; width: 100%; }

.bfs-coords {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
}

.bfs-hero-title {
	font-weight: 900;
	font-size: clamp(3.5rem, 11vw, 10rem);
	line-height: 0.88;
	letter-spacing: -0.01em;
	margin-top: 2rem;
}

.bfs-hero-foot { align-items: flex-end !important; }
.bfs-hero-foot p { max-width: 560px; }

/* ---------- Studio ---------- */
.bfs-stats .wp-block-column { border-left: 1px solid var(--bfs-line); padding-left: 1.25rem; }
.bfs-stat {
	font-family: var(--bfs-display);
	font-weight: 800;
	font-size: 2.5rem;
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}

/* ---------- Next project ---------- */
.bfs-next {
	background:
		repeating-linear-gradient(135deg, rgba(233, 229, 219, 0.025) 0 2px, transparent 2px 14px),
		var(--bfs-surface);
	border-top: 1px solid var(--bfs-line);
	border-bottom: 1px solid var(--bfs-line);
}
.bfs-next-panel {
	border: 1px solid var(--bfs-line);
	background: rgba(11, 13, 12, 0.6);
	position: relative;
}
.bfs-next-panel::before,
.bfs-next-panel::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border-color: var(--bfs-accent);
	border-style: solid;
}
.bfs-next-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.bfs-next-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.bfs-status {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.bfs-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bfs-accent);
	animation: bfsPulse 2.4s ease-in-out infinite;
}

.bfs-redacted {
	display: inline-block;
	background: var(--bfs-text);
	color: transparent;
	user-select: none;
	padding: 0 0.2em;
	line-height: 1.2;
}

/* ---------- Philosophy cards ---------- */
.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.equal-cards .cta-bottom { margin-top: auto; }

.bfs-card {
	border: 1px solid var(--bfs-line);
	background: var(--bfs-surface);
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.bfs-card:hover { border-color: var(--bfs-accent); transform: translateY(-4px); }
.bfs-card-num {
	font-family: var(--bfs-mono);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	color: var(--bfs-accent);
	margin: 0;
}

/* ---------- Logo ---------- */
.bfs-logo { margin: 0; line-height: 0; }
.bfs-logo a { display: inline-block; transition: opacity 0.2s ease; }
.bfs-logo a:hover { opacity: 0.8; }
.bfs-logo img { height: auto; }

/* ---------- Legacy ---------- */
.bfs-legacy-cover { overflow: hidden; }
.bfs-legacy-cover .wp-block-cover__image-background {
	animation: bfsSlowZoom 24s ease-in-out infinite alternate;
	filter: saturate(0.85) contrast(1.05);
}
.bfs-legacy-cover .wp-block-cover__background.has-background-dim {
	opacity: 1 !important;
	background:
		linear-gradient(90deg, rgba(11, 13, 12, 0) 25%, rgba(11, 13, 12, 0.55) 60%, rgba(11, 13, 12, 0.92) 100%),
		linear-gradient(180deg, rgba(11, 13, 12, 0.55) 0%, rgba(11, 13, 12, 0) 25%, rgba(11, 13, 12, 0) 60%, #141816 100%) !important;
}
.bfs-legacy-head { align-items: flex-end !important; }
.bfs-legacy-head .bfs-label { text-align: right; }
.bfs-credit { font-size: 0.65rem; opacity: 0.75; margin-top: 2rem !important; }
@keyframes bfsSlowZoom { from { transform: scale(1); } to { transform: scale(1.06); } }

.bfs-legacy-title {
	font-weight: 900;
	font-size: clamp(3rem, 8vw, 6.5rem);
	line-height: 0.9;
}
.bfs-legacy-card {
	border-left: 2px solid var(--bfs-accent);
	background: var(--bfs-surface);
}
.bfs-notice {
	font-size: 0.85rem;
	color: var(--bfs-muted);
	border-top: 1px solid var(--bfs-line);
	padding-top: 1.25rem;
}

/* ---------- Contact ---------- */
.bfs-contact {
	background:
		radial-gradient(ellipse 50% 60% at 15% 100%, rgba(255, 106, 26, 0.08), transparent 70%),
		var(--bfs-bg);
	border-top: 1px solid var(--bfs-line);
}
.bfs-contact-title { font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: 900; line-height: 0.92; }
.bfs-email a {
	font-family: var(--bfs-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bfs-text);
	text-decoration: none;
	background: linear-gradient(var(--bfs-accent), var(--bfs-accent)) 0 100% / 0 2px no-repeat;
	transition: background-size 0.3s ease, color 0.2s ease;
	padding-bottom: 4px;
}
.bfs-email a:hover { background-size: 100% 2px; color: var(--bfs-accent); }

/* ---------- Footer ---------- */
.bfs-footer { border-top: 1px solid var(--bfs-line); }
.bfs-footer .bfs-brand { font-size: 1.25rem; }
.bfs-footer-legal p { font-size: 0.8rem; color: var(--bfs-muted); margin: 0; }
.bfs-footer-legal p + p { margin-top: 0.5rem; }
.bfs-social .wp-social-link { color: var(--bfs-muted); background: transparent !important; transition: color 0.2s ease, transform 0.2s ease; }
.bfs-social .wp-social-link:hover { color: var(--bfs-accent); transform: translateY(-2px); }
.bfs-social .wp-social-link svg { fill: currentColor; }
.bfs-social .wp-block-social-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Page template ---------- */
.bfs-page-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--bfs-line);
	background:
		radial-gradient(ellipse 50% 70% at 85% 30%, rgba(255, 106, 26, 0.08), transparent 70%),
		var(--bfs-bg);
}
.bfs-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--bfs-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--bfs-line) 1px, transparent 1px);
	background-size: 80px 80px;
	opacity: 0.3;
	-webkit-mask-image: radial-gradient(ellipse at 80% 30%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse at 80% 30%, #000 10%, transparent 70%);
	pointer-events: none;
}
.bfs-page-hero > * { position: relative; z-index: 1; }
.bfs-page-title { font-weight: 900; font-size: clamp(3rem, 8vw, 6.5rem); line-height: 0.9; }

.bfs-content a { text-underline-offset: 3px; }
.bfs-content h2, .bfs-content h3 { margin-top: 2.5rem; }

/* ---------- Motion ---------- */
.fade-up {
	opacity: 0;
	transform: translateY(24px);
	animation: bfsFadeUp 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}
.fade-up.delay-1 { animation-delay: 0.12s; }
.fade-up.delay-2 { animation-delay: 0.3s; }
.fade-up.delay-3 { animation-delay: 0.5s; }

.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.animate-on-scroll.is-visible { opacity: 1; transform: none; }

@keyframes bfsFadeUp { to { opacity: 1; transform: none; } }
@keyframes bfsDrift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-14px, 10px); }
}
@keyframes bfsPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.bfs-hero::after { right: 20px; top: 28px; width: 150px; height: 150px; background-size: 82px auto, 1px 14px, 1px 14px, 14px 1px, 14px 1px; }
	.bfs-hero-foot { align-items: flex-start !important; }
	.bfs-stats .wp-block-column { border-left: 0; border-top: 1px solid var(--bfs-line); padding: 1rem 0 0; }
	.bfs-nav { gap: 1.5rem; }
	.bfs-legacy-cover .wp-block-cover__background.has-background-dim { background: linear-gradient(180deg, rgba(11,13,12,0.2) 0%, rgba(11,13,12,0.35) 45%, #141816 100%) !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.animate-on-scroll,
	.fade-up {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* === Editor: keep animated content visible while editing === */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .animate-on-scroll {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}