/*!
 * /solutions hub: each card wears the colours of the page it leads to, with a
 * piece or two of that page's hero art in its bottom right corner (markup in
 * Pages/Shared/_SolutionCardArt.cshtml). The art is decoration only: behind
 * the copy, ignores the pointer, aria-hidden. Cards keep their own dark
 * colours on every site palette, like the heroes they echo.
 */

.card.sol-card {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-color: rgba(255, 255, 255, .16);
}

/* Each card's own colours, pulled a third of the way back towards an ordinary card so seven
   of them side by side read as tinted cards and not seven posters */
.card.sol-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 34, .38);
    pointer-events: none;
}

.card.sol-card .card-body {
    position: relative;
    z-index: 1;
}

/* Leave the corner to the art: the button row never runs under it */
.card.sol-card .btn {
    max-width: calc(100% - 118px);
}

.sca {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sca > * {
    position: absolute;
}

.sca img {
    display: block;
    height: auto;
}

/* Nothing moves until the card is pointed at: a grid of seven things all moving at once pulls
   the eye off the words. The page's own animations are paused; art that animates from inside
   its SVG shows its still twin instead. On touch screens and for anyone who asked for less
   motion the cards simply stay still. */
/* !important because each piece below sets its animation with the shorthand, which resets
   the play state to running and would otherwise win (it comes later and is more specific). */
.card.sol-card .sca *,
.card.sol-card .sca-cam::before,
.card.sol-card .sca-house::after {
    animation-play-state: paused !important;
}

.sca .sca-live {
    visibility: hidden;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card.sol-card:hover .sca *,
    .card.sol-card:hover .sca-cam::before,
    .card.sol-card:focus-within .sca-cam::before,
    .card.sol-card:hover .sca-house::after,
    .card.sol-card:focus-within .sca *,
    .card.sol-card:focus-within .sca-house::after {
        animation-play-state: running !important;
    }

    .card.sol-card:hover .sca-live,
    .card.sol-card:focus-within .sca-live {
        visibility: visible;
    }

    .card.sol-card:hover .sca-still,
    .card.sol-card:focus-within .sca-still {
        visibility: hidden;
    }
}

/* ── Backgrounds: the hero gradients, at card size ───────────────── */
.card.sol-card-feeder {
    background: radial-gradient(circle at 80% 112%, rgba(255, 190, 110, .55), transparent 46%), linear-gradient(180deg, #081a28 0%, #0f3346 55%, #235457 100%);
}

.card.sol-card-pet {
    background: radial-gradient(circle at 84% 80%, rgba(255, 196, 120, .28), transparent 44%), linear-gradient(180deg, #23151f 0%, #33202c 60%, #432a33 100%);
}

.card.sol-card-porch {
    background: radial-gradient(circle at 16% 112%, rgba(255, 140, 110, .28), transparent 48%), linear-gradient(180deg, #121030 0%, #2a2046 55%, #553350 100%);
}

.card.sol-card-barn {
    background: radial-gradient(circle at 88% 10%, rgba(200, 215, 255, .14), transparent 36%), linear-gradient(180deg, #050917 0%, #0c1636 55%, #1c2c58 100%);
}

.card.sol-card-home {
    background: linear-gradient(180deg, #132827 0%, #1f3a3a 58%, #2b4a46 100%);
}

.card.sol-card-machine {
    background: linear-gradient(180deg, #0d131a 0%, #1a242f 58%, #263442 100%);
}

.card.sol-card-security {
    background: linear-gradient(180deg, #080d15 0%, #131c2a 58%, #1d2a3b 100%);
}

.card.sol-card-smart {
    background: radial-gradient(circle at 86% 40%, rgba(127, 227, 255, .14), transparent 40%), linear-gradient(180deg, #0a1128 0%, #1a2550 58%, #2c3c70 100%);
}
.card.sol-card-shop {
    background: radial-gradient(circle at 84% 106%, rgba(255, 196, 120, .3), transparent 42%), linear-gradient(180deg, #0c1420 0%, #182230 56%, #26303d 100%);
}

.card.sol-card-venue {
    background: radial-gradient(circle at 84% 80%, rgba(169, 216, 255, .18), transparent 40%), linear-gradient(180deg, #0d0a20 0%, #1d1738 56%, #2e2552 100%);
}

.card.sol-card-spooky {
    background: radial-gradient(circle at 86% 4%, rgba(255, 221, 140, .18), transparent 40%), linear-gradient(180deg, #120920 0%, #24123f 55%, #3a1b45 100%);
}

/* ── Shared pieces ───────────────────────────────────────────────── */
.sca img.sca-ground {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15px;
}

.sca-floor {
    left: 0;
    right: 0;
    bottom: 0;
    height: 9px;
}

.sca-stars {
    inset: 0 0 34% 0;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 30%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 34% 14%, #dfe8ff, transparent),
        radial-gradient(1.6px 1.6px at 58% 40%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 76% 16%, #dfe8ff, transparent),
        radial-gradient(1.8px 1.8px at 92% 52%, #fff, transparent);
    animation: sca-twinkle 1.6s ease-in-out infinite alternate;
}

.sca-house img {
    width: 100%;
}

.sca-house::after,
.sca-glow {
    content: '';
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: sca-lamp 2.4s ease-in-out infinite;
}

/* ── Feeder: sunrise, a robin pecking by the pole ────────────────── */
.sca-feeder .sca-sun {
    right: 74px;
    bottom: -14px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #ffe6ae, #f6ae58 75%);
    box-shadow: 0 0 30px 10px rgba(255, 190, 110, .3);
}

.sca-feeder .sca-pole { right: 20px; bottom: 3px; width: 36px; }

.sca-feeder .sca-robin {
    right: 132px;
    bottom: 4px;
    width: 24px;
    transform: scaleX(-1);
    transform-origin: 40% 100%;
    animation: sca-peck 2.6s ease-in-out infinite;
}

/* ── Pet: the cat on the floorboards ─────────────────────────────── */
.sca-pet .sca-floor {
    background: linear-gradient(180deg, #7a5236, #56371f);
    border-top: 2px solid rgba(255, 226, 190, .3);
}

.sca-pet .sca-cat  { right: 18px; bottom: 4px; width: 52px; }
.sca-pet .sca-ball { right: 82px; bottom: 5px; width: 14px; }

/* ── Porch: the front door with the light on ─────────────────────── */
.sca-porch .sca-floor { height: 5px; background: #100c22; }
.sca-porch .sca-house { right: 12px; bottom: 0; width: 98px; }

.sca-porch .sca-house::after {
    left: 62.3%;
    top: 53.5%;
    width: 34%;
    --sca-at: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 220, 150, .6), rgba(255, 220, 150, 0) 66%);
}

/* ── Barn: stars over the barn, loft light on ────────────────────── */
.sca-barn .sca-house { right: 16px; bottom: 5px; width: 80px; }

.sca-barn .sca-house::after {
    left: 38.9%;
    top: 38.5%;
    width: 46%;
    --sca-at: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 207, 107, .5), rgba(255, 207, 107, 0) 68%);
}

/* ── Home: the armchair, tea steaming beside it ──────────────────── */
.sca-home .sca-floor {
    background: linear-gradient(180deg, #5d4a55, #4a3a44);
    border-top: 2px solid rgba(240, 232, 214, .3);
}

.sca-home .sca-chair { right: 44px; bottom: 4px; width: 52px; }
.sca-home .sca-table { right: 12px; bottom: 5px; width: 28px; }

.sca-home .sca-glow {
    right: -14px;
    bottom: 6px;
    width: 96px;
    background: radial-gradient(circle, rgba(255, 228, 170, .3), rgba(255, 228, 170, 0) 68%);
}

/* ── Machine: gears turning, the red light pulsing ───────────────── */
.sca-machine .sca-floor {
    height: 7px;
    background: repeating-linear-gradient(-45deg, #f2b233 0 9px, #14181d 9px 18px);
    opacity: .85;
}

.sca-machine .sca-cabinet { right: 12px; bottom: 7px; width: 58px; }
.sca-machine .sca-gears   { right: 72px; bottom: 9px; width: 54px; }

.sca-machine .sca-glow {
    right: 13px;
    bottom: 40px;
    width: 36px;
    background: radial-gradient(circle, rgba(255, 75, 62, .8), rgba(255, 75, 62, 0) 66%);
    animation: sca-beacon 1.8s ease-in-out infinite;
}

/* ── Security: the camera sweeping, a trip wire, a heat map ──────── */
.sca-security .sca-floor {
    height: 12px;
    background: url(/img/security/fence.svg?v=1) repeat-x 0 0 / 10px 12px;
    opacity: .5;
}

.sca-security .sca-heat {
    right: 40px;
    bottom: 0;
    width: 120px;
    height: 16px;
    background:
        radial-gradient(ellipse 26px 4px at 56% 70%, rgba(255, 70, 50, .6), transparent 70%),
        radial-gradient(ellipse 52px 6px at 54% 70%, rgba(255, 190, 40, .36), transparent 72%);
}

.sca-security .sca-wire {
    right: 92px;
    bottom: 2px;
    height: 34px;
    border-left: 2px dashed #ff4b3e;
}

.sca-security .sca-cam { right: 12px; bottom: 0; width: 36px; }
.sca-security .sca-cam img { width: 100%; }

.sca-security .sca-cam::before {
    content: '';
    position: absolute;
    right: 87%;
    top: 16%;
    width: 100px;
    height: 46px;
    transform-origin: 100% 0;
    clip-path: polygon(100% 0, 0 46%, 0 100%, 34% 100%);
    background: linear-gradient(250deg, rgba(120, 200, 255, .36), rgba(120, 200, 255, 0) 80%);
    animation: sca-sweep 2.4s ease-in-out infinite alternate;
}

/* ── Smart: the plate is read, the garage opens, the car drives in ───────────────────── */
.sca-smart .sca-floor {
    height: 6px;
    background: #10162b;
    border-top: 1px solid rgba(127, 227, 255, .25);
}

.sca-smart .sca-home { right: 4px; bottom: 0; width: 112px; }
/* ── Shop: the shop front, its door counted, the window glowing ───── */
.sca-shop .sca-floor {
    height: 6px;
    background: #1a222c;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.sca-shop .sca-front { right: 12px; bottom: 5px; width: 84px; }

.sca-shop .sca-glow {
    right: 26px;
    bottom: -40px;
    width: 92px;
    background: radial-gradient(circle, rgba(255, 200, 120, .45), rgba(255, 200, 120, 0) 66%);
}

/* (on the doorway: the shop is 84 wide, its door 56 to 76 of it) */
.sca-shop .sca-wire {
    right: 33px;
    bottom: 5px;
    height: 32px;
    border-left: 2px dashed #39d98a;
    filter: drop-shadow(0 0 3px rgba(57, 217, 138, .7));
}

/* ── Venue: the doors, and the screen by them going from green to red ── */
.sca-venue .sca-floor {
    height: 5px;
    background: #120e26;
    border-top: 1px solid rgba(217, 210, 255, .14);
}

.sca-venue .sca-front { right: 8px; bottom: 4px; width: 96px; }

/* (on the wall left of the doors) */
.sca-venue .sca-screen {
    right: 79px;
    bottom: 29px;
    width: 17px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #17132e;
    background: #1f9d55;
    box-shadow: 0 0 9px rgba(57, 217, 138, .6);
    animation: sca-capacity 3.2s steps(1) infinite;
}

/* ── Spooky: cobweb, ghost and jack-o'-lantern ───────────────────── */
.sca-spooky .sca-web {
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    background-color: rgba(255, 255, 255, .26);
    -webkit-mask: url(/img/spooky/cobweb.svg?v=1) no-repeat 0 0 / contain;
    mask: url(/img/spooky/cobweb.svg?v=1) no-repeat 0 0 / contain;
    transform: scaleX(-1);
}

.sca-spooky .sca-ghost {
    right: 64px;
    bottom: 8px;
    width: 28px;
    filter: drop-shadow(0 0 7px rgba(200, 190, 255, .6));
    animation: sca-float 1.8s ease-in-out infinite alternate;
}

.sca-spooky .sca-pumpkin {
    right: 14px;
    bottom: 6px;
    width: 40px;
    animation: sca-flicker 2.6s ease-in-out infinite;
}

/* ── Motion ──────────────────────────────────────────────────────── */
@keyframes sca-sweep {
    from { transform: rotate(-12deg); }
    to   { transform: rotate(10deg); }
}

@keyframes sca-twinkle {
    from { opacity: 1; }
    to   { opacity: .15; }
}

@keyframes sca-lamp {
    0%, 100% { opacity: .55; transform: var(--sca-at, translate(0, 0)) scale(1); }
    50%      { opacity: 1; transform: var(--sca-at, translate(0, 0)) scale(1.45); }
}

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

/* The peck comes first, so it shows the moment the card is pointed at */
@keyframes sca-peck {
    0%, 46%, 100% { transform: scaleX(-1) rotate(0); }
    8%, 24%, 40%  { transform: scaleX(-1) rotate(26deg); }
    16%, 32%      { transform: scaleX(-1) rotate(6deg); }
}

@keyframes sca-capacity {
    0%  { background: #1f9d55; box-shadow: 0 0 9px rgba(57, 217, 138, .6); }
    60% { background: #c23b4a; box-shadow: 0 0 10px rgba(255, 75, 62, .7); }
}

@keyframes sca-float {
    from { transform: translateY(0) rotate(-3deg); opacity: .6; }
    to   { transform: translateY(-11px) rotate(5deg); opacity: 1; }
}

@keyframes sca-flicker {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 150, 40, .65)) brightness(1); }
    42%      { filter: drop-shadow(0 0 3px rgba(255, 150, 40, .4)) brightness(.9); }
    50%      { filter: drop-shadow(0 0 9px rgba(255, 170, 60, .8)) brightness(1.08); }
    63%      { filter: drop-shadow(0 0 4px rgba(255, 150, 40, .5)) brightness(.94); }
}