/* Scrumlin — filament trails (scroll-safe: no animated blur/drop-shadow) */

html,
html[data-theme="dark"] {
    --sc-ribbon-a: #67e8f9;
    --sc-ribbon-b: #818cf8;
    --sc-ribbon-c: #c4b5fd;
    --sc-ribbon-opacity: 0.38;
}

html[data-theme="portal"] {
    --sc-ribbon-a: #00d2ff;
    --sc-ribbon-b: #3a7bd5;
    --sc-ribbon-c: #5ec8ff;
    --sc-ribbon-opacity: 0.34;
}

.sc-ribbons--section {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: var(--sc-ribbon-opacity);
    contain: layout paint;
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
}

.sc-ribbons--subtle {
    --sc-ribbon-opacity: 0.18;
}

html[data-theme="portal"] .sc-ribbons--subtle {
    --sc-ribbon-opacity: 0.16;
}

.about-horizon .sc-ribbons--section {
    z-index: 0;
}

/* Pause off-screen work (toggled by JS) */
.sc-ribbons--section:not(.is-ribbons-active) .sc-ribbons__current .sc-ribbons__stroke--current {
    animation-play-state: paused;
}

.sc-ribbons--work {
    -webkit-mask-image: radial-gradient(
        ellipse 52% 58% at 38% 58%,
        transparent 0%,
        transparent 42%,
        #000 68%
    );
    mask-image: radial-gradient(
        ellipse 52% 58% at 38% 58%,
        transparent 0%,
        transparent 42%,
        #000 68%
    );
}

.sc-ribbons--voices {
    -webkit-mask-image: radial-gradient(
        ellipse 58% 52% at 50% 42%,
        transparent 0%,
        transparent 38%,
        #000 64%
    );
    mask-image: radial-gradient(
        ellipse 58% 52% at 50% 42%,
        transparent 0%,
        transparent 38%,
        #000 64%
    );
}

.sc-ribbons--allies {
    opacity: calc(var(--sc-ribbon-opacity) * 0.62);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

.sc-ribbons__stroke--handoff {
    opacity: 0.7;
}

.horizon-panel--process {
    position: relative;
}

.horizon-panel--process > .sc-ribbons--section {
    inset: 0;
    z-index: 0;
}

.horizon-panel--process .horizon-panel__shell {
    position: relative;
    z-index: 1;
}

.testimonials > .sc-ribbons--section,
.allies > .sc-ribbons--section {
    z-index: 0;
}

.testimonials > .testimonials-shell,
.allies > .allies-shell {
    position: relative;
    z-index: 1;
}

.sc-ribbons__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sc-ribbons__stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Allow stroke to scale with SVG — cheaper than non-scaling-stroke on resize/scroll */
}

.sc-ribbons__stroke--micro {
    stroke-width: 0.9;
    opacity: 0.4;
}

.sc-ribbons__stroke--hair {
    stroke-width: 1.15;
    opacity: 0.55;
}

.sc-ribbons__stroke--fine {
    stroke-width: 1.45;
    opacity: 0.75;
}

.sc-ribbons__stroke--accent {
    opacity: 0.32;
}

/* Current pulse — stroke-dashoffset only (no filters) */
.sc-ribbons__current {
    pointer-events: none;
}

.sc-ribbons__stroke--current {
    stroke-width: 2.1;
    stroke-linecap: round;
    opacity: 0.92;
    stroke-dasharray: 0.08 0.92;
    stroke-dashoffset: 0;
    animation: sc-ribbon-current var(--sc-current-dur, 5.5s) linear infinite;
    animation-delay: var(--sc-current-delay, 0s);
}

.sc-ribbons__current .sc-ribbons__stroke--current:nth-child(3n) {
    stroke-width: 2.6;
    stroke-dasharray: 0.05 0.95;
    opacity: 1;
}

.sc-ribbons--allies .sc-ribbons__stroke--current {
    opacity: 0.8;
}

@keyframes sc-ribbon-current {
    to {
        stroke-dashoffset: -1;
    }
}

.after-hero .testimonials,
.after-hero .allies {
    background: transparent;
}

.after-hero .horizon {
    background: var(--sc-bg);
}

.after-hero .horizon-bg {
    background:
        radial-gradient(ellipse 55% 28% at 18% 20%, rgba(var(--sc-cyan-rgb), 0.08), transparent 55%),
        radial-gradient(ellipse 50% 30% at 82% 45%, rgba(var(--sc-blue-rgb), 0.1), transparent 55%),
        var(--sc-bg);
}

/* Mobile / tablet — same filament density & current pulses as desktop */
@media (max-width: 991.98px) {
    .sc-ribbons--section {
        opacity: var(--sc-ribbon-opacity);
    }

    /* Orbit stacks centered on tablet — keep trails in the margins */
    .sc-ribbons--work {
        -webkit-mask-image: radial-gradient(
            ellipse 72% 52% at 50% 46%,
            transparent 0%,
            transparent 36%,
            #000 62%
        );
        mask-image: radial-gradient(
            ellipse 72% 52% at 50% 46%,
            transparent 0%,
            transparent 36%,
            #000 62%
        );
    }

    .sc-ribbons--voices {
        -webkit-mask-image: radial-gradient(
            ellipse 70% 55% at 50% 48%,
            transparent 0%,
            transparent 36%,
            #000 62%
        );
        mask-image: radial-gradient(
            ellipse 70% 55% at 50% 48%,
            transparent 0%,
            transparent 36%,
            #000 62%
        );
    }
}

@media (max-width: 575.98px) {
    .sc-ribbons--section {
        opacity: var(--sc-ribbon-opacity);
    }

    .sc-ribbons__stroke--micro,
    .sc-ribbons__stroke--hair,
    .sc-ribbons__stroke--fine,
    .sc-ribbons__stroke--accent,
    .sc-ribbons__stroke--current {
        /* Keep all filaments + pulses visible on phones */
        display: block;
    }

    .sc-ribbons__stroke--micro {
        stroke-width: 0.85;
        opacity: 0.42;
    }

    .sc-ribbons__stroke--hair {
        stroke-width: 1.1;
        opacity: 0.58;
    }

    .sc-ribbons__stroke--fine {
        stroke-width: 1.4;
        opacity: 0.78;
    }

    .sc-ribbons__stroke--current {
        stroke-width: 2.2;
        opacity: 0.95;
    }

    .sc-ribbons__current .sc-ribbons__stroke--current:nth-child(3n) {
        stroke-width: 2.7;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-ribbons__stroke--current {
        animation: none !important;
    }

    .sc-ribbons__current {
        display: none;
    }
}