/* =========================================================================
 * Avalon Search Filter — F&S ARRIVAL PULSE                         v7.0.15
 * =========================================================================
 * Applied (by the Section 14b arrival resolver, class .avalon-fs-arrival-pulse)
 * to the F&S SECTION the deep link scrolls to:
 *   • category archive  ->  #{boat-slug}-fs           (.avalon-fs.afs-collapsible)
 *   • model term-mode   ->  #features-and-specs-sc-id  (Elementor shortcode widget)
 *
 * v7.0.15 CHANGE — the spinning three-lap "comet" is GONE. Per request the cue
 * is now a SINGLE, more pronounced beat on arrival:
 *   1) a bright border LINE that GROWS once around the section perimeter
 *      (from the top, clockwise, all the way around — exactly ONE lap), then
 *      holds briefly and fades. It does NOT loop; and
 *   2) underneath it, a larger / longer / softer #FFEA00 box-shadow glow that
 *      blooms and recedes a single time so the section is unmistakable when the
 *      auto-scroll lands on it.
 * JS only toggles the class — the animation itself is 100% CSS.
 *
 * SEPARATE FILE BY DESIGN: avalon-search-results.css is frozen (rule blocks
 * unchanged since v7.0.8). The plugin enqueues this file when present; the
 * identical rules may instead live in the child theme style.css — in that case
 * delete this file and the plugin's file_exists() enqueue NOOPs.
 *
 * Tuning knobs: --afs-pulse-color / --afs-pulse-thick on the class below, plus
 * the two @keyframes durations (2400ms each) and the glow spread/opacity stops.
 *
 * Brand: Avalon teal #006991 / highlight #FFEA00 only.
 * ========================================================================= */

/* Registered custom property so the conic-gradient sweep angle is animatable.
   Browsers without @property simply skip the border draw and keep the glow. */
@property --afs-pulse-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.avalon-fs-arrival-pulse {
	--afs-pulse-color: #FFEA00;   /* == mark.avalon-search-highlight */
	--afs-pulse-thick: 5px;       /* growing-line + ring thickness (was 4px) */
	position: relative;           /* anchor the perimeter pseudo            */
	/* Baseline glow — universal support; fires even when @property does not.
	   Bigger spread + longer single run than the old comet's fallback so the
	   landing is obvious on its own. Two layers: a tight ring + a wide bloom. */
	animation: avalon-fs-glow 2400ms ease-in-out 1 both;
}

@keyframes avalon-fs-glow {
	0% {
		box-shadow:
			0 0 0   0  rgba(255, 234, 0, 0),
			0 0 0   0  rgba(255, 234, 0, 0);
	}
	30% {
		box-shadow:
			0 0 0   4px rgba(255, 234, 0, 0.85),    /* crisp ring      */
			0 0 40px 10px rgba(255, 234, 0, 0.55);  /* wide soft bloom */
	}
	70% {
		box-shadow:
			0 0 0   3px rgba(255, 234, 0, 0.55),
			0 0 34px 8px rgba(255, 234, 0, 0.40);
	}
	100% {
		box-shadow:
			0 0 0   0  rgba(255, 234, 0, 0),
			0 0 0   0  rgba(255, 234, 0, 0);
	}
}

/* The growing border line. A conic gradient paints SOLID highlight colour from
   the top, clockwise, up to the current sweep angle (transparent beyond it),
   masked to a border RING. Animating the angle 0 -> 360deg ONCE draws the line
   all the way around the perimeter a single time; it then holds at full and
   fades out — no second lap, no residual arc. */
.avalon-fs-arrival-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--afs-pulse-thick);
	pointer-events: none;
	z-index: 4;
	background: conic-gradient(
		from 0deg,
		var(--afs-pulse-color) 0deg var(--afs-pulse-angle),
		transparent var(--afs-pulse-angle) 360deg
	);
	/* Cut out the interior so only the padding band (the ring) paints. */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	        mask-composite: exclude;
	animation: avalon-fs-draw 2400ms ease-out 1 forwards;
}

@keyframes avalon-fs-draw {
	0%   { --afs-pulse-angle: 0deg;   opacity: 1; }   /* start: nothing drawn   */
	60%  { --afs-pulse-angle: 360deg; opacity: 1; }   /* line has grown all way */
	82%  { --afs-pulse-angle: 360deg; opacity: 1; }   /* hold the full border   */
	100% { --afs-pulse-angle: 360deg; opacity: 0; }   /* fade out, no residue   */
}

/* Accessibility: drop the moving draw for reduced-motion users; keep one soft,
   slightly longer glow so the arrival cue is still present but non-animated. */
@media (prefers-reduced-motion: reduce) {
	.avalon-fs-arrival-pulse        { animation: avalon-fs-glow 1600ms ease-in-out 1 both; }
	.avalon-fs-arrival-pulse::after { animation: none; opacity: 0; }
}