/**
 * assets/css/elements/mark.css — global <mark> (core/highlight) decoration.
 *
 * The two `!important`s are a design lock, not an oversight:
 * core/highlight writes its colour as an inline `style="background-color:…;
 * color:…"` on the <mark> tag, which beats any stylesheet selector on
 * specificity alone. Without `!important` here, the editor's colour picker
 * would paint an arbitrary background straight through this treatment and
 * break the design. The tradeoff is that the format's colour picker becomes
 * inert: choosing a colour in the toolbar has no visible effect, by design.
 *
 * `.is-surface-dark` intentionally shares the light-surface ink value
 * (`text-brand`): #ee293a on the flat `background-inverse` ground measures
 * 3.20:1, clearing the 3:1 threshold for non-text/decorative content. That
 * specific ratio holds for flat `.is-surface-dark` consumers (icon-row tab,
 * mobile-header drawer) — it does not hold for the photo-panel hero, where
 * the underline sits over a scrimmed, variable photograph with no fixed
 * background colour to measure against. Not a live accessibility gap either
 * way: the decoration is exempt from WCAG 1.4.11 (non-text/decorative
 * contrast has no pass/fail requirement), so this note is about not
 * overclaiming a specific ratio where one doesn't hold, not about a
 * compliance risk.
 *
 * `display: inline-block` (not `inline`) is required so a highlighted phrase
 * that wraps draws one underline under its last line, rather than the
 * pseudo-element spanning the bounding box of both wrapped fragments.
 *
 * `0.15em`/`0.35em` are relative optical offsets tracking fluid type, not
 * literal token violations — measured as 19px
 * under a 50px H1 ≈ 0.38em, and matching the existing `0.35em` precedent in
 * assets/css/parts/cta-footer.css.
 */

:root,
.is-surface-light,
.is-surface-dark {
	--miraigo-mark-ink: var(--wp--preset--color--text-brand);
}

.is-surface-brand {
	--miraigo-mark-ink: var(--wp--preset--color--text-primary);
}

mark {
	position: relative;
	display: inline-block;
	padding-block-end: 0.15em;
	background-color: transparent !important;
	color: inherit !important;
}

mark::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 0.35em;
	background-color: var(--miraigo-mark-ink);
	-webkit-mask: url(../../icons/underline.svg) no-repeat center / 100% 100%;
	mask: url(../../icons/underline.svg) no-repeat center / 100% 100%;
	pointer-events: none;
}

/**
 * Drawn decoration, shared by the two hero titles that carry the hand-drawn
 * circle: HOME's `.hero__title` and PLANS' `.plans-hero__title`. Both set up
 * their <mark> identically (`inset: -0.4em -0.45em`, `isolation: isolate`),
 * so the geometry and the animation live here once rather than twice.
 *
 * The `::after` masks in blocks/hero/style.css and
 * assets/css/blocks/core-heading.css stay exactly as they are: they are what
 * the block editor still gets. Both circles arrive as an inline <svg> from
 * PHP, which never runs on the editor canvas, so `is-mark-drawn` — set by
 * the same code that injects the <svg> — is what drops the mask on the front
 * end only. Without it both would paint and the circle would read twice as
 * heavy.
 *
 * That `content: none` does NOT live here. It has to out-specify
 * the mask it cancels, and the two masks are written at different
 * specificities in two other files, so a single rule in this one cannot win
 * both: `.is-mark-drawn mark::after` is (0,1,2), which loses outright to the
 * hero's (0,2,2) and merely ties PLANS' (0,1,2), leaving that one to load
 * order, so the hero's masked circle doesn't reappear under the drawn one.
 * Each opt-out sits next to the mask it overrides, one class more
 * specific than it.
 *
 * A mask paints a silhouette, so the most it could animate was a wipe over a
 * finished shape. The asset is a single <path> with `stroke="currentColor"`,
 * which is what `stroke-dasharray` needs, so inlined it can be drawn instead.
 *
 * Resting state is the finished circle and the keyframe reaches back to the
 * undrawn one, so `backwards` is enough and nothing holds a value afterwards.
 * That also means style.css's reduced-motion reset, which drops `animation`
 * with `!important`, lands on a circle that is simply already drawn.
 */

/*
 * The explicit sizes add back the two negative insets (0.45em each side,
 * 0.4em top and bottom) so the element fills that box. Left at `auto`, a
 * replaced element falls back to its intrinsic size instead of stretching.
 */
.miraigo-mark-draw {
	position: absolute;
	inset-block: -0.4em;
	inset-inline: -0.45em;
	inline-size: calc(100% + 0.9em);
	block-size: calc(100% + 0.8em);
	color: var(--miraigo-mark-ink);
	pointer-events: none;
	z-index: -1;
}

.miraigo-mark-draw path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: miraigo-mark-draw var(--wp--custom--hero--mark-draw-duration) var(--wp--custom--easing--draw) var(--wp--custom--hero--mark-draw-delay) backwards;
}

@keyframes miraigo-mark-draw {

	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

/*
 * The underline shape of the same drawn mark (`miraigo-mark-draw--line`):
 * FEATURES / INTEGRACIONES hero titles and the article hero. Same asset,
 * geometry and stroke-dashoffset draw as the desktop-nav link underline
 * (blocks/desktop-nav/style.css), sitting exactly where the `::after` mask
 * above would. z-index back to auto: these <mark>s set no `isolation`, so
 * the circle's -1 would drop the line behind the panel.
 */
.miraigo-mark-draw--line {
	inset-block: auto 0;
	inset-inline: 0;
	inline-size: 100%;
	block-size: 0.35em;
	z-index: auto;
}

/*
 * Front end only, set with the inlined stroke: drops the mask so the line is
 * not painted twice. (0,1,2) beats the global `mark::after`; the circles
 * cancel their own, more specific masks next to them (hero/style.css,
 * core-heading.css).
 */
.is-mark-drawn mark::after {
	content: none;
}

/**
 * Repeating redraw on each page's main title (`.is-mark-loop`: HOME,
 * FEATURES, INTEGRACIONES, PLANS, ABOUT and the article hero).
 *
 * One mechanism for every title: all of them carry an inlined
 * `.miraigo-mark-draw` stroke (circle or line) drawn by the keyframe above.
 * assets/js/mark-loop.js restarts it one
 * `--wp--custom--hero--mark-redraw-interval` after each draw finishes, by
 * toggling `is-mark-rewind` for one frame (animation: none, then back), and
 * only while the title is on screen.
 *
 * Gates: the stroke is injected by PHP on the front end only, so the editor
 * keeps the static mask; style.css kills every animation under
 * `prefers-reduced-motion: reduce` and the script does not start there; the
 * `backwards` fill leaves the finished mark as the resting state, so with no
 * JS it simply draws once on load.
 */
.is-mark-loop.is-mark-rewind .miraigo-mark-draw path {
	animation: none;
}