/*
Theme Name: Valor
Theme URI: https://valorconsulting.example/
Author: Valor Consulting
Author URI: https://valorconsulting.example/
Description: Block theme carrying the Valor design system (navy / mint / paper, Sora / Public Sans / IBM Plex Mono). Presentation only - the 2-minute check funnel and lead capture live in the Valor Azure Funnel plugin, so functionality survives theme changes. Content is built from editable block patterns, not hardcoded.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valor
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, one-column, business
*/

/* Block themes are styled through theme.json + block markup. This file carries the
   theme header (required) plus a few escape-hatch rules for things theme.json does not
   yet cover. Keep additions here minimal - prefer theme.json. */

.valor-aurora-text {
	background: linear-gradient(100deg, #38B6FF, #2D7FF9 30%, #4FC3F7 55%, #7BC8AE 80%, #38B6FF);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* Hero aurora — the Azure word-gradient drifts (BUILD-SPEC §6 / spec-design). */
	animation: valor-aurora 9s linear infinite;
}

@keyframes valor-aurora {
	to {
		background-position: 300% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.valor-aurora-text {
		animation: none;
	}
}

/* Eyebrow pill — slate chip with the signature mint 3px hard offset-shadow (design census). */
.valor-eyebrow {
	display: inline-block;
	width: fit-content;
	margin: 0 0 18px;
	padding: 7px 14px;
	background: #233d6e;
	color: #edeae2;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 6px;
	box-shadow: 3px 3px 0 #7bc8ae;
}

/* The front-page header + hero are both dark; remove the root-layout top gap on <main> so the
   light body background doesn't show as a cream seam between them. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* "Punch" offset shadow utility for tiles/cards placed via patterns. */
.valor-punch {
	box-shadow: 6px 6px 0 #7BC8AE;
}

/* Scroll narrative — sections rise + fade as they enter view. Default = revealed (no-JS / old
   browser safe). Primary: CSS scroll-driven; fallback: IntersectionObserver (valor-reveal.js). */
@supports (animation-timeline: view()) {
	.valor-has-scroll-timeline .valor-reveal {
		animation: valor-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 28%;
	}
}

html.valor-reveal-js .valor-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.valor-reveal-js .valor-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@keyframes valor-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.valor-has-scroll-timeline .valor-reveal,
	html.valor-reveal-js .valor-reveal,
	html.valor-reveal-js .valor-reveal.is-revealed {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}