/*!
 * "Shop" dressing for a solution page (/solutions/retail-footfall-counter): the hero as a
 * high street at dusk - a shop front with a striped awning and its window lit, a counting
 * line across the door with the number that has come in, a shopper walking in through it,
 * and a little chart of the week beside it. Decoration only: aria-hidden, ignores the
 * pointer and sits behind the copy. Artwork is in /img/shop. The hero keeps its own dark
 * colours on every site palette.
 */

#header-btm.shop-hero {
    position: relative;
    overflow: hidden;
    background-color: #182230 !important;
    background-image:
        radial-gradient(circle at 86% 92%, rgba(255, 196, 120, .22), transparent 30%),
        linear-gradient(180deg, #0c1420 0%, #182230 56%, #26303d 100%);
}

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

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

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

/* The pavement */
.shop-street {
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: #1a222c;
    border-top: 2px solid rgba(255, 255, 255, .08);
}

/* Everything on the street, laid out in pixels from its bottom right corner */
.shop-scene {
    right: 6%;
    bottom: 0;
    width: 240px;
    height: 160px;
    transform-origin: 100% 100%;
}

.shop-front {
    right: 0;
    bottom: 10px;
    width: 190px;
    height: auto;
    filter: drop-shadow(0 0 22px rgba(255, 196, 120, .12));
}

/* Light from the window and the open door, falling on the pavement */
.shop-glow {
    left: 40px;
    bottom: 0;
    width: 220px;
    height: 24px;
    background: radial-gradient(ellipse 50% 60% at 60% 50%, rgba(255, 200, 120, .4), transparent 70%);
}

/* The counting line across the doorway, and the number that has crossed it */
.shop-line {
    left: 174px;
    bottom: 10px;
    height: 76px;
    border-left: 3px dashed #39d98a;
    filter: drop-shadow(0 0 6px rgba(57, 217, 138, .7));
}

/* (beside the top of the line, over the corner of the window: above it would sit on the awning) */
.shop-line::after {
    content: '+1';
    position: absolute;
    right: 6px;
    top: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    font: 700 13px/1.5 system-ui, sans-serif;
    color: #0c1420;
    background: #39d98a;
    box-shadow: 0 0 10px rgba(57, 217, 138, .6);
    transform-origin: 100% 50%;
    animation: shop-tick 9s linear infinite;
}

/* A shopper walking in through it */
.shop-shopper {
    left: 40px;
    bottom: 10px;
    width: 31px;
    height: auto;
    animation: shop-walk 9s linear infinite;
}

/* The week at a glance: a small card of bars, each growing in turn */
.shop-chart {
    left: -150px;
    bottom: 22px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 104px;
    height: 62px;
    padding: 14px 9px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 18, 28, .6);
}

.shop-chart::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 7px;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
}

.shop-chart i {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: #56b4e9;
    transform-origin: 50% 100%;
    animation: shop-bar 9s ease-in-out infinite;
}

.shop-chart i:nth-child(1) { height: 42%; animation-delay: -8.6s; }
.shop-chart i:nth-child(2) { height: 46%; animation-delay: -8.2s; }
.shop-chart i:nth-child(3) { height: 50%; animation-delay: -7.8s; }
.shop-chart i:nth-child(4) { height: 56%; animation-delay: -7.4s; }
.shop-chart i:nth-child(5) { height: 72%; animation-delay: -7s; }
.shop-chart i:nth-child(6) { height: 100%; animation-delay: -6.6s; background: #39d98a; }
.shop-chart i:nth-child(7) { height: 62%; animation-delay: -6.2s; }

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

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

    .shop-scene { right: 8px; transform: scale(.72); }
    .shop-chart { display: none; }
}

@keyframes shop-walk {
    0%   { transform: translateX(-190px); opacity: 0; }
    10%  { opacity: 1; }
    82%  { transform: translateX(146px); opacity: 1; }
    92%  { transform: translateX(166px); opacity: 0; }
    100% { transform: translateX(166px); opacity: 0; }
}

/* The badge lights up as the shopper crosses the line */
@keyframes shop-tick {
    0%, 76%, 100% { transform: scale(1); opacity: .75; }
    82%           { transform: scale(1.25); opacity: 1; }
    90%           { transform: scale(1); opacity: 1; }
}

@keyframes shop-bar {
    0%, 100% { transform: scaleY(.55); }
    50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .shop-shopper,
    .shop-line::after,
    .shop-chart i {
        animation: none !important;
    }

    .shop-shopper { transform: translateX(110px); }
}