/*
 * Foundry theme — global stylesheet.
 *
 * theme.json owns the design tokens and most element styling. This file carries
 * only the cross-cutting rules theme.json can't express, all keyed off the
 * theme.json CSS custom properties so a brand style variation re-themes them for
 * free. Per-block styling belongs in that block's own style.css, not here.
 */

/* ---- Base behaviour -------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* ---- Accessibility --------------------------------------------------------- */

/* Visible keyboard focus ring on interactive elements (theme.json can't set
   :focus-visible globally). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Skip-to-content link — hidden until focused. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--md);
	padding: 0.75rem 1.25rem;
	position: fixed;
	left: 1rem;
	top: 1rem;
	z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---- Theme structure ------------------------------------------------------- */

/* Sticky, subtly separated site header. Brand variations restyle via tokens. */
.foundry-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Card hover lift on archive/index grids (the post-template group). */
.wp-block-query .wp-block-post-template > .wp-block-group {
	overflow: hidden;
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-query .wp-block-post-template > .wp-block-group:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* Featured images inside cards fill their box cleanly. */
.wp-block-query .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===========================================================================
 * Motion & decoration system (brand-neutral, token-driven)
 * ---------------------------------------------------------------------------
 * The house "aliveness" layer: float / pulse / shimmer / blob keyframes, a
 * scroll-reveal entrance, and hover-lift + glass utilities. Foundry blocks
 * EMIT the opt-in classes below (is-floating, has-glow, has-shimmer,
 * foundry-reveal, …); this file owns the animation vocabulary so every site on
 * the theme gets it for free. Everything is keyed off tokens — a brand tunes
 * intensity/colour via the --foundry-motion-* custom properties (theme.json
 * `custom` is off, so these live here) — and every animation is disabled under
 * prefers-reduced-motion at the foot of this file.
 * ======================================================================== */

:root {
	/* Tuning knobs — a brand style variation or child theme overrides these. */
	--foundry-motion-lift: -4px;                 /* hover-lift travel */
	--foundry-motion-speed: 0.3s;                /* hover/transition speed */
	--foundry-float-distance: 10px;              /* gentle bob travel */
	--foundry-float-duration: 6s;
	--foundry-pulse-duration: 2.4s;
	--foundry-shimmer-duration: 3s;
	--foundry-blob-duration: 7s;
	--foundry-reveal-distance: 24px;             /* scroll-reveal slide-up */
	--foundry-reveal-duration: 0.6s;
	--foundry-reveal-stagger: 90ms;              /* per-index delay step */
	/* Decorative colours default to the brand palette (with fallbacks). */
	--foundry-blob-color-1: var(--wp--preset--color--accent, #e2b23c);
	--foundry-blob-color-2: var(--wp--preset--color--primary, #c8963e);
	--foundry-blob-color-3: var(--wp--preset--color--secondary, #3a8f8f);
	--foundry-glow-color: var(--wp--preset--color--primary, #c8963e);
}

/* ---- Keyframes ------------------------------------------------------------- */

@keyframes foundry-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(calc(-1 * var(--foundry-float-distance))); }
}

@keyframes foundry-pulse {
	0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgb(from var(--foundry-glow-color) r g b / 0.5); }
	50%      { opacity: 0.65; box-shadow: 0 0 0 6px rgb(from var(--foundry-glow-color) r g b / 0); }
}

@keyframes foundry-shimmer {
	0%   { transform: translateX(-120%) skewX(-18deg); }
	100% { transform: translateX(220%)  skewX(-18deg); }
}

@keyframes foundry-blob {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(6%, -4%) scale(1.08); }
	66%      { transform: translate(-5%, 5%) scale(0.94); }
}

/* ---- Opt-in motion classes (blocks add these) ----------------------------- */

/* Gentle vertical bob — hero cards, floating asides. */
.is-floating {
	animation: foundry-float var(--foundry-float-duration) ease-in-out infinite;
	will-change: transform;
}

/* Pulsing status dot — the "now accepting work" badge, etc. Put on the dot. */
.is-pulsing {
	animation: foundry-pulse var(--foundry-pulse-duration) ease-in-out infinite;
	border-radius: 50%;
}

/* Radial glow behind a card (cta-card, hero card). */
.has-glow { position: relative; }
.has-glow::before {
	content: "";
	position: absolute;
	inset: -18%;
	z-index: -1;
	background: radial-gradient(closest-side, rgb(from var(--foundry-glow-color) r g b / 0.28), transparent 72%);
	pointer-events: none;
}

/* Shimmer sweep across a surface (cta-card). Element needs overflow clipping. */
.has-shimmer { position: relative; overflow: hidden; }
.has-shimmer::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.28), transparent);
	animation: foundry-shimmer var(--foundry-shimmer-duration) ease-in-out infinite;
	pointer-events: none;
}

