/**
 * Display SVG On Scroll - Estilos frontend
 */

.dsos-svg-wrapper,
svg.dsos-svg-wrapper {
    display: inline-block;
    max-width: 100%;
}

.dsos-svg-wrapper svg,
svg.dsos-svg-wrapper {
    display: block;
    max-width: 100%;
    height: auto;
}

/* FOUC: Stagger — solo opacity (fade secuencial) */
.js .dsos-svg-wrapper.dsos-mode-stagger:not(.dsos-is-visible) .dsos-animatable,
.js svg.dsos-mode-stagger:not(.dsos-is-visible) .dsos-animatable {
    opacity: 0;
}

/* FOUC: Stroke on scroll — solo oculta fill si se va a revelar */
.js svg.dsos-mode-stroke-scroll.dsos-reveal-fill .dsos-animatable,
.js .dsos-mode-stroke-scroll.dsos-reveal-fill .dsos-animatable {
    fill-opacity: 0;
    will-change: stroke-dashoffset, fill-opacity;
}

.js svg.dsos-mode-stroke-scroll:not(.dsos-reveal-fill) .dsos-animatable,
.js .dsos-mode-stroke-scroll:not(.dsos-reveal-fill) .dsos-animatable {
    will-change: stroke-dashoffset;
}

@media (prefers-reduced-motion: reduce) {
    .dsos-svg-wrapper svg,
    .dsos-svg-wrapper .dsos-animatable,
    svg.dsos-svg-wrapper,
    svg.dsos-svg-wrapper .dsos-animatable {
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
        fill-opacity: 1 !important;
    }
}