/* ==========================================================================
   Кільце прогресу навколо активної крапки каруселі (Elementor Loop Carousel)

   Вмикається класом .carousel-progress на віджеті (Advanced → CSS Classes).
   Тривалість беруться з самого Swiper (assets/js/carousel-progress.js),
   тож зміна Autoplay Speed в Elementor одразу відображається на кільці.

   Чому CSS, а не JS-таймер: у Swiper 8.4.5, який вантажить Elementor,
   немає події autoplayTimeLeft (зʼявилась у Swiper 9). Але кільце й не треба
   рахувати вручну — активна крапка щоразу нова, тож її ::after стартує
   анімацію сам, і цикл лишається синхронним без жодного таймера.
   ========================================================================== */

@property --carousel-progress{syntax:'<percentage>';inherits:false;initial-value:0%}

.carousel-progress{
	--carousel-ring-gap:4px;   /* відстань від крапки до кільця */
	--carousel-ring-width:2px; /* товщина кільця */
	--carousel-ring-color:var(--theme-accent);
}

.carousel-progress .swiper-pagination-bullet{position:relative}

.carousel-progress .swiper-pagination-bullet-active::after{
	content:'';
	position:absolute;
	inset:calc(var(--carousel-ring-gap) * -1);
	border-radius:50%;
	background:conic-gradient(var(--carousel-ring-color) var(--carousel-progress), transparent 0);
	/* маска вирізає середину — лишається саме кільце, а не заливка */
	-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--carousel-ring-width)), #000 calc(100% - var(--carousel-ring-width)));
	mask:radial-gradient(farthest-side, transparent calc(100% - var(--carousel-ring-width)), #000 calc(100% - var(--carousel-ring-width)));
	animation:carousel-ring var(--carousel-delay, 5000ms) linear;
	pointer-events:none;
}

@keyframes carousel-ring{
	from{--carousel-progress:0%}
	to{--carousel-progress:100%}
}

/* автоплей вимкнено — кільце не має сенсу (клас ставить JS) */
.carousel-progress--off .swiper-pagination-bullet-active::after{display:none}

@media (prefers-reduced-motion: reduce){
	.carousel-progress .swiper-pagination-bullet-active::after{animation:none}
}