/* =====================================================================
   Path shimmer — SVG stroke “meteor” / ışıltı (pathLength=100 sözleşmesi)
   Kullanım: hedef path veya <use> + .path-shimmer + .path-shimmer--loop | --yoyo
   İsteğe bağlı: .path-shimmer--reveal (çizgi sonrası opaklık açılışı)
   JS: includes/js/PathShimmer.js (GSAP timeline / tween modu)
   ===================================================================== */

.path-shimmer {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    --path-shimmer-period: 100;
    --path-shimmer-head: 40;
    --path-shimmer-gap: 60;
    --path-shimmer-duration: 3.1s;
    --path-shimmer-ease-yoyo: ease-in-out;
    --path-shimmer-reveal-duration: 0.62s;
    --path-shimmer-reveal-delay: 0.09s;
    stroke-dasharray: var(--path-shimmer-head) var(--path-shimmer-gap);
}

@keyframes path-shimmer-dash {
    0% {
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes path-shimmer-reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Tek yön sonsuz döngü */
.path-shimmer.path-shimmer--loop:not(.path-shimmer--reveal) {
    animation: path-shimmer-dash var(--path-shimmer-duration) linear infinite;
}

/* Git–gel: aynı keyframe + alternate */
.path-shimmer.path-shimmer--yoyo:not(.path-shimmer--reveal) {
    animation: path-shimmer-dash var(--path-shimmer-duration)
        var(--path-shimmer-ease-yoyo) infinite alternate;
}

/* Loop + çizgi sonrası fade (explore hero meteor-live) */
.path-shimmer.path-shimmer--loop.path-shimmer--reveal {
    opacity: 0;
    animation-name: path-shimmer-dash, path-shimmer-reveal;
    animation-duration: var(--path-shimmer-duration), var(--path-shimmer-reveal-duration);
    animation-timing-function: linear, ease-out;
    animation-delay: 0s, var(--path-shimmer-reveal-delay);
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, forwards;
}

/* PathShimmer.js (driver: gsap) — CSS keyframe çakışmasın */
.path-shimmer.path-shimmer--gsap {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .path-shimmer.path-shimmer--loop,
    .path-shimmer.path-shimmer--yoyo {
        animation: none !important;
    }

    .path-shimmer.path-shimmer--loop.path-shimmer--reveal {
        animation: none !important;
        opacity: 0.82 !important;
    }

    .path-shimmer {
        stroke-dasharray: var(--path-shimmer-period) 0 !important;
        stroke-dashoffset: 0 !important;
    }
}