/* ─────────────────────────────────────────────────────────────────
 *  Falcon Vision — Utilities
 *
 *  Single-purpose helper classes. Used sparingly — most styling
 *  belongs in components or layouts.
 * ───────────────────────────────────────────────────────────────── */

/* ── Display ──────────────────────────────────────────────────── */
.fv-hidden          { display: none; }
.fv-block           { display: block; }
.fv-inline          { display: inline; }
.fv-inline-block    { display: inline-block; }
.fv-flex            { display: flex; }
.fv-inline-flex     { display: inline-flex; }

@media (min-width: 768px) {
	.fv-hidden\@md    { display: none; }
	.fv-block\@md     { display: block; }
}
@media (min-width: 1024px) {
	.fv-hidden\@lg    { display: none; }
	.fv-block\@lg     { display: block; }
}

/* ── Text alignment ───────────────────────────────────────────── */
.fv-text-left   { text-align: left; }
.fv-text-center { text-align: center; }
.fv-text-right  { text-align: right; }

/* ── Color helpers ────────────────────────────────────────────── */
.fv-text-white       { color: var(--fv-color-white); }
.fv-text-muted       { color: var(--fv-fg-muted); }
.fv-text-subtle      { color: var(--fv-fg-subtle); }
.fv-text-blue        { color: var(--fv-color-blue-light); }
.fv-text-accent      { color: var(--fv-color-accent-light); }
.fv-text-gold        { color: var(--fv-color-gold); }

.fv-bg-black         { background-color: var(--fv-color-black); }
.fv-bg-smoke         { background-color: var(--fv-color-smoke); }
.fv-bg-card          { background-color: var(--fv-bg-card); }

/* ── Typography weights & casing ──────────────────────────────── */
.fv-uppercase   { text-transform: uppercase; }
.fv-tracking-wider   { letter-spacing: var(--fv-tracking-wider); }
.fv-tracking-widest  { letter-spacing: var(--fv-tracking-widest); }
.fv-tracking-extreme { letter-spacing: var(--fv-tracking-extreme); }

.fv-font-display { font-family: var(--fv-font-display); font-style: italic; }
.fv-font-heading { font-family: var(--fv-font-heading); }
.fv-font-body    { font-family: var(--fv-font-body); }

.fv-text-2xs  { font-size: var(--fv-text-2xs); }
.fv-text-xs   { font-size: var(--fv-text-xs); }
.fv-text-sm   { font-size: var(--fv-text-sm); }
.fv-text-base { font-size: var(--fv-text-base); }
.fv-text-lg   { font-size: var(--fv-text-lg); }
.fv-text-xl   { font-size: var(--fv-text-xl); }

.fv-weight-light    { font-weight: var(--fv-weight-light); }
.fv-weight-regular  { font-weight: var(--fv-weight-regular); }
.fv-weight-medium   { font-weight: var(--fv-weight-medium); }
.fv-weight-semibold { font-weight: var(--fv-weight-semibold); }
.fv-weight-bold     { font-weight: var(--fv-weight-bold); }

/* ── Line clamp ───────────────────────────────────────────────── */
.fv-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.fv-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fv-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fv-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Spacing micro-utils (use sparingly — prefer layout primitives) ── */
.fv-mb-0  { margin-bottom: 0; }
.fv-mb-2  { margin-bottom: var(--fv-space-2); }
.fv-mb-4  { margin-bottom: var(--fv-space-4); }
.fv-mb-6  { margin-bottom: var(--fv-space-6); }
.fv-mb-8  { margin-bottom: var(--fv-space-8); }
.fv-mb-12 { margin-bottom: var(--fv-space-12); }

.fv-mt-0  { margin-top: 0; }
.fv-mt-4  { margin-top: var(--fv-space-4); }
.fv-mt-8  { margin-top: var(--fv-space-8); }
.fv-mt-12 { margin-top: var(--fv-space-12); }

/* ── Scroll reveal (driven by /assets/js/scroll-reveal.js) ────── */
.fv-reveal {
	opacity: 0;
	transform: translateY(2rem);
	transition:
		opacity var(--fv-dur-slower) var(--fv-ease-out),
		transform var(--fv-dur-slower) var(--fv-ease-out);
	will-change: opacity, transform;
}

.fv-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.fv-reveal--scale {
	transform: translateY(2rem) scale(0.98);
}
.fv-reveal--scale.is-visible {
	transform: translateY(0) scale(1);
}

.fv-reveal--fade {
	transform: none;
}

/* Stagger children — set --delay on each child via inline style or :nth-child */
.fv-reveal--stagger > * {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity var(--fv-dur-slow) var(--fv-ease-out),
		transform var(--fv-dur-slow) var(--fv-ease-out);
}
.fv-reveal--stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}
.fv-reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.fv-reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.fv-reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.fv-reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.fv-reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.fv-reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.fv-reveal--stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.fv-reveal--stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
	.fv-reveal,
	.fv-reveal--stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Image lift (used on hover-zoomable image tiles) ──────────── */
.fv-img-lift { overflow: hidden; }
.fv-img-lift img {
	transition: transform var(--fv-dur-cinema) var(--fv-ease-out);
}
.fv-img-lift:hover img,
.fv-img-lift:focus-within img {
	transform: scale(1.08);
}

/* ── Position helpers ─────────────────────────────────────────── */
.fv-relative { position: relative; }
.fv-absolute { position: absolute; }
.fv-sticky   { position: sticky; top: 0; }

.fv-overflow-hidden { overflow: hidden; }

/* ── Object-fit ───────────────────────────────────────────────── */
.fv-object-cover    { object-fit: cover; }
.fv-object-contain  { object-fit: contain; }