/*
 * Calibracao desktop do fundo animado por scroll.
 * A sequencia atual e temporaria; o canvas esta isolado para receber
 * posteriormente os frames oficiais dos caminhoes da Mudancas Tom.
 */

.hero-truck-stage {
    display: contents;
}

.hero-truck-canvas {
    display: none;
}

@media (min-width: 768px) {
    html.hero-truck-scrub-active .hero {
        height: 280vh;
        min-height: 0;
        overflow: visible;
        padding: 0;
        background: #f7f9fd;
    }

    html.hero-truck-scrub-active .hero::before,
    html.hero-truck-scrub-active .hero::after {
        display: none;
    }

    html.hero-truck-scrub-active .hero-truck-stage {
        position: sticky;
        top: 0;
        display: block;
        width: 100%;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
        padding: 118px 0 0;
        isolation: isolate;
        background: #eef3f8;
    }

    html.hero-truck-scrub-active .hero-truck-stage::before {
        position: absolute;
        z-index: 1;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.92) 0%,
                rgba(255,255,255,.80) 24%,
                rgba(255,255,255,.60) 42%,
                rgba(255,255,255,.26) 59%,
                rgba(255,255,255,.06) 80%,
                rgba(255,255,255,.02) 100%
            ),
            linear-gradient(
                180deg,
                rgba(247,249,253,.03) 44%,
                rgba(247,249,253,.56) 78%,
                #f7f9fd 100%
            );
        content: "";
        pointer-events: none;
    }

    html.hero-truck-scrub-active .hero-truck-stage::after {
        position: absolute;
        z-index: 2;
        top: 102px;
        right: 48%;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(255,106,0,.28);
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    html.hero-truck-scrub-active .hero-truck-canvas {
        position: absolute;
        z-index: 0;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.9) brightness(1.02);
        pointer-events: none;
    }

    html.hero-truck-scrub-active .hero .hero-carousel {
        display: none;
    }

    html.hero-truck-scrub-active .hero-container,
    html.hero-truck-scrub-active .hero-stats {
        position: relative;
    }

    html.hero-truck-scrub-active .hero-container {
        z-index: 4;
    }

    html.hero-truck-scrub-active .hero-stats {
        z-index: 5;
    }

    html[data-theme="dark"].hero-truck-scrub-active .hero {
        background: #071426;
    }

    html[data-theme="dark"].hero-truck-scrub-active .hero-truck-stage {
        background: #071426;
    }

    html[data-theme="dark"].hero-truck-scrub-active .hero-truck-stage::before {
        background:
            linear-gradient(
                90deg,
                rgba(7,20,38,.96) 0%,
                rgba(7,20,38,.9) 27%,
                rgba(7,20,38,.76) 45%,
                rgba(7,20,38,.5) 64%,
                rgba(7,20,38,.3) 82%,
                rgba(7,20,38,.22) 100%
            ),
            linear-gradient(
                180deg,
                rgba(7,20,38,.1) 40%,
                rgba(7,20,38,.72) 78%,
                #071426 100%
            );
    }

    html[data-theme="dark"].hero-truck-scrub-active .hero-truck-stage::after {
        border-color: rgba(255,106,0,.38);
        border-right-color: transparent;
        border-bottom-color: transparent;
    }

    html[data-theme="dark"].hero-truck-scrub-active .hero-truck-canvas {
        filter: saturate(.88) contrast(1.04) brightness(.72);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.hero-truck-scrub-active .hero {
        height: 100vh;
    }
}