/* ==========================================================================
   BASE — reset, typography defaults, accessibility helpers, motion.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
/* Only weights 400/500/600 are shipped (assets/fonts) — avoid faux bold. */
strong, b { font-weight: 600; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--c-ink);
	line-height: var(--lh-head);
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--c-brand-800); }
a:hover { color: var(--c-brand-600); }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	background: var(--c-brand-800); color: var(--c-white); padding: 10px 16px; border-radius: var(--r-sm);
	text-decoration: none; transition: top var(--dur);
}
.skip-link:focus { top: 12px; color: var(--c-white); }

/* Motion helpers ---------------------------------------------------------- */
@keyframes aes-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes aes-pulse {
	0% { box-shadow: 0 0 0 0 rgba(49, 176, 153, 0.55); }
	80%, 100% { box-shadow: 0 0 0 12px rgba(49, 176, 153, 0); }
}
.float { animation: aes-float 6s ease-in-out infinite; }
.float--slow { animation-duration: 7s; animation-delay: -2.5s; }
.pulse { animation: aes-pulse 2.2s ease-out infinite; }

/* Scroll reveal: elements are visible by default. site.js adds .is-pending
   before observing, then .is-visible when they enter the viewport. If JS
   fails, nothing is hidden. */
.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-pending { opacity: 0; transform: translateY(22px); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.reveal.is-pending { opacity: 1; transform: none; }
}