/*!
 * "Machine" dressing for a solution page (/solutions/machine-monitoring-camera):
 * the hero as a workshop - a control cabinet with its red stack light on, a
 * pair of gears turning slowly beside it and hazard tape along the floor.
 * Decoration only: aria-hidden, ignores the pointer and sits behind the copy.
 * Artwork is in /img/machine (the gears turn from inside gears.svg). The hero
 * keeps its own dark colours on every site palette.
 */

#header-btm.machine-hero {
    position: relative;
    overflow: hidden;
    background-color: #1a242f !important;
    background-image:
        radial-gradient(circle at 84% 46%, rgba(255, 75, 62, .20), transparent 34%),
        linear-gradient(180deg, #0d131a 0%, #1a242f 58%, #263442 100%);
}

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

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

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

/* Hazard tape along the floor */
.machine-floor {
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    background: repeating-linear-gradient(-45deg, #f2b233 0 14px, #14181d 14px 28px);
    opacity: .85;
}

/* Gears and control cabinet in a row on the floor */
.machine-group {
    right: 7%;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

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

.machine-gears   { width: 112px; margin-bottom: 4px; }
.machine-cabinet { width: 128px; }

/* The red stack light, pulsing */
.machine-group::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 76px;
    aspect-ratio: 1;
    transform: translate(1px, -41%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 75, 62, .75), rgba(255, 75, 62, 0) 66%);
    animation: machine-beacon 1.8s ease-in-out infinite;
}

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

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

    .machine-group { right: 14px; }
    .machine-gears   { width: 84px; }
    .machine-cabinet { width: 100px; }
    .machine-group::after { width: 60px; }
}

@keyframes machine-beacon {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

/* For anyone who asked for less motion the light stays on, steady */
@media (prefers-reduced-motion: reduce) {
    .machine-group::after {
        animation: none !important;
        opacity: .8;
    }
}