/* Home "Tasda Agora" (inc-home-agora.php): a row of pixel-art market stalls at the bottom of the home page,
   animated like a tiny computer game. The sprite frame swaps (bob, blink, wave, pennant) are only a few
   pixels and stay on for reduced motion; the bubble's pop and the hover lift are switched off there. */
.home-agora-head { align-items: flex-end; }
.home-agora-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home-agora-columns { width: 40px; height: 29px; flex: none; }
.home-agora-title p { margin: 2px 0 0; color: var(--text-muted, #aebcf0); font-size: 13px; }
.home-agora-street { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; padding: 4px 2px 10px; }
.agora-stall { position: relative; display: block; border: 1px solid var(--border-color, rgba(191,210,255,.14)); border-radius: 8px; background: linear-gradient(180deg, #0f1a30 0%, #121d33 70%); overflow: hidden; text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.agora-stall:hover, .agora-stall:focus-visible { transform: translateY(-2px); border-color: var(--accent, #52e5a5); }
.agora-stall:focus-visible { outline: 2px solid var(--accent, #52e5a5); outline-offset: 2px; }
.agora-stall-art { display: block; width: 100%; height: auto; }
.agora-sign { fill: #fff; font: 800 5.2px/1 Inter, system-ui, sans-serif; letter-spacing: .25px; }
.agora-stall:hover .agora-sign { fill: #fff6c8; }

/* Speech bubble: js/home-agora.js moves it a little (--bx/--by), types the next line and pops it in. */
.agora-bubble { position: absolute; top: var(--by, 24%); left: var(--bx, 43%); right: 4%; width: fit-content; max-width: calc(96% - var(--bx, 43%)); padding: 4px 7px; border: 2px solid #1a1430; border-radius: 8px; background: #fffdf5; color: #1a1430; font-size: 11px; font-weight: 800; line-height: 1.2; text-wrap: balance; box-shadow: 2px 2px 0 #1a1430; transform-origin: 0 100%; pointer-events: none; }
.agora-bubble::after { content: ''; position: absolute; left: -7px; bottom: 6px; width: 8px; height: 8px; border-left: 2px solid #1a1430; border-bottom: 2px solid #1a1430; background: #fffdf5; transform: skewY(-35deg); }
.agora-bubble.is-out { visibility: hidden; }
.agora-bubble.is-pop { animation: agora-pop .3s steps(3, end); }
@keyframes agora-pop { 0% { transform: scale(.45); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* Sprite frames: vendors bob and blink, wave now and then with two hand positions; pennants flap.
   Each stall runs on its own clock (--agora-delay, and different wave lengths) so they never move together. */
.agora-vendor { animation: agora-bob 1.6s steps(1, end) infinite; animation-delay: var(--agora-delay, 0s); }
.agora-blink { opacity: 0; animation: agora-blink 3.7s steps(1, end) infinite; animation-delay: var(--agora-delay, 0s); }
.agora-arm-down { animation: agora-arm-down 5s steps(1, end) infinite; animation-delay: var(--agora-delay, 0s); }
.agora-arm-up { opacity: 0; animation: agora-arm-up 5s steps(1, end) infinite; animation-delay: var(--agora-delay, 0s); }
.agora-stall:nth-child(2n) :is(.agora-arm-down, .agora-arm-up) { animation-duration: 6.4s; }
.agora-stall:nth-child(3n) :is(.agora-arm-down, .agora-arm-up) { animation-duration: 4.3s; }
.agora-hand-b { opacity: 0; }
.agora-hand-a, .agora-hand-b { animation: agora-flip .56s steps(1, end) infinite; }
.agora-hand-b { animation-direction: reverse; }
.agora-flag-b { opacity: 0; }
.agora-flag-a, .agora-flag-b { animation: agora-flip 1.2s steps(1, end) infinite; animation-delay: var(--agora-delay, 0s); }
.agora-flag-b { animation-direction: reverse; }
@keyframes agora-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes agora-blink { 0%, 94% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes agora-arm-down { 0%, 54% { opacity: 1; } 55%, 89% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes agora-arm-up { 0%, 54% { opacity: 0; } 55%, 89% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes agora-flip { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (max-width: 640px) {
  .home-agora-street { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .agora-stall { flex: 0 0 236px; }
}

@media (prefers-reduced-motion: reduce) {
  .agora-stall { transition: none; }
  .agora-stall:hover, .agora-stall:focus-visible { transform: none; }
  .agora-bubble.is-pop { animation: none; }
}