/*!
 * "Venue" dressing for a solution page (/solutions/occupancy-counter): the hero as a venue's
 * entrance at night - marquee lights over glass doors and a rope barrier, guests walking in,
 * and a screen by the door that is green while there is room and turns red as the bar under
 * it fills up to the capacity, then empties and starts again. Decoration only: aria-hidden,
 * ignores the pointer and sits behind the copy. Artwork is in /img/venue. The hero keeps its
 * own dark colours on every site palette.
 */

#header-btm.venue-hero {
    position: relative;
    overflow: hidden;
    background-color: #1d1738 !important;
    background-image:
        radial-gradient(circle at 84% 70%, rgba(169, 216, 255, .16), transparent 32%),
        linear-gradient(180deg, #0d0a20 0%, #1d1738 56%, #2e2552 100%);
}

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

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

.venue-decor > *,
.venue-scene > * {
    position: absolute;
}

.venue-floor {
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: #120e26;
    border-top: 2px solid rgba(217, 210, 255, .12);
}

/* Everything at the entrance, laid out in pixels from its bottom right corner */
.venue-scene {
    right: 6%;
    bottom: 0;
    width: 260px;
    height: 160px;
    transform-origin: 100% 100%;
}

.venue-front {
    right: 0;
    bottom: 8px;
    width: 210px;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(255, 210, 122, .14));
}

/* Light from the doors on the ground */
.venue-spot {
    left: 96px;
    bottom: 0;
    width: 150px;
    height: 22px;
    background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(169, 216, 255, .42), transparent 70%);
}

/* The screen on the wall by the door: green with a tick while there is room, red with a
   no-entry sign when full; under it, how full it is */
.venue-screen {
    left: 74px;
    bottom: 70px;
    width: 40px;
    height: 28px;
}

.venue-ok,
.venue-full {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    border: 2px solid #17132e;
}

.venue-ok {
    background: #1f9d55;
    box-shadow: 0 0 14px rgba(57, 217, 138, .55);
}

.venue-ok::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 44%;
    width: 7px;
    height: 13px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.venue-full {
    background: #c23b4a;
    box-shadow: 0 0 16px rgba(255, 75, 62, .65);
    opacity: 0;
    animation: venue-full 10s linear infinite;
}

.venue-full::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2.5px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.venue-full::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    transform: translate(-50%, -50%);
}

.venue-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

.venue-bar::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    border-radius: 2px;
    transform-origin: 0 50%;
    animation: venue-fill 10s linear infinite;
}

/* Guests walking up to the doors */
.venue-guest {
    left: 4px;
    bottom: 8px;
    width: 28px;
    height: auto;
    animation: venue-walk 10s linear infinite;
}

.venue-guest-2 {
    animation-delay: -5s;
}

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

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

    .venue-scene { right: 8px; transform: scale(.74); }
}

@keyframes venue-walk {
    0%   { transform: translateX(-170px); opacity: 0; }
    10%  { opacity: 1; }
    80%  { transform: translateX(132px); opacity: 1; }
    90%  { transform: translateX(150px); opacity: 0; }
    100% { transform: translateX(150px); opacity: 0; }
}

/* Filling up: green, then amber, then red at the capacity - held - then empty again */
@keyframes venue-fill {
    0%   { transform: scaleX(.15); background: #39d98a; }
    40%  { background: #39d98a; }
    55%  { background: #f2b233; }
    62%  { transform: scaleX(1); background: #ff4b3e; }
    90%  { transform: scaleX(1); background: #ff4b3e; }
    100% { transform: scaleX(.15); background: #39d98a; }
}

@keyframes venue-full {
    0%, 60%, 94%, 100% { opacity: 0; }
    63%, 90%           { opacity: 1; }
}

/* For anyone who asked for less motion: green, with room to spare, and nothing walking */
@media (prefers-reduced-motion: reduce) {
    .venue-guest,
    .venue-full,
    .venue-bar::before {
        animation: none !important;
    }

    .venue-guest-1 { transform: translateX(60px); }
    .venue-guest-2 { display: none; }
    .venue-bar::before { transform: scaleX(.6); background: #39d98a; }
}