/*
 * Revuteck Service Details - Ultra-thin premium Cohort ellipse flow v7
 *
 * Scope: ONLY .sd-why-cohort-section
 * Effect: a long, thin, tapered travelling stroke moving left -> right
 * across the existing top ellipse, centre line and bottom ellipse.
 *
 * It does not hide, translate, scale, clip, resize or reposition any
 * backend-generated section content.
 */

:root {
    --sd-cohort-flow-color: var(--brand, var(--primary, #84cc16));
}

.sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Keep all database-driven text and labels above the decorative SVG. */
.sd-why-cohort-section.sd-cohort-flow-v7 .sd-why-cohort-node,
.sd-why-cohort-section.sd-cohort-flow-v7 .sd-why-cohort-center-mask {
    position: absolute;
    z-index: 3;
}

.sd-why-cohort-section.sd-cohort-flow-v7 .sd-why-cohort-ellipse,
.sd-why-cohort-section.sd-cohort-flow-v7 .sd-why-cohort-center-line {
    z-index: 0;
}

.sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pathLength: 100;
    stroke-dasharray: 0 100;
    stroke-dashoffset: 0;
    opacity: 0;
    will-change: stroke-dasharray, stroke-dashoffset, opacity;
    mix-blend-mode: screen;
}

/* Ultra-thin outer softness. The halo is intentionally narrower than one visual CSS pixel after blur. */
.sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path.is-halo {
    stroke: var(--sd-cohort-flow-color);
    stroke-width: 1.55;
    filter:
        blur(.55px)
        drop-shadow(0 0 .65px var(--sd-cohort-flow-color));
}

/* Hairline coloured travelling stroke. */
.sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path.is-core {
    stroke: var(--sd-cohort-flow-color);
    stroke-width: .88;
    filter: drop-shadow(0 0 .45px var(--sd-cohort-flow-color));
}

/* Sub-pixel reflective centre gives the line a restrained polished edge. */
.sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path.is-sheen {
    stroke: rgba(255, 255, 255, .68);
    stroke-width: .26;
    filter: none;
}

/*
 * Reference-style movement:
 *  - appears as a small line at the left
 *  - grows into a long 42% travelling stroke
 *  - glides to the right
 *  - shrinks and fades at the right edge
 *
 * Top, centre and bottom use exactly the same phase and direction.
 */
.sd-why-cohort-section.sd-cohort-flow-v7.is-cohort-flow-active
.sd-cohort-flow-path.is-halo,
.sd-why-cohort-section.sd-cohort-flow-v7.is-cohort-flow-active
.sd-cohort-flow-path.is-core,
.sd-why-cohort-section.sd-cohort-flow-v7.is-cohort-flow-active
.sd-cohort-flow-path.is-sheen {
    animation: sd-cohort-premium-flow 3.45s linear infinite;
}

.sd-why-cohort-section.sd-cohort-flow-v7.is-cohort-flow-active
.sd-cohort-flow-path.is-halo {
    animation-name: sd-cohort-premium-flow-halo;
}

@keyframes sd-cohort-premium-flow {
    0%, 8% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 0;
        opacity: 0;
    }

    13% {
        stroke-dasharray: 2 98;
        stroke-dashoffset: 0;
        opacity: .92;
    }

    34% {
        stroke-dasharray: 42 58;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    70% {
        stroke-dasharray: 42 58;
        stroke-dashoffset: -58;
        opacity: 1;
    }

    87% {
        stroke-dasharray: 9 91;
        stroke-dashoffset: -91;
        opacity: .92;
    }

    94%, 100% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: -100;
        opacity: 0;
    }
}

@keyframes sd-cohort-premium-flow-halo {
    0%, 8% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 0;
        opacity: 0;
    }

    13% {
        stroke-dasharray: 2 98;
        stroke-dashoffset: 0;
        opacity: .055;
    }

    34% {
        stroke-dasharray: 42 58;
        stroke-dashoffset: 0;
        opacity: .105;
    }

    70% {
        stroke-dasharray: 42 58;
        stroke-dashoffset: -58;
        opacity: .105;
    }

    87% {
        stroke-dasharray: 9 91;
        stroke-dashoffset: -91;
        opacity: .055;
    }

    94%, 100% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: -100;
        opacity: 0;
    }
}

/* Maintain the same refined visual weight on smaller screens. */
@media (max-width: 860px) {
    .sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path.is-halo {
        stroke-width: 1.2;
        filter:
            blur(.45px)
            drop-shadow(0 0 .5px var(--sd-cohort-flow-color));
    }

    .sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path.is-core {
        stroke-width: .74;
        filter: drop-shadow(0 0 .35px var(--sd-cohort-flow-color));
    }

    .sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path.is-sheen {
        stroke-width: .22;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-svg {
        display: none !important;
    }

    .sd-why-cohort-section.sd-cohort-flow-v7 .sd-cohort-flow-path {
        animation: none !important;
    }
}