.ivsm-scroll-mower {
    --ivsm-progress: 0%;
    --ivsm-cut-opacity: .82;
    --ivsm-height: 100px;
    position: fixed;
    z-index: var(--ivsm-z-index, 9990);
    right: 0;
    bottom: 0 !important;
    left: 0;
    height: var(--ivsm-height);
    /* Macchina e fili possono uscire sopra la fascia: niente effetto mozzato. */
    overflow-x: clip;
    overflow-y: visible;
    pointer-events: none;
    filter: drop-shadow(0 -2px 4px rgba(18, 46, 21, .13));
    isolation: isolate;
}

/* La macchina esce lateralmente a inizio/fine corsa, ma non deve creare scrollbar. */
html.ivsm-no-horizontal-overflow,
body.ivsm-no-horizontal-overflow {
    max-width: 100%;
    overflow-x: hidden !important;
}

@supports (overflow: clip) {
    html.ivsm-no-horizontal-overflow,
    body.ivsm-no-horizontal-overflow {
        overflow-x: clip !important;
    }
}

.ivsm-scroll-mower--no-shadow { filter: none; }

.ivsm-scroll-mower__cut,
.ivsm-scroll-mower__tall {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    filter: saturate(.86) contrast(1.03);
    overflow: hidden;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.ivsm-scroll-mower__cut {
    height: 100%;
    opacity: var(--ivsm-cut-opacity);
    /* Mostra la sagoma trasparente completa: niente fascia fotografica rettangolare. */
    background-size: auto 82%;
}

.ivsm-scroll-mower__tall {
    height: 100%;
    background-size: auto 135%;
    clip-path: inset(0 0 0 var(--ivsm-progress));
    will-change: clip-path;
}

.ivsm-scroll-mower__machine {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: var(--ivsm-progress);
    width: clamp(150px, 12vw, 190px);
    /* Il centro della lama nella foto coincide con il bordo del taglio. */
    transform: translateX(-77%);
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.22));
    will-change: left;
}

.ivsm-scroll-mower__machine img {
    display: block;
    width: 100%;
    height: auto;
}

.ivsm-clipping {
    position: absolute;
    z-index: 4;
    bottom: 20%;
    left: var(--ivsm-clip-left);
    width: 2.5px;
    height: var(--ivsm-clip-height);
    border-radius: 80% 20% 70% 30%;
    background: linear-gradient(#8ac04c, #285f24);
    box-shadow: 0 1px 1px rgba(16, 51, 18, .24);
    pointer-events: none;
    transform-origin: center bottom;
    animation: ivsm-clipping-flight var(--ivsm-clip-duration, .78s) cubic-bezier(.18,.65,.3,1) forwards;
    will-change: transform, opacity;
}

@keyframes ivsm-clipping-flight {
    44% { transform: translate(calc(var(--ivsm-clip-x) * .52), var(--ivsm-clip-up)) rotate(calc(var(--ivsm-clip-r) * .45)); opacity: 1; }
    to { transform: translate(var(--ivsm-clip-x), var(--ivsm-clip-down)) rotate(var(--ivsm-clip-r)); opacity: 0; }
}

.ivsm-scroll-mower--preview {
    --ivsm-progress: 50%;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 62px;
    border-bottom: 1px solid #d5d9d5;
}

@media (max-width: 600px) {
    .ivsm-scroll-mower--desktop-only { display: none; }
    .ivsm-scroll-mower__machine { width: clamp(132px, 38vw, 158px); }
}

@media (prefers-reduced-motion: reduce) {
    .ivsm-clipping { display: none; }
}

@media print {
    .ivsm-scroll-mower { display: none !important; }
}