/*!
 * "Home" dressing for a solution page (/solutions/elderly-parent-camera): the
 * hero as a quiet sitting room - an armchair under a standing lamp, a cup of
 * tea on the side table and a plant in the corner. Decoration only:
 * aria-hidden, ignores the pointer and sits behind the copy. Artwork is in
 * /img/home (the steam rises from inside table.svg). The hero keeps its own
 * dark colours on every site palette.
 */

#header-btm.home-hero {
    position: relative;
    overflow: hidden;
    background-color: #1f3a3a !important;
    background-image:
        radial-gradient(circle at 80% 58%, rgba(255, 224, 160, .26), transparent 38%),
        linear-gradient(180deg, #132827 0%, #1f3a3a 58%, #2b4a46 100%);
}

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

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

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

/* Carpet, with the skirting board's edge above it */
.home-floor {
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    background: linear-gradient(180deg, #5d4a55, #4a3a44);
    border-top: 3px solid rgba(240, 232, 214, .30);
}

/* Plant, armchair, side table and lamp in a row on the floor */
.home-group {
    right: 7%;
    bottom: 8px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.home-group img {
    display: block;
    height: auto;
}

.home-plant { width: 38px; margin-right: 14px; }
.home-chair { width: 96px; }
.home-table { width: 46px; }
.home-lamp  { width: 46px; margin-left: -8px; }

/* Lamplight, breathing a little */
.home-group::after {
    content: '';
    position: absolute;
    right: -32px;
    bottom: 52px;
    width: 110px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 228, 170, .42), rgba(255, 228, 170, 0) 68%);
    animation: home-lamp 6s ease-in-out infinite;
}

@media (min-width: 992px) {
    /* Room on the floor for the armchair under the hero chat */
    #header-btm.home-hero {
        padding-bottom: 5.75rem !important;
    }
}

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

    .home-group { right: 14px; gap: 8px; }
    .home-plant { width: 30px; margin-right: 8px; }
    .home-chair { width: 76px; }
    .home-table { width: 36px; }
    .home-lamp  { width: 36px; }
    .home-group::after { width: 86px; right: -26px; bottom: 40px; }
}

@keyframes home-lamp {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .home-group::after {
        animation: none !important;
    }
}