/*
 * Buton ışıltı efekti — hover'da butonun çevresinde dönen gökkuşağı halesi.
 * Tüm stil dosyalarından sonra yüklenir; hedef butonlara otomatik uygulanır.
 * Elle uygulamak için butona `btn--glow` sınıfı eklemek yeterlidir.
 *
 * Hale, konumlandırılmış bir sözde eleman yerine çok renkli box-shadow
 * katmanlarıyla çizilir: box-shadow her zaman butonun dışında kalır, bu yüzden
 * kart/panel gibi ebeveynlerin zemini haleyi gizleyemez.
 */

@property --btn-glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --btn-glow-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

@keyframes btn-glow-spin {
    to {
        --btn-glow-angle: 360deg;
    }
}

/* Hedefler: tanıtım sitesi CTA, giriş ekranları, program içi birincil butonlar */
.btn--glow,
body.site .btn--primary,
body.auth-page .auth-form__submit,
body.auth-page .ds-login__submit,
body.bus-module .btn.btn--primary,
body.bus-module .bus-btn.bus-btn--primary {
    --btn-glow-radius: 10px;
    --btn-glow-blur: 26px;
    --btn-glow-peak: 1;
    box-shadow:
        calc(cos(var(--btn-glow-angle)) * var(--btn-glow-radius)) calc(sin(var(--btn-glow-angle)) * var(--btn-glow-radius)) var(--btn-glow-blur) rgb(255 59 92 / var(--btn-glow-opacity)),
        calc(cos(var(--btn-glow-angle) + 60deg) * var(--btn-glow-radius)) calc(sin(var(--btn-glow-angle) + 60deg) * var(--btn-glow-radius)) var(--btn-glow-blur) rgb(255 159 10 / var(--btn-glow-opacity)),
        calc(cos(var(--btn-glow-angle) + 120deg) * var(--btn-glow-radius)) calc(sin(var(--btn-glow-angle) + 120deg) * var(--btn-glow-radius)) var(--btn-glow-blur) rgb(255 214 10 / var(--btn-glow-opacity)),
        calc(cos(var(--btn-glow-angle) + 180deg) * var(--btn-glow-radius)) calc(sin(var(--btn-glow-angle) + 180deg) * var(--btn-glow-radius)) var(--btn-glow-blur) rgb(52 199 89 / var(--btn-glow-opacity)),
        calc(cos(var(--btn-glow-angle) + 240deg) * var(--btn-glow-radius)) calc(sin(var(--btn-glow-angle) + 240deg) * var(--btn-glow-radius)) var(--btn-glow-blur) rgb(10 132 255 / var(--btn-glow-opacity)),
        calc(cos(var(--btn-glow-angle) + 300deg) * var(--btn-glow-radius)) calc(sin(var(--btn-glow-angle) + 300deg) * var(--btn-glow-radius)) var(--btn-glow-blur) rgb(191 90 242 / var(--btn-glow-opacity));
}

.btn--glow:hover,
.btn--glow:focus-visible,
body.site .btn--primary:hover,
body.site .btn--primary:focus-visible,
body.auth-page .auth-form__submit:hover,
body.auth-page .auth-form__submit:focus-visible,
body.auth-page .ds-login__submit:hover,
body.auth-page .ds-login__submit:focus-visible,
body.bus-module .btn.btn--primary:hover,
body.bus-module .btn.btn--primary:focus-visible,
body.bus-module .bus-btn.bus-btn--primary:hover,
body.bus-module .bus-btn.bus-btn--primary:focus-visible {
    --btn-glow-opacity: var(--btn-glow-peak);
    animation: btn-glow-spin 2.6s linear infinite;
}

/*
 * Geçişler: her hedefin kendi transition listesi korunarak --btn-glow-opacity
 * eklenir, böylece hale yumuşak girip yumuşak çıkar.
 */
.btn--glow {
    transition: --btn-glow-opacity 260ms ease;
}

body.site .btn--primary {
    transition: background 160ms ease, color 160ms ease, --btn-glow-opacity 260ms ease;
}

body.auth-page .auth-form__submit {
    transition: transform var(--transition), --btn-glow-opacity 260ms ease;
}

body.auth-page .ds-login__submit {
    transition: background 160ms ease, --btn-glow-opacity 260ms ease;
}

body.bus-module .btn.btn--primary,
body.bus-module .bus-btn.bus-btn--primary {
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 150ms ease, --btn-glow-opacity 260ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn--glow:hover,
    .btn--glow:focus-visible,
    body.site .btn--primary:hover,
    body.site .btn--primary:focus-visible,
    body.auth-page .auth-form__submit:hover,
    body.auth-page .auth-form__submit:focus-visible,
    body.auth-page .ds-login__submit:hover,
    body.auth-page .ds-login__submit:focus-visible,
    body.bus-module .btn.btn--primary:hover,
    body.bus-module .btn.btn--primary:focus-visible,
    body.bus-module .bus-btn.bus-btn--primary:hover,
    body.bus-module .bus-btn.bus-btn--primary:focus-visible {
        animation: none;
    }
}