/*
 * Hope for Emilia — shared chrome.
 *
 * Every section used to be authored as absolutely positioned items on a
 * design canvas (.hope-canvas/.hope-item/.hope-group, scaled by
 * assets/js/hope-canvas.js); all of them have since been rebuilt as plain
 * flow CSS (assets/scss/_hope-header.scss, _home.scss), so those primitives
 * are gone. What's left is genuinely site-wide: webfonts, the palette custom
 * properties, and a few small pieces still in active use —
 *
 *   .hope-parallax   wrapper assets/js/hope-canvas.js's scroll animation
 *                    transforms (the "Together We Can" photo cards, hands,
 *                    phone mock-up — see _home.scss's .hope-support)
 *   .hope-appear     fade-in on load, applied to whole sections
 *   .hope-noise      fixed film-grain overlay
 *   .hope-anchor     offsets a hash-link target above the fixed header
 */

/* --- Webfonts ------------------------------------------------------------ */

@font-face {
	font-family: 'Bartina';
	src: url('../fonts/Bartina_Semibold.woff2') format('woff2'),
	     url('../fonts/Bartina_Semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bartina';
	src: url('../fonts/Bartina_Bold.woff2') format('woff2'),
	     url('../fonts/Bartina_Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope_Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope_Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope_Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--hope-font-display: 'Bartina', Arial, sans-serif;
	--hope-font-text: 'Manrope', Arial, sans-serif;
	--hope-ink: #524c50;
	--hope-blue: #9d8189; /* dusty-mauve — accent (was a bright blue) */
	--hope-mist: #d8e2dc; /* alabaster-grey */
}

/* --- Scroll animation ---------------------------------------------------- */

.hope-parallax {
	display: inherit;
	width: inherit;
	height: inherit;
	transform-origin: center center;
	will-change: transform;
}

/* --- Chrome shared by every page ----------------------------------------- */

/* Sections fade in on load, as the exported page does. Kept in CSS so nothing
   is ever left invisible when scripting fails. */
.hope-appear {
	animation: hope-appear 0.5s ease-in-out both;
}

@keyframes hope-appear {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Film-grain overlay: an 80px tile at 10% over the whole viewport. */
.hope-noise {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-size: 80px;
	opacity: 0.1;
	pointer-events: none;
}

/* Anchors sit above their section so hash links clear the menu bar. */
.hope-anchor {
	display: block;
	position: relative;
	top: -100px;
	height: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hope-appear {
		animation: none;
	}

	.hope-parallax {
		transform: none !important;
	}
}