/* Storebouncer: the moving scenes in the bento, built from HTML, SVG and CSS. One block per scene. The hero is in hero.css. */

/* ---------- pixels: three visitors, one check, three ad platforms. Tiles sit in percent on the SVG's 554 x 364 grid ----------
   One loop is 12 s: a customer, a bot, a customer, four seconds each. What belongs to one visitor runs the same keyframes,
   started 0, 4 or 8 seconds into the loop (--at). What the platforms do is timed on the whole loop: it happens after each customer.
   Seconds within a visitor's turn: .25 streak in, .95 the check (the ring fills), 1.85 the verdict, 1.9 the platforms are told. */
.art-pixels { --loop: 12s; --skip: 3.1s; padding: 28px; }
.pixels-stage { position: relative; width: min(100%, 600px); aspect-ratio: 554 / 364; margin-inline: auto; }
.pixels-stage > * { position: absolute; }
.pixels-stage [style*="--at"] { animation-delay: calc(var(--at) - var(--loop) - var(--skip)); }
.pixels-wires { inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.px-lines path { stroke: var(--line-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* a streak of light along a line: a short dash that runs from one end to the other */
.px-streak { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .16 2; stroke-dashoffset: .16; opacity: 0; animation: px-in var(--loop) infinite both; }
.px-in--bot { stroke: var(--bot); animation-name: px-in-bot; }
.px-out { animation-name: px-out; animation-delay: calc(var(--i) * .07s - var(--skip)); }
@keyframes px-in { 0%, 2.08% { stroke-dashoffset: .16; opacity: 0; } 2.5% { stroke-dashoffset: .16; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 7.92% { stroke-dashoffset: -1; opacity: 1; } 8.33%, 100% { stroke-dashoffset: -1; opacity: 0; } }
/* the bot's streak comes back out of the check a little way: turned away */
@keyframes px-in-bot { 0%, 2.08% { stroke-dashoffset: .16; opacity: 0; } 2.5% { stroke-dashoffset: .16; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 7.92% { stroke-dashoffset: -1; opacity: 1; } 8.33%, 15.42% { stroke-dashoffset: -1; opacity: 0; } 15.83% { stroke-dashoffset: -.86; opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 20.42% { stroke-dashoffset: -.5; opacity: 0; } 100% { stroke-dashoffset: -.5; opacity: 0; } }
@keyframes px-out { 0% { stroke-dashoffset: .16; opacity: 0; } 15.67% { stroke-dashoffset: .16; opacity: 0; } 16% { stroke-dashoffset: .16; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 20.83% { stroke-dashoffset: -1; opacity: 1; } 21.25% { stroke-dashoffset: -1; opacity: 0; } 82.33% { stroke-dashoffset: .16; opacity: 0; } 82.67% { stroke-dashoffset: .16; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 87.5% { stroke-dashoffset: -1; opacity: 1; } 87.92% { stroke-dashoffset: -1; opacity: 0; } 100% { stroke-dashoffset: -1; opacity: 0; } }

/* the ring round the check fills while it looks, and takes the verdict's colour */
.px-track { stroke: var(--line-2); stroke-width: 3; }
.px-arc { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transform-box: fill-box; transform-origin: center; rotate: -90deg; animation: px-arc var(--loop) infinite both; }
.px-arc--bot { animation-name: px-arc-bot; }
@keyframes px-arc { 0%, 7.83% { stroke-dashoffset: 1; opacity: 0; } 7.92% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .4, 1); } 15.42%, 27.92% { stroke-dashoffset: 0; opacity: 1; } 31.25%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes px-arc-bot { 0%, 7.83% { stroke-dashoffset: 1; opacity: 0; stroke: var(--accent); } 7.92% { stroke-dashoffset: 1; opacity: 1; stroke: var(--accent); animation-timing-function: cubic-bezier(.4, 0, .4, 1); } 15.42% { stroke-dashoffset: 0; opacity: 1; stroke: var(--accent); } 16.25%, 27.92% { stroke-dashoffset: 0; opacity: 1; stroke: var(--bot); } 31.25%, 100% { stroke-dashoffset: 0; opacity: 0; stroke: var(--bot); } }

/* the visitors: the one whose turn it is steps forward, the others wait */
.pixels-who { left: 0; top: calc((18 + var(--row) * 128) / 364 * 100%); width: calc(72 / 554 * 100%); aspect-ratio: 1; border-radius: 22%; color: var(--ink); opacity: .45; animation: px-who var(--loop) infinite both; }
.pixels-who svg { width: 54%; height: 54%; }
.pixels-who--bot { fill: var(--bot); }
@keyframes px-who { 0% { opacity: .45; scale: 1; } 1.67% { opacity: 1; scale: 1.07; } 4.17%, 28.33% { opacity: 1; scale: 1; } 32.08%, 100% { opacity: .45; scale: 1; } }

/* the check itself: Storebouncer's own mark. It nods a customer through and shakes at a bot */
.pixels-gate { left: calc(198 / 554 * 100%); top: calc(118 / 364 * 100%); width: calc(128 / 554 * 100%); aspect-ratio: 1; }
.pixels-gate img { position: absolute; inset: 17%; width: 66%; height: 66%; border-radius: 24%; box-shadow: var(--lift); animation: px-gate var(--loop) calc(0s - var(--skip)) infinite both; }
@keyframes px-gate { 0%, 15.33% { scale: 1; translate: 0; } 16.5% { scale: 1.07; } 19.17%, 48.67% { scale: 1; translate: 0; } 49.33% { translate: -3.5% 0; } 50% { translate: 3.5% 0; } 50.67% { translate: -2% 0; } 51.5%, 82% { translate: 0; scale: 1; } 83.17% { scale: 1.07; } 85.83%, 100% { scale: 1; translate: 0; } }

.pixels-time, .pixels-verdict { left: calc(262 / 554 * 100%); translate: -50% 0; opacity: 0; animation: var(--loop) calc(0s - var(--skip)) infinite both; }
.pixels-time { bottom: calc(256 / 364 * 100%); animation-name: px-time; }
.pixels-verdict { top: calc(256 / 364 * 100%); }
.pixels-verdict--in { animation-name: px-let-in; }
.pixels-verdict--out { animation-name: px-turned-away; }
@keyframes px-time { 0% { opacity: 0; transform: translateY(4px); } 7.5% { opacity: 0; transform: translateY(4px); } 9%, 15.17% { opacity: 1; transform: none; } 16.5% { opacity: 0; transform: none; } 40.83% { opacity: 0; transform: translateY(4px); } 42.33%, 48.5% { opacity: 1; transform: none; } 49.83% { opacity: 0; transform: none; } 74.17% { opacity: 0; transform: translateY(4px); } 75.67%, 81.83% { opacity: 1; transform: none; } 83.17% { opacity: 0; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes px-let-in { 0% { opacity: 0; transform: scale(.82); } 15.67% { opacity: 0; transform: scale(.82); } 16.67% { opacity: 1; transform: scale(1.05); } 17.83%, 27.92% { opacity: 1; transform: none; } 30.83% { opacity: 0; transform: none; } 82.33% { opacity: 0; transform: scale(.82); } 83.33% { opacity: 1; transform: scale(1.05); } 84.5%, 94.58% { opacity: 1; transform: none; } 97.5% { opacity: 0; transform: none; } 100% { opacity: 0; transform: scale(.82); } }
@keyframes px-turned-away { 0%, 49% { opacity: 0; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.05); } 51.17%, 61.25% { opacity: 1; transform: none; } 64.17%, 100% { opacity: 0; transform: none; } }

/* the ad platforms: grey until they are told, then in their own colour with a tick */
.pixels-brand { left: calc(446 / 554 * 100%); width: calc(108 / 554 * 100%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 22%; background: var(--card-2); fill: rgb(17 18 20 / .2); }
.pixels-brand--meta { top: 0; --b: #0866FF; --i: 0; }
.pixels-brand--google { top: calc(128 / 364 * 100%); --b: #4285F4; --i: 1; }
.pixels-brand--tiktok { top: calc(256 / 364 * 100%); --b: var(--ink); --i: 2; }
.pixels-brand > svg, .pixels-brand i svg { width: 50%; height: 50%; }
.pixels-brand i { position: absolute; inset: 0; border-radius: inherit; background: var(--b); fill: #fff; opacity: 0; animation: px-lit var(--loop) calc(var(--i) * .07s - var(--skip)) infinite both; }
.pixels-brand b { position: absolute; right: -7%; top: -7%; display: grid; place-items: center; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px rgb(17 18 20 / .06), 0 2px 6px rgb(17 18 20 / .18); color: var(--ok-ink); opacity: 0; animation: px-tick var(--loop) calc(var(--i) * .07s - var(--skip)) infinite both; }
.pixels-brand b svg { width: 62%; height: 62%; fill: none; stroke: currentColor; }
@keyframes px-lit { 0% { opacity: 0; transform: scale(.92); } 20.17% { opacity: 0; transform: scale(.92); } 21.33% { opacity: 1; transform: scale(1.04); } 22.67%, 28.33% { opacity: 1; transform: none; } 32.08% { opacity: 0; transform: none; } 86.83% { opacity: 0; transform: scale(.92); } 88% { opacity: 1; transform: scale(1.04); } 89.33%, 95% { opacity: 1; transform: none; } 98.75% { opacity: 0; transform: none; } 100% { opacity: 0; transform: scale(.92); } }
@keyframes px-tick { 0% { opacity: 0; transform: scale(.4); } 21.67% { opacity: 0; transform: scale(.4); } 22.83% { opacity: 1; transform: scale(1.15); } 24.17%, 28.33% { opacity: 1; transform: none; } 30.83% { opacity: 0; transform: scale(.8); } 88.33% { opacity: 0; transform: scale(.4); } 89.5% { opacity: 1; transform: scale(1.15); } 90.83%, 95% { opacity: 1; transform: none; } 97.5% { opacity: 0; transform: scale(.8); } 100% { opacity: 0; transform: scale(.4); } }

@media (min-width: 641px) { .pixels-time, .pixels-verdict { padding: 5px 11px; font-size: 14px; } }
@media (max-width: 640px) { .art-pixels { padding: 22px 16px 20px; } .px-track, .px-arc { stroke-width: 4; } .px-streak { stroke-width: 4.5; } }
/* still: a customer has just been let in, and the three have been told */
@media (prefers-reduced-motion: reduce) {
  .pixels-stage * { animation: none !important; }
  .pixels-who:first-of-type { opacity: 1; }
  .px-arc[style*="--at:0s"] { stroke-dashoffset: 0; opacity: 1; }
  .pixels-verdict--in, .pixels-brand i, .pixels-brand b { opacity: 1; }
}

/* ---------- card: a phone with a cheap item, and card after card refused. It never shows a success ---------- */
.art-card { container-type: inline-size; height: 348px; padding: 8px 28px 0; overflow: hidden; }
.card-wrap { display: flex; justify-content: center; }

.card-bot { flex: 0 1 100px; display: flex; align-items: center; height: 56px; margin-top: 150px; min-width: 0; }
.card-bot .tile { flex: none; width: 56px; height: 56px; }
.card-bot svg { width: 30px; height: 30px; fill: var(--bot); }
.card-bot .tile { animation: card-kick 2.4s -2.04s infinite; }
/* a hairline to the phone, and a streak of light along it for every card the bot sends */
.card-bot i { position: relative; flex: 1; height: 1.5px; min-width: 12px; background: var(--line-2); }
.card-bot i::after { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--bot) 70%) 0 0 / 18px 100% no-repeat; opacity: 0; animation: card-shot 2.4s cubic-bezier(.5, 0, .3, 1) -2.04s infinite; }
@keyframes card-shot { 0% { transform: none; opacity: 0; } 5%, 27% { opacity: 1; } 31%, 100% { transform: translateX(calc(100% - 18px)); opacity: 0; } }
@keyframes card-kick { 0%, 100% { transform: none; } 3% { transform: translateX(-3px) scale(1.04); } 12% { transform: none; } }

.card-phone { position: relative; flex: none; width: clamp(190px, 71cqw, 250px); padding: 7px; border-radius: 44px; background: #15161A; box-shadow: var(--lift), inset 0 0 0 1px rgb(255 255 255 / .16); }
.card-phone::before, .card-phone::after { content: ""; position: absolute; top: 92px; width: 2px; height: 30px; background: #15161A; }
.card-phone::before { left: -2px; border-radius: 2px 0 0 2px; box-shadow: 0 42px 0 #15161A; }
.card-phone::after { right: -2px; height: 52px; top: 110px; border-radius: 0 2px 2px 0; }
.card-screen { position: relative; height: 440px; padding: 40px 11px 0; overflow: hidden; border-radius: 37px; background: var(--paper); }
.card-status { position: absolute; z-index: 2; top: 13px; left: 23px; right: 21px; display: flex; align-items: center; justify-content: space-between; font: 600 11.5px/14px var(--font); letter-spacing: -.01em; color: var(--ink); }
.card-status span { display: flex; gap: 4px; }
.card-status svg { width: 14px; height: 14px; }
.card-bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 0 11px; background: var(--paper); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: -.005em; color: var(--ink-2); }
.card-bar svg { width: 11px; height: 11px; }
.card-screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 76px; height: 21px; margin-left: -38px; border-radius: 999px; background: #000; }

.card-cart { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.card-cart b { margin-left: auto; font-weight: 600; }
.card-thumb { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--card); color: var(--ink-2); }
.card-thumb svg { width: 20px; height: 20px; }

.card-deck { position: relative; margin-top: 12px; transform-style: preserve-3d; }
.card-c { --y: 0px; position: absolute; left: 0; right: 0; top: 0; height: 128px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 9px 9px 0 11px; border-radius: 13px; background: var(--c); color: var(--t, #fff); font: 500 12px/24px var(--mono); box-shadow: 0 -3px 10px -4px rgb(17 18 20 / .3); transform: translateY(var(--y)); animation: card-go 12s cubic-bezier(.2, .8, .2, 1) var(--d) infinite; }
.card-c::before { content: ""; position: absolute; left: 11px; top: 48px; width: 28px; height: 21px; border-radius: 5px; background: currentColor; opacity: .28; }
.card-c::after { content: ""; position: absolute; left: 11px; top: 84px; width: 58%; height: 7px; border-radius: 4px; background: currentColor; opacity: .14; }
.card-c--a { --c: #17181C; --d: -8.52s; }
.card-c--b { --c: #2747D6; --y: 42px; --d: -6.12s; }
.card-c--c { --c: #D9D5CA; --t: var(--ink); --y: 84px; --d: -3.72s; }
.card-c--d { --c: #343842; --y: 126px; --d: -1.32s; }
.card-c--e { --c: #5C74E0; --d: -10.92s; }
.card-c .chip { font: 500 12.5px/1.2 var(--font); animation: card-no 12s linear var(--d) infinite; }

/* one step is 20 %. A card rises in front, shakes once when refused, moves up one strip per step and leaves behind the cart.
   translateZ keeps the newest card in front without touching z-index. */
@keyframes card-go {
  0% { transform: translate3d(0, 330px, 5px); opacity: 1; }
  4%, 8.4% { transform: translate3d(0, 126px, 5px); }
  9% { transform: translate3d(-3px, 126px, 5px); }
  9.6% { transform: translate3d(3px, 126px, 5px); }
  10.2%, 20% { transform: translate3d(0, 126px, 5px); }
  24%, 40% { transform: translate3d(0, 84px, 4px); }
  44%, 60% { transform: translate3d(0, 42px, 3px); }
  64%, 80% { transform: translate3d(0, 0, 2px); }
  84% { transform: translate3d(0, -60px, 1px); opacity: 1; }
  85.5%, 100% { transform: translate3d(0, -60px, 1px); opacity: 0; }
}
@keyframes card-no { 0%, 8.4% { opacity: 0; transform: scale(.7); } 9.6% { opacity: 1; transform: scale(1.06); } 10.8%, 100% { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .art-card { height: 338px; padding: 16px 14px 0; }
  .card-bot { margin-top: 140px; }
}
@container (max-width: 300px) {
  .card-bot .tile { width: 46px; height: 46px; }
  .card-bot svg { width: 25px; height: 25px; }
}

/* ---------- fake: the impostor ---------- */
.art-fake { --w: max(200px, min(74cqw, 256px)); --a: 12s -3.4s infinite; position: relative; padding: 60px 28px 0; overflow: hidden; container-type: inline-size; }
.fake-rings { position: absolute; top: calc(60px - var(--w) * .2266); left: 50%; width: calc(var(--w) * 2.3594); max-width: none; margin-left: calc(var(--w) * -1.1797); }
.fake-rings path { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.fake-rings .fake-spark { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .07 2; animation: fake-spark 6s -3.4s infinite ease-in-out; }
/* Storebouncer's mark sits on the arch like a keystone: it is the one doing the check */
.fake-key { position: relative; z-index: 2; display: block; width: 44px; height: 44px; margin: -22px auto; border-radius: 24%; box-shadow: var(--lift); }
.fake-door { position: relative; width: var(--w); height: 292px; margin: 0 auto; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--paper); box-shadow: var(--lift); }
.fake-door::after { content: ""; position: absolute; inset: 0; border: 12px solid var(--accent); border-bottom: 0; border-radius: inherit; }
.fake-tint { position: absolute; inset: 0; opacity: .55; background: var(--bad-bg); animation: fake-tint-bad var(--a); }
.fake-tint--ok { background: var(--ok-bg); animation-name: fake-tint-ok; }
.fake-actor { position: absolute; top: 46px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; animation: fake-bad var(--a); }
.fake-actor--ok { animation-name: fake-ok; }
.fake-head { position: relative; width: 92px; height: 92px; }
.fake-actor--bad .fake-head { animation: fake-shake var(--a); }
.fake-head svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fake-bot { fill: var(--bot); animation: fake-true var(--a); }
.fake-good, .fake-mask { fill: #4285F4; }
.fake-mask { opacity: 0; animation: fake-mask var(--a); }
.fake-cord { display: block; width: 60px; height: 22px; margin-top: -2px; }
.fake-cord path { fill: none; stroke: rgb(17 18 20 / .28); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fake-badge { position: relative; width: 172px; height: 54px; perspective: 700px; transform-origin: 50% -22px; animation: fake-swing 6s -3.4s infinite; }
.fake-flip { position: relative; height: 100%; transform: rotateY(180deg); transform-style: preserve-3d; animation: fake-flip var(--a); }
.fake-side { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 8px; border-radius: 12px; background: var(--paper); box-shadow: var(--lift); font-size: 16px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; backface-visibility: hidden; }
.fake-side svg { flex: none; width: 19px; height: 19px; fill: #4285F4; }
.fake-side--back { transform: rotateY(180deg); background: var(--ink); color: #fff; font-size: 14px; letter-spacing: -.01em; }
.fake-side--back svg { width: 17px; height: 17px; }
.fake-chip { margin-top: 14px; padding: 6px 12px; font-size: 14px; animation: fake-chip-bad var(--a); }
.fake-actor--ok .fake-chip { animation-name: fake-chip-ok; }
.fake-beam { position: absolute; inset: 0 0 auto; height: 2px; opacity: 0; background: var(--accent); animation: fake-beam var(--a) linear; }
.fake-beam::before { content: ""; position: absolute; inset: auto 0 2px; height: 56px; opacity: .1; background: linear-gradient(transparent, var(--accent)); }

@keyframes fake-spark { 0%, 12% { stroke-dashoffset: -.2; opacity: 0; } 16%, 42% { opacity: 1; } 46%, 100% { stroke-dashoffset: -.74; opacity: 0; } }
@keyframes fake-bad {
  0% { opacity: 0; transform: translateX(-18%) rotate(-5deg); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
  9% { opacity: 1; transform: translateX(1%) rotate(.6deg); }
  12%, 44% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  49%, 100% { opacity: 0; transform: translate(-6%, 18px) rotate(-3deg); }
}
@keyframes fake-ok {
  0%, 49% { opacity: 0; transform: translateX(-18%) rotate(-5deg); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
  58% { opacity: 1; transform: translateX(1%) rotate(.6deg); }
  61%, 89% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  98%, 100% { opacity: 0; transform: translateY(-16px) scale(.62); }
}
@keyframes fake-shake { 21%, 27% { transform: none; } 22.5% { transform: translateX(-3px); } 24% { transform: translateX(3px); } 25.5% { transform: translateX(-2px); } }
@keyframes fake-swing { 0%, 18% { transform: rotate(7deg); } 27% { transform: rotate(-4deg); } 36% { transform: rotate(2deg); } 45%, 100% { transform: none; } }
@keyframes fake-flip { 0%, 20% { transform: none; } 26%, 100% { transform: rotateY(180deg); } }
@keyframes fake-mask { 0%, 20%, 100% { opacity: 1; } 22%, 99% { opacity: 0; } }
@keyframes fake-true { 0%, 21%, 100% { opacity: 0; } 22%, 99% { opacity: 1; } }
@keyframes fake-tint-bad { 0%, 20%, 49%, 100% { opacity: 0; } 24%, 44% { opacity: .55; } }
@keyframes fake-tint-ok { 0%, 71%, 98%, 100% { opacity: 0; } 75%, 90% { opacity: .55; } }
@keyframes fake-chip-bad { 0%, 25% { opacity: 0; transform: scale(.8); } 28%, 100% { opacity: 1; transform: none; } }
@keyframes fake-chip-ok { 0%, 75% { opacity: 0; transform: scale(.8); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes fake-beam {
  0%, 13%, 25.5%, 63%, 75.5%, 100% { opacity: 0; }
  14%, 64% { opacity: 1; transform: none; }
  25%, 75% { opacity: 1; transform: translateY(292px); }
  25.5%, 75.5% { transform: translateY(292px); }
}

/* static: fake on pink, real on green */
@media (prefers-reduced-motion: reduce) {
  .art-fake { padding-top: 24px; }
  .fake-rings, .fake-key { display: none; }
  .fake-door { width: min(100%, 346px); }
  .fake-tint--bad, .fake-actor--bad { right: 50%; padding-left: 6px; }
  .fake-tint--ok, .fake-actor--ok { left: 50%; padding-right: 6px; }
  .fake-actor { top: 72px; }
  .fake-head { width: 72px; height: 72px; }
  .fake-badge { width: min(140px, 88%); }
  .fake-side { padding: 0 6px; font-size: 14px; }
  .fake-side--back { font-size: 13px; }
  .fake-chip { padding: 4px 7px; font-size: 12px; }
}
@media (max-width: 640px) {
  .art-fake { padding: 40px 16px 0; }
  .fake-rings { top: calc(40px - var(--w) * .2266); -webkit-mask-image: linear-gradient(transparent 18px, #000 64px); mask-image: linear-gradient(transparent 18px, #000 64px); }
  .fake-door { height: 250px; }
  .fake-actor { top: 30px; }
  .art-card { height: 300px; }
}

/* ---------- servers: one big switch, the merchant's call ---------- */
.art-servers { padding: 28px 28px 28px; container-type: inline-size; }
.servers-stage { --u: calc(min(100cqw, 420px) / 346); --k: calc(-76 * var(--u)); --c: translate(calc(-86 * var(--u)), calc(-36 * var(--u))); display: flex; flex-direction: column; align-items: center; }
.servers-switch { position: relative; width: calc(200 * var(--u)); height: calc(116 * var(--u)); border-radius: calc(28 * var(--u)); }
.servers-track { position: relative; width: calc(160 * var(--u)); height: calc(84 * var(--u)); overflow: hidden; border-radius: 99px; background: var(--card-2); }
.servers-on { position: absolute; inset: 0; background: var(--accent); animation: servers-on 12s -5s infinite; }
.servers-knob { position: absolute; top: calc(6 * var(--u)); right: calc(6 * var(--u)); display: grid; place-items: center; width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgb(17 18 20 / .28); animation: servers-knob 12s -5s infinite; }
.servers-knob svg { width: 66%; height: 66%; }
.servers-cursor { position: absolute; left: 84%; top: 76%; width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: var(--ink); filter: drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .7px #fff); animation: servers-cursor 12s -5s infinite; }
.servers-wires { display: block; width: calc(346 * var(--u)); height: calc(84 * var(--u)); overflow: visible; }
.servers-wires path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; }
.servers-wires .servers-live { stroke: var(--accent); animation: servers-live 12s -5s infinite; }
.servers-wires .servers-dot { stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: .2 2; animation: servers-dot 12s -5s infinite; }
.servers-row { display: flex; justify-content: center; gap: calc(9 * var(--u)); width: 100%; }
.servers-t, .servers-hit i { display: grid; align-content: center; justify-items: center; gap: calc(3 * var(--u)); border-radius: calc(15 * var(--u)); }
.servers-t { position: relative; flex: none; width: calc(62 * var(--u)); height: calc(68 * var(--u)); color: var(--ink); }
.servers-t svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.servers-t b { font-size: max(11px, calc(11.5 * var(--u))); font-weight: 500; line-height: 1.2; }
.servers-hit { background: var(--bot); color: #fff; animation: servers-bump 12s -5s infinite; animation-delay: calc(var(--i) * .22s - 5s); }
.servers-hit i { position: absolute; inset: 0; color: var(--ink); font-style: normal; opacity: 0; animation: servers-calm 12s -5s infinite; animation-delay: calc(var(--i) * .22s - 5s); }
.servers-tag { position: relative; display: flex; justify-content: center; width: calc(204 * var(--u)); margin-top: calc(10 * var(--u)); animation: servers-chip 12s -5s infinite; }
.servers-tag::before { content: ""; position: absolute; inset: 0 0 50%; border: 1.5px solid rgb(217 45 32 / .45); border-top: 0; border-radius: 0 0 10px 10px; }
.servers-tag .chip { position: relative; padding: 6px 12px; font-size: 14px; }
.servers-more1, .servers-more2, .servers-more3 { display: none; }
@container (min-width: 600px) { .servers-more1 { display: grid; } }
@container (min-width: 800px) { .servers-more2 { display: grid; } }
@container (min-width: 980px) { .servers-more3 { display: grid; } }

@keyframes servers-on { 0%, 14% { opacity: 0; } 23%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes servers-knob {
  0%, 14% { transform: translateX(var(--k)); animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  23%, 86% { transform: none; animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  93%, 100% { transform: translateX(var(--k)); }
}
@keyframes servers-cursor {
  0%, 5% { transform: none; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  12% { transform: var(--c); }
  13.5% { transform: var(--c) scale(.82); }
  15% { transform: var(--c); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  24%, 76% { transform: none; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  84% { transform: var(--c); }
  85.5% { transform: var(--c) scale(.82); }
  87% { transform: var(--c); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  96%, 100% { transform: none; }
}
@keyframes servers-live { 0%, 24% { opacity: 0; } 31%, 86% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes servers-dot { 0%, 22% { stroke-dashoffset: .2; opacity: 0; } 23% { stroke-dashoffset: .2; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 31% { stroke-dashoffset: -1; opacity: 1; } 33%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes servers-calm { 0%, 30% { opacity: 1; } 33%, 86% { opacity: 0; } 91%, 100% { opacity: 1; } }
@keyframes servers-bump { 0%, 30% { transform: none; } 32% { transform: scale(1.08); } 35%, 100% { transform: none; } }
@keyframes servers-chip { 0%, 35% { opacity: 0; transform: scale(.9); } 38%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: scale(.9); } }

@media (max-width: 640px) { .art-servers { padding: 22px 16px; } }

/* ---------- the app in three windows: Home, Visitors and Protection, as they open in Shopify admin ---------- */
.bc--wide { min-height: 0; }
.art-admin { position: relative; padding: 20px 28px 0; }
.admin-tabs { display: inline-flex; gap: 2px; margin-bottom: 14px; padding: 3px; border-radius: 999px; background: var(--card-2); }
.admin-tabs button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 500 14px/1 var(--font); letter-spacing: -.01em; color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.admin-tabs [aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(17 18 20 / .14); }
@media (hover: hover) { .admin-tabs button:hover { color: var(--ink); } }
.admin-win { position: relative; height: 322px; overflow: hidden; border-radius: 14px 14px 0 0; background: #F1F1F1; box-shadow: 0 0 0 1px rgb(17 18 20 / .1), 0 30px 60px -30px rgb(15 26 110 / .55); }
/* one window at a time: the old one leaves at once and the new one rises in, so two are never seen through each other */
.admin-shot { position: absolute; inset: 0 0 auto; display: block; visibility: hidden; }
.admin-shot img { display: block; width: 100%; height: auto; }
.admin-shot.is-on { visibility: visible; animation: shot-in .26s cubic-bezier(.2, .7, .2, 1); }
@keyframes shot-in { from { opacity: 0; transform: translateY(8px); } }
.admin-cap { position: absolute; left: 50%; bottom: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgb(14 16 20 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; line-height: 1.3; color: #fff; white-space: nowrap; transform: translateX(-50%); }

@media (max-width: 640px) {
  .art-admin { margin-top: 14px; padding: 0 16px; }
  .admin-tabs { margin-bottom: 10px; }
  .admin-tabs button { min-height: 40px; }
  .admin-win { height: 320px; }
  .admin-cap { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .admin-shot { animation: none !important; } }

/* ---------- the card across the whole row: words on the left, the scene on the right ---------- */
.bc--full { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
.bc--full .bc-head { flex: 0 0 44%; padding: 48px 0 48px 44px; }
.bc--full h3 { font-size: 24px; }
.bc--full .bc-art { flex: 1; min-width: 0; margin-top: 0; }
@media (max-width: 820px) {
  .bc--full { flex-direction: column; align-items: stretch; }
  .bc--full .bc-head { flex: none; padding: 28px 28px 0; }
}
@media (max-width: 760px) { .bc--full .bc-head { padding: 22px 20px 0; } .bc--full h3 { font-size: 21px; } }

/* ---------- the clicks you pay for: two of the three bots become people, and the price of a real visit falls. An example ---------- */
.art-clicks { padding: 40px 28px; container-type: inline-size; }
.clicks-stage { --u: calc(min(100cqw, 470px) / 346); --loop: 12s; display: grid; gap: calc(15 * var(--u)); width: calc(346 * var(--u)); margin-inline: auto; }
.clicks-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: max(13px, calc(13.5 * var(--u))); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--ink-2); }
.clicks-top .chip { background: var(--card-2); color: var(--ink-2); }
.clicks-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(9 * var(--u)); }
.clicks-t { position: relative; aspect-ratio: 1; border-radius: calc(15 * var(--u)); color: var(--ink); }
.clicks-t svg { width: 42%; height: 42%; fill: currentColor; }
.clicks-bot { display: grid; place-items: center; background: var(--bot); color: #fff; }
.clicks-bot > svg { width: 52%; height: 52%; }
/* the tile a bot gives up: a person, laid over it. Without movement the picture is the end of the story */
.clicks-bot i { position: absolute; inset: -1px; display: grid; place-items: center; border-radius: inherit; background: var(--paper); box-shadow: var(--lift); color: var(--ink); }
.clicks-bot--a { animation: clicks-bump-a var(--loop) infinite both; } .clicks-bot--a i { animation: clicks-turn-a var(--loop) infinite both; }
.clicks-bot--b { animation: clicks-bump-b var(--loop) infinite both; } .clicks-bot--b i { animation: clicks-turn-b var(--loop) infinite both; }
.clicks-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(12 * var(--u)); font-size: max(13px, calc(13.5 * var(--u))); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.clicks-meter i { height: max(8px, calc(10 * var(--u))); overflow: hidden; border-radius: 99px; background: var(--card-2); }
.clicks-meter b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; transform: scaleX(.58); animation: clicks-price var(--loop) infinite both; }
@keyframes clicks-turn-a { 0%, 22% { opacity: 0; transform: scale(.6); } 26%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes clicks-turn-b { 0%, 46% { opacity: 0; transform: scale(.6); } 50%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes clicks-bump-a { 0%, 21% { transform: none; } 24% { transform: scale(1.1); } 28%, 100% { transform: none; } }
@keyframes clicks-bump-b { 0%, 45% { transform: none; } 48% { transform: scale(1.1); } 52%, 100% { transform: none; } }
@keyframes clicks-price { 0%, 23% { transform: scaleX(1); } 29%, 47% { transform: scaleX(.78); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 53%, 91% { transform: scaleX(.58); } 97%, 100% { transform: scaleX(1); } }
@media (max-width: 640px) { .art-clicks { padding: 26px 16px 28px; } }