/* ==========================================================================
   FF Ignite — automatic reveal.
   A faint ghost of the fencer eases into full clarity once the section's
   top edge scrolls into view (a timed animation, not scroll-scrubbed).

   JS sets one custom property on .ff-ignite:
     --reveal 0..1  reveal progress (0 = ghost, 1 = fully lit)
   ========================================================================== */

.ff-ignite {
	--ff-ignite-min-height: 100vh;
	--ff-ignite-max-width: 640px;

	/* Theme tokens with safe fallbacks (theme exposes these on :root). */
	--ff-ignite-ink: var(--fg, #1a1814);
	--ff-ignite-spark: var(--cta, #f4c117);

	/* Animation state (overwritten live by JS). */
	--reveal: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ff-ignite-min-height);
	width: 100%;
	margin: 0;
	overflow: hidden;
}

.ff-ignite__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
}

.ff-ignite__figure {
	position: relative;
	width: 100%;
	max-width: var(--ff-ignite-max-width);
	/* Inline `aspect-ratio` (set per-instance from the viewbox attribute)
	   gives the figure a definite height on its own — this fallback only
	   matters if that inline style is ever missing. Both layers below are
	   absolutely positioned, so nothing else defines the figure's size. */
	aspect-ratio: 1675 / 939;
	margin: 0;
	line-height: 0;
	isolation: isolate;
}

/* Both layers are the same artwork, stacked exactly on top of each other —
   both absolutely positioned so neither depends on load order or on being
   "the one in normal flow" to size the figure. */
.ff-ignite__layer {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.ff-ignite__layer--lit {
	/* Reveal from the bottom up: clip away the top (1 - reveal) portion. */
	-webkit-clip-path: inset(calc((1 - var(--reveal)) * 100%) 0 0 0);
	clip-path: inset(calc((1 - var(--reveal)) * 100%) 0 0 0);
	z-index: 2;
}

/* Faint "not yet energized" ghost of the fencer, always visible underneath. */
.ff-ignite__layer--ghost {
	opacity: 0.1;
	filter: grayscale(1) contrast(0.9);
	z-index: 1;
}

/* Warm "energized" tint that fades in on the lit layer as it ignites. */
.ff-ignite--glow .ff-ignite__layer--lit {
	filter: sepia(calc((1 - var(--reveal)) * 0.35))
		saturate(calc(1 + var(--reveal) * 0.15));
}

/* ==========================================================================
   Background mode ([ff_ignite bg="on"]) — use the reveal as a backdrop
   behind other block-editor content instead of as its own standalone
   section.

   Usage in the block editor:
     1. Wrap everything in a Group block. Give it a defined height (its
        "Minimum height" setting) and the additional CSS class
        `ff-ignite-section`.
     2. Add a Shortcode block with [ff_ignite bg="on"] as the FIRST inner
        block — it fills the group, cropped to cover.
     3. Add your Heading/Paragraph blocks after it (still inside the same
        Group); give that inner content the class `ff-ignite-copy` to keep
        it above the image and constrained to the left.

   The figure always exactly fills its container (no aspect-ratio-driven
   sizing here — that overflows and gets unpredictably clipped depending on
   the container's actual proportions). Instead, `object-fit: cover` fills
   the box for any shape, and cropping the source image's blank margin is
   done by scaling the image up further with `transform: scale()`, anchored
   at the same focus point as `object-position` — this way the crop amount
   and framing look the same no matter how tall/narrow the section is.
   Tune both from Settings → FF Ignite.
   ========================================================================== */

.ff-ignite-section {
	position: relative;
	overflow: hidden;
}

.ff-ignite-copy {
	position: relative;
	z-index: 1;
	max-width: 46%;
}

.ff-ignite--bg {
	--ff-ignite-bg-focus-x: 50%;
	--ff-ignite-bg-zoom: 1;
	--ff-ignite-bg-inset-right: 0px;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	/* `right` (not padding) so negative insets work — padding can't go
	   negative, but `right` can, which pushes the box past the section's
	   right edge (cropped by the section's own overflow: hidden). */
	right: var(--ff-ignite-bg-inset-right);
	height: 100%;
	min-height: 0;
	z-index: 0;
	pointer-events: none;
}

.ff-ignite--bg .ff-ignite__stage {
	width: 100%;
	height: 100%;
}

.ff-ignite--bg .ff-ignite__figure {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
}

.ff-ignite--bg .ff-ignite__layer {
	object-fit: cover;
	object-position: var(--ff-ignite-bg-focus-x) center;
	/* Zooms in past the normal cover-fit to crop out blank canvas margin,
	   anchored at the same point object-position uses so the framing stays
	   put as the zoom amount changes. */
	transform: scale(var(--ff-ignite-bg-zoom));
	transform-origin: var(--ff-ignite-bg-focus-x) center;
}

@media (max-width: 780px) {
	.ff-ignite-copy {
		max-width: 100%;
	}

	/* Below this, .ff-ignite-copy goes full-width and stacks instead of
	   sitting beside the image, so the right-anchored/cropped desktop
	   framing no longer makes sense — center the artwork instead.
	   Overriding the actual properties (not the custom props themselves)
	   is required here: those custom props are set inline per-instance
	   from the bg_focus_x/bg_inset_right attributes, and inline styles
	   always beat stylesheet rules regardless of specificity — but
	   object-position/transform-origin/right are plain properties, so a
	   later plain rule like this overrides them normally. */
	.ff-ignite--bg {
		right: 0;
	}

	.ff-ignite--bg .ff-ignite__layer {
		object-position: 50% center;
		transform-origin: 50% center;
	}
}

/* Respect reduced-motion: show the fencer fully, skip the animation. */
@media (prefers-reduced-motion: reduce) {
	.ff-ignite {
		--reveal: 1;
	}
}