/*!
 * "Smart" dressing for a solution page (/solutions/home-automation-camera):
 * the hero as a house in the evening that knows the car - it pulls up, a camera reads the plate, the
 * garage door rolls up and the car drives in. Decoration only: aria-hidden,
 * ignores the pointer and sits behind the copy. Artwork is in /img/smart (it all
 * animates from inside scene.svg). The hero keeps its own
 * dark colours on every site palette.
 */

#header-btm.smart-hero {
    position: relative;
    overflow: hidden;
    background-color: #1a2550 !important;
    background-image:
        radial-gradient(circle at 84% 30%, rgba(127, 227, 255, .16), transparent 36%),
        linear-gradient(180deg, #0a1128 0%, #1a2550 58%, #2c3c70 100%);
}

#header-btm.smart-hero > .container-xxl {
    position: relative;
    z-index: 2;
}

.smart-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.smart-decor > * {
    position: absolute;
}

/* The drive, with a kerb line */
.smart-road {
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    background: #10162b;
    border-top: 2px solid rgba(127, 227, 255, .22);
}

/* The whole scene is one picture, so the car can be hidden by the door: it pulls up, the
   camera on the wall reads the plate, the door rolls up, the car drives in and the door comes
   down behind it (all animated from inside scene.svg, which also holds still for anyone who
   asked for less motion). */
.smart-scene {
    right: 5%;
    bottom: 0;
    width: 350px;
    height: auto;
}

@media (min-width: 992px) {
    /* Room on the drive for the house under the hero chat */
    #header-btm.smart-hero {
        padding-bottom: 6.5rem !important;
    }
}

@media (max-width: 991.98px) {
    #header-btm.smart-hero {
        padding-bottom: 7rem !important;
    }

    .smart-scene { right: 4px; width: 256px; }
}