/* Base layer: reset + accessibility utilities. Design tokens come from tokens.css (Figma). */

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

body {
	margin: 0;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
}

.ppc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--ppc-color-surface, #ffffff);
	color: var(--ppc-color-heading, #111111);
}

.ppc-skip-link:focus {
	left: 0;
}

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

:focus-visible {
	outline: 2px solid var(--ppc-color-accent, currentColor);
	outline-offset: 2px;
}

/* Scroll-reveal utility. Elements with .ppc-reveal start hidden and slide up when main.js
   marks them .is-revealed on viewport entry. Gated behind html.ppc-reveal-ready (set by JS)
   so content never stays hidden without JS. Only opacity + translate animate; a section can
   stagger its elements via --ppc-reveal-delay. */
html.ppc-reveal-ready .ppc-reveal {
	opacity: 0;
	translate: 0 2.5rem;
}

/* Direction variants: slide in from the side instead of from below. */
html.ppc-reveal-ready .ppc-reveal--left {
	translate: -2.5rem 0;
}

html.ppc-reveal-ready .ppc-reveal--right {
	translate: 2.5rem 0;
}

/* The transition lives on the revealed state only: hiding (the ready-class flip on load)
   must be instant, or the content visibly fades out before its reveal. */
html.ppc-reveal-ready .ppc-reveal.is-revealed {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity 0.7s ease-out var(--ppc-reveal-delay, 0s),
		translate 0.7s ease-out var(--ppc-reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
	html.ppc-reveal-ready .ppc-reveal {
		opacity: 1;
		translate: none;
		transition: none;
	}
}