/* ================================
   ShopMaster Scroll Animations
   File: wwwroot/css/ScrollAnimations.css
================================ */

.sm-scroll-line {
    position: fixed;
    left: 18px;
    top: 96px;
    width: 70px;
    height: calc(100vh - 130px);
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}

    .sm-scroll-line svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.sm-scroll-line-bg,
.sm-scroll-line-progress {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sm-scroll-line-bg {
    stroke: rgba(255, 75, 51, 0.12);
    stroke-width: 10;
}

.sm-scroll-line-progress {
    stroke: url(#smScrollGradient);
    stroke-width: 10;
    filter: drop-shadow(0 10px 18px rgba(255, 75, 51, 0.25));
    transition: stroke-dashoffset 0.08s linear;
}

/* Section reveal animation */

.sm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

    .sm-reveal.sm-reveal-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Optional stagger helpers */

.sm-reveal-delay-1 {
    transition-delay: 0.08s;
}

.sm-reveal-delay-2 {
    transition-delay: 0.16s;
}

.sm-reveal-delay-3 {
    transition-delay: 0.24s;
}

/* Hide the scroll line on smaller screens */

@media (max-width: 1100px) {
    .sm-scroll-line {
        display: none;
    }
}

/* Respect reduced motion settings */

@media (prefers-reduced-motion: reduce) {
    .sm-scroll-line-progress,
    .sm-reveal {
        transition: none;
    }

    .sm-reveal {
        opacity: 1;
        transform: none;
    }
}
.sm-scroll-line-label {
    position: absolute;
    left: 58px;
    top: 8px;
    display: grid;
    gap: 2px;
    min-width: 130px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--sm-border);
    box-shadow: var(--sm-shadow-sm);
    transform: translateX(0);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

    .sm-scroll-line-label strong {
        color: var(--sm-primary-dark);
        font-size: 0.8rem;
        font-weight: 950;
        line-height: 1;
    }

    .sm-scroll-line-label span {
        color: var(--sm-dark);
        font-size: 0.78rem;
        font-weight: 850;
        line-height: 1.2;
    }

.sm-story-step {
    position: relative;
}

    .sm-story-step::before {
        content: attr(data-step);
        position: absolute;
        left: -84px;
        top: 82px;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid var(--sm-border);
        color: var(--sm-muted);
        font-size: 0.82rem;
        font-weight: 900;
        box-shadow: var(--sm-shadow-sm);
        opacity: 0.5;
        transform: scale(0.9);
        transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .sm-story-step.sm-story-step-active::before {
        opacity: 1;
        transform: scale(1);
        background: var(--sm-primary);
        border-color: var(--sm-primary);
        color: #ffffff;
    }

@media (max-width: 1100px) {
    .sm-story-step::before,
    .sm-scroll-line-label {
        display: none;
    }
}