/* ============================================================
   Animated Text Highlight — frontend.css  v1.1.0
   ============================================================ */

/* Wrapper — inline so it sits naturally inside Elementor text */
.ath-wrap {
	display: inline;
	white-space: pre-wrap;
}

/* ── Screen-reader text ───────────────────────────────────────────────────── */
.ath-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Word group — prevents letters breaking across lines mid-word */
.ath-word {
	display: inline-block;
	white-space: nowrap;
}

/* Space between words (non-highlight modes) — allows line breaks here */
.ath-space-gap {
	display: inline;
	white-space: normal;
}

/* Scroll-linked: suppress CSS animations entirely — JS applies styles directly. */
.ath-scroll-linked .ath-letter {
	animation: none !important;
}

/* ── Individual letter spans ──────────────────────────────────────────────── */
.ath-letter {
	display: inline-block;
	white-space: pre;
	animation-delay: var(--ath-delay, 0ms);
	animation-fill-mode: both;
	animation-play-state: paused;
	animation-timing-function: ease-out;
}

/* ── Non-highlight spaces: plain, not animated ────────────────────────────── */
[data-ath-type="color"] .ath-space,
[data-ath-type="bold"] .ath-space,
[data-ath-type="color bold"] .ath-space {
	animation: none !important;
}


/* ════════════════════════════════════════════════════════════
   1. HIGHLIGHT
   A single colour block sweeps across the text left-to-right.

   Approach: each character span (including spaces) has a
   background-color animation fired at its own delay. Because
   the spans tile with no gaps, they read as one continuous
   growing block.

   Text colour (optional): each letter's color also switches
   at the same delay, controlled by --ath-text-color which JS
   only sets when a textcolor is configured.
   ════════════════════════════════════════════════════════════ */

@keyframes ath-highlight-bg {
	0%   { background-color: transparent; }
	100% { background-color: var(--ath-bg-color); }
}

@keyframes ath-highlight-bg-color {
	0%   { background-color: transparent; color: inherit; }
	100% { background-color: var(--ath-bg-color); color: var(--ath-text-color); }
}

[data-ath-type="highlight"] .ath-letter {
	/* display:inline (not inline-block) so adjacent backgrounds join flush with no gaps */
	display: inline;
	animation-name: ath-highlight-bg;
	animation-duration: 0.05s;
	/* No horizontal padding needed — inline backgrounds span the character naturally */
	padding: 0.1em 0;
	vertical-align: baseline;
	line-height: inherit;
}

/* When a text colour is active, swap to the combined keyframe */
[data-ath-type="highlight"].ath-has-textcolor .ath-letter {
	animation-name: ath-highlight-bg-color;
}

[data-ath-type="highlight"].ath-animate .ath-letter {
	animation-play-state: running;
}


/* ════════════════════════════════════════════════════════════
   2. COLOUR
   Each letter transitions to the accent colour.
   ════════════════════════════════════════════════════════════ */

@keyframes ath-color-in {
	0%   { color: inherit; }
	100% { color: var(--ath-color); }
}

[data-ath-type="color"] .ath-letter,
[data-ath-type="color bold"] .ath-letter {
	animation-name: ath-color-in;
	animation-duration: 0.35s;
}

[data-ath-type="color"].ath-animate .ath-letter,
[data-ath-type="color bold"].ath-animate .ath-letter {
	animation-play-state: running;
}


/* ════════════════════════════════════════════════════════════
   3. BOLD
   Each letter bolds with a subtle scale pulse.
   ════════════════════════════════════════════════════════════ */

@keyframes ath-bold-in {
	0%   { font-weight: inherit; transform: scale(1); }
	55%  { font-weight: 700;     transform: scale(1.1); }
	100% { font-weight: 700;     transform: scale(1); }
}

[data-ath-type="bold"] .ath-letter,
[data-ath-type="color bold"] .ath-letter {
	animation-duration: 0.4s;
}

/* When bold-only, use the bold keyframe */
[data-ath-type="bold"] .ath-letter {
	animation-name: ath-bold-in;
}

[data-ath-type="bold"].ath-animate .ath-letter {
	animation-play-state: running;
}


/* ════════════════════════════════════════════════════════════
   4. COLOUR + BOLD combined
   We can't use two animation-names on the same element without
   them conflicting on shared properties, so we use a single
   merged keyframe set via a class added by JS.
   ════════════════════════════════════════════════════════════ */

@keyframes ath-color-bold-in {
	0%   { color: inherit; font-weight: inherit; transform: scale(1); }
	55%  { color: var(--ath-color); font-weight: 700; transform: scale(1.1); }
	100% { color: var(--ath-color); font-weight: 700; transform: scale(1); }
}

[data-ath-type="color bold"] .ath-letter {
	animation-name: ath-color-bold-in;
}

[data-ath-type="color bold"].ath-animate .ath-letter {
	animation-play-state: running;
}