/* pulse.css - the pulse family, shared by candidate pages (candidate_header_bootstrap_v5.cfm), the ATS
   (ats/zoneverypage-recruiters.cfm), the hub (hub_view.cfc head) and admin (admin/zheaderadmin.cfm).
   NB .pulse_big (underscore, admin badges) loops like .pulse-many; .pulse-big (hyphen) plays once.

   Link it AFTER the page's other stylesheets: a browser's cached copy of bespoke-styles.css,
   bootstrap-5-hub-modifier.css or the candidate sheets can still carry the old pulse, and loading last
   means this one wins.

   Every pulse draws the eye the same gentle way at every width: a light shimmer sweeps across while the
   element grows to 104%. The old pulses grew to 110-150%, which ballooned full-width buttons and panels off
   the page. The shimmer is a gradient painted as a background-image and slid across, so it needs no ::after
   (duotone icons already use theirs) and changes no position or overflow. No fill-mode either, so nothing
   lingers once it ends (a leftover transform throws jQuery UI sortable's drag offset). Icons get the grow
   only - a gradient on a glyph paints a box behind it - and grow to 125%, since a small glyph never spills
   off the page and 104% on one is barely visible. The peak comes from --pulse_grow_to, set per element.

   Chosen as options 4 and 10 in admin/zbin/dev-only/pulse_mobile_mockup.cfm (2026-09-25). */

@keyframes pulse_grow {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(var(--pulse_grow_to, 1.04));
	}
	100% {
		transform: scale(1);
	}
}

@keyframes pulse_shimmer {
	0% {
		background-position: 150% 0;
	}
	100% {
		background-position: -50% 0;
	}
}

/* pulse-many repeats every 3s: the same grow and sweep in the first second, then still for two */

@keyframes pulse_grow_many {
	0% {
		transform: scale(1);
	}
	16% {
		transform: scale(var(--pulse_grow_to, 1.04));
	}
	33% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes pulse_shimmer_many {
	0% {
		background-position: 150% 0;
	}
	33% {
		background-position: -50% 0;
	}
	100% {
		background-position: -50% 0;
	}
}


/* icons grow to 125% (see the note at the top) */

i.pulse, i.pulse-once, i.pulse-twice, i.pulse_twice, i.pulse-small, i.pulse_small, i.pulse-big, i.pulse_big, i.pulse-many, i.pulse_many {
	--pulse_grow_to: 1.25;
}


/* the shimmer's gradient - parked just off the right edge, so it is invisible until an animation slides it through */

.pulse:not(i), .pulse-once:not(i), .pulse-twice:not(i), .pulse_twice:not(i), .pulse-small:not(i), .pulse_small:not(i), .pulse-big:not(i), .pulse_big:not(i), .pulse-many:not(i), .pulse_many:not(i) {
	background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 65%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	background-position: -50% 0;
}


/* once */

.pulse, .pulse-once, .pulse-small, .pulse_small, .pulse-big {
	animation: pulse_grow 1s ease-in-out 1;
}

.pulse:not(i), .pulse-once:not(i), .pulse-small:not(i), .pulse_small:not(i), .pulse-big:not(i) {
	animation: pulse_grow 1s ease-in-out 1, pulse_shimmer 1s ease-in-out 1;
}


/* twice */

.pulse-twice, .pulse_twice {
	animation: pulse_grow 1s ease-in-out 2;
}

.pulse-twice:not(i), .pulse_twice:not(i) {
	animation: pulse_grow 1s ease-in-out 2, pulse_shimmer 1s ease-in-out 2;
}


/* every 3s, for as long as the class is on */

.pulse-many, .pulse_many, .pulse_big {
	animation: pulse_grow_many 3s ease-in-out infinite;
}

.pulse-many:not(i), .pulse_many:not(i), .pulse_big:not(i) {
	animation: pulse_grow_many 3s ease-in-out infinite, pulse_shimmer_many 3s ease-in-out infinite;
}