/* Decorative industry tags stay behind the first-screen product window. */
.home-page #hero .hero-bubbles {
    position: absolute;
    inset: -46px clamp(-88px, -6vw, -24px) -46px 0;
    z-index: -1;
    overflow: hidden;
    contain: paint;
    pointer-events: none;
    user-select: none;
    --hero-bubble-travel: 560px;
    -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
}

.home-page #hero .hero-bubble {
    position: absolute;
    bottom: -36px;
    left: var(--bubble-left, 8%);
    right: var(--bubble-right, auto);
    box-sizing: border-box;
    padding: 6px 9px;
    border: 1px solid rgba(95, 157, 190, .12);
    border-radius: 999px;
    color: #7c929f;
    background: rgba(198, 226, 241, .28);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    animation: hero-bubble-rise var(--bubble-duration, 36s) linear var(--bubble-delay, 0s) infinite;
    animation-play-state: paused;
}

.home-page #hero .hero-bubbles[data-running="true"] .hero-bubble {
    animation-play-state: running;
}

@keyframes hero-bubble-rise {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    12% { opacity: var(--bubble-opacity, .5); }
    42% { transform: translate3d(var(--bubble-sway, 0px), calc(-.42 * var(--hero-bubble-travel)), 0); }
    75% { transform: translate3d(calc(-.35 * var(--bubble-sway, 0px)), calc(-.75 * var(--hero-bubble-travel)), 0); opacity: var(--bubble-opacity, .5); }
    100% { transform: translate3d(calc(.5 * var(--bubble-sway, 0px)), calc(-1 * var(--hero-bubble-travel)), 0); opacity: 0; }
}

@media (max-width: 900px) {
    .home-page #hero .hero-bubbles {
        inset: -30px -20px -30px 0;
    }
    .home-page #hero .hero-bubble {
        left: var(--bubble-mobile-left, 8%);
        right: auto;
        padding: 5px 9px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page #hero .hero-bubbles {
        display: none;
    }
    .home-page #hero .hero-bubble {
        animation: none;
    }
}