/* Hover-lift utility — promoted from the archive-card default so any block can
   opt a card into the lift. (The query-loop cards above already have it.) */
.has-hover-lift {
	transition: transform var(--foundry-motion-speed) ease, box-shadow var(--foundry-motion-speed) ease;
}
.has-hover-lift:hover {
	transform: translateY(var(--foundry-motion-lift));
	box-shadow: var(--wp--preset--shadow--lg);
}

/* Frosted-glass card treatment. Solid fallback first so browsers without
   relative-colour syntax still render a readable surface. */
.has-glass {
	background-color: var(--wp--preset--color--surface, #fff);
	background-color: rgb(from var(--wp--preset--color--surface, #fff) r g b / 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgb(from var(--wp--preset--color--border, #e5e5e5) r g b / 0.6);
}

/* ---- Decorative blob layer ------------------------------------------------ */
/* A section adds a .foundry-blobs child holding up to 3 .foundry-blob spans;
   they drift behind the content. Purely decorative, aria-hidden in markup. */
.foundry-blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.foundry-blobs + * { position: relative; z-index: 1; }
.foundry-blob {
	position: absolute;
	width: 42vmax;
	max-width: 640px;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.35;
	animation: foundry-blob var(--foundry-blob-duration) ease-in-out infinite;
}
.foundry-blob:nth-child(1) { top: -12%; left: -8%;  background: var(--foundry-blob-color-1); }
.foundry-blob:nth-child(2) { top: 30%;  right: -10%; background: var(--foundry-blob-color-2); animation-delay: -2.3s; }
.foundry-blob:nth-child(3) { bottom: -14%; left: 25%; background: var(--foundry-blob-color-3); animation-delay: -4.6s; }

/* ---- Scroll-reveal -------------------------------------------------------- */
/* Sections tagged .foundry-reveal start hidden ONLY once motion.js has flagged
   the document ready (.foundry-motion-ready) — so with JS off, content is fully
   visible (no hidden-forever risk). motion.js then adds .is-revealed on enter.
   Stagger via inline style="--foundry-reveal-index:N". */
.foundry-motion-ready .foundry-reveal {
	opacity: 0;
	transform: translateY(var(--foundry-reveal-distance));
	transition: opacity var(--foundry-reveal-duration) ease-out,
	            transform var(--foundry-reveal-duration) ease-out;
	transition-delay: calc(var(--foundry-reveal-index, 0) * var(--foundry-reveal-stagger));
	will-change: opacity, transform;
}
.foundry-motion-ready .foundry-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---- Reduced-motion: disable the whole vocabulary ------------------------- */
@media (prefers-reduced-motion: reduce) {
	.is-floating,
	.is-pulsing,
	.has-shimmer::after,
	.foundry-blob {
		animation: none !important;
	}
	.has-hover-lift { transition: none; }
	.has-hover-lift:hover { transform: none; }
	/* Reveal targets snap visible — motion.js also short-circuits, but guard CSS-side. */
	.foundry-motion-ready .foundry-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}