/*!
 * "Security" dressing for a solution page (/solutions/security-video-analytics):
 * the hero as a yard at night seen by the system - a camera on its pole
 * sweeping the ground, a trip wire across the way in with someone walking through it, a heat map glowing where
 * things have walked, and a chain-link fence. Decoration only: aria-hidden,
 * ignores the pointer and sits behind the copy. Artwork is in /img/security.
 * The hero keeps its own dark colours on every site palette.
 */

#header-btm.security-hero {
    position: relative;
    overflow: hidden;
    background-color: #131c2a !important;
    background-image: linear-gradient(180deg, #080d15 0%, #131c2a 58%, #1d2a3b 100%);
}

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

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

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

/* Heat map: where movement has been, hottest in the middle of the path */
.security-heat {
    right: 14%;
    bottom: 0;
    width: 40%;
    height: 34px;
    background:
        radial-gradient(ellipse 70px 9px at 58% 72%, rgba(255, 70, 50, .6), transparent 70%),
        radial-gradient(ellipse 130px 13px at 56% 72%, rgba(255, 190, 40, .36), transparent 72%),
        radial-gradient(ellipse 220px 17px at 52% 72%, rgba(60, 220, 120, .22), transparent 72%);
}

.security-fence {
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: url(/img/security/fence.svg?v=1) repeat-x 0 0 / 25px 30px;
    opacity: .55;
}

/* The trip wire: a line across the way in, seen side on, so walking past it is crossing it.
   The badge is the number that has crossed. */
.security-wire {
    right: 31%;
    bottom: 4px;
    height: 82px;
    border-left: 3px dashed #ff4b3e;
    filter: drop-shadow(0 0 6px rgba(255, 75, 62, .7));
}

.security-wire::after {
    content: '12';
    position: absolute;
    left: -1px;
    bottom: 100%;
    margin-bottom: 5px;
    padding: 1px 9px;
    border-radius: 10px;
    font: 700 13px/1.5 system-ui, sans-serif;
    color: #fff;
    background: #ff4b3e;
    transform: translateX(-50%);
}

/* Someone walking through it */
.security-person {
    right: 31%;
    bottom: 4px;
    width: 30px;
    height: auto;
    margin-right: -15px;
    animation: security-walk 9s linear infinite;
}

.security-cam {
    right: 6%;
    bottom: 0;
    width: 92px;
}

.security-cam img {
    display: block;
    width: 100%;
    height: auto;
}

/* What the camera is looking at: a cone from the lens, sweeping slowly */
.security-cam::before {
    content: '';
    position: absolute;
    right: 87%;
    top: 16%;
    width: 300px;
    height: 150px;
    transform-origin: 100% 0;
    clip-path: polygon(100% 0, 0 46%, 0 100%, 34% 100%);
    background: linear-gradient(250deg, rgba(120, 200, 255, .34), rgba(120, 200, 255, 0) 78%);
    animation: security-sweep 7s ease-in-out infinite alternate;
}

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

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

    .security-heat { right: 10%; width: 70%; height: 28px; }
    .security-wire { right: 46%; height: 62px; }
    .security-person { right: 46%; width: 23px; margin-right: -11px; }
    .security-cam { right: 10px; width: 66px; }
    .security-cam::before { width: 210px; height: 106px; }
    .security-fence { height: 24px; background-size: 20px 24px; }
}

@keyframes security-walk {
    0%        { transform: translateX(-130px); opacity: 0; }
    12%       { opacity: 1; }
    88%       { opacity: 1; }
    100%      { transform: translateX(130px); opacity: 0; }
}

@keyframes security-sweep {
    from { transform: rotate(-9deg); }
    to   { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
    .security-cam::before,
    .security-person {
        animation: none !important;
    }
}