/* ============================================
   Бегущая искра по контуру карточек (.card)
   ============================================ */

/* Базовые настройки карточки для корректного наложения псевдоэлемента */
.card {
    position: relative;
    isolation: isolate; /* Создаем изолированный контекст наложения */
}

/* Сам псевдоэлемент с искрой */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit; /* Повторяем скругление самой карточки */
    padding: 1.5px; /* Толщина линии искры */
    
    /* Градиент искры: прозрачный хвост, яркое ядро и белая головка */
    background: conic-gradient(
        from var(--spark-angle, 0deg),
        transparent 0%,
        transparent 80%,
       /*  rgba(56, 189, 248, 0.4) 88%, */
        rgba(255, 16, 240) 88%,
        #38bdf8 95%,
        #ffffff 98%,
        transparent 100%
    );
    
    /* Маска вырезает внутреннюю часть, оставляя только тонкую обводку */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none; /* Искра не перехватывает клики мыши */
    animation: spark-rotate 4s linear infinite;
}

/* Регистрируем CSS-переменную для плавной анимации угла градиента */
@property --spark-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spark-rotate {
    to {
        --spark-angle: 360deg;
    }
}

/* 
   Опционально: если хотите, чтобы искра появлялась ТОЛЬКО при наведении,
   замените .card::before на .card:hover::before и добавьте:
   
   .card::before { opacity: 0; transition: opacity 0.3s ease; }
   .card:hover::before { opacity: 1; }
*/