/* ==========================================================================
   Animated ballot box (layouts/ballot-box.php): a folded ballot paper drops into
   the slot of box.png every 5.6 s and the box gives a little thump as it lands.
   The wrapper (.bx) is sized/floated by the page (.lg-box, .brand-box). The drop
   zone is clipped so the paper vanishes exactly at the slot line of the artwork
   (slot centre ≈ 46% across, 46.5% down). Classes prefixed `bx-`. 2026-09-09.
   ========================================================================== */
.bx { position: relative; display: block; }
.bx-img { display: block; width: 100%; height: auto; animation: bx-thump 5.6s ease-in-out infinite; }
.bx-zone {
  position: absolute; left: 26%; width: 40%; top: -34%; height: 80.5%; /* bottom edge = the slot line */
  overflow: hidden; pointer-events: none; z-index: 2;
}
.bx-paper {
  position: absolute; left: 50%; top: 0; width: 68%; height: auto;
  opacity: 0; transform-origin: 50% 50%;
  animation: bx-drop 5.6s cubic-bezier(.45, 0, .7, .4) infinite;
}
/* fall and tumble → settle upright just above the slot → slide in edge-on → pause */
@keyframes bx-drop {
  0%        { top: -4%;  opacity: 0; transform: translateX(-50%) rotate(-16deg) scale(.9); }
  7%        { opacity: 1; }
  46%       { top: 46%;  transform: translateX(-50%) rotate(9deg) scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  60%       { top: 58%;  transform: translateX(-50%) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  74%       { top: 102%; opacity: 1; transform: translateX(-50%) rotate(0deg) scaleX(.82); }
  75%, 100% { top: 102%; opacity: 0; transform: translateX(-50%) rotate(0deg) scaleX(.82); }
}
@keyframes bx-thump {
  0%, 72%, 88%, 100% { transform: translateY(0) scaleY(1); }
  77%                { transform: translateY(4px) scaleY(.985); }
  82%                { transform: translateY(-2px) scaleY(1.005); }
}
@media (prefers-reduced-motion: reduce) {
  .bx-paper, .bx-img { animation: none !important; }
  .bx-paper { opacity: 0; }
}