/* Arrow ticker band: a solid colour band of uppercase display words, each led by a small arrow mark
   (a >>> chevron cluster, a line, a solid arrowhead), drifting left forever at a constant px/s.
   Measured from Pillars Brewery's ticker bands (theme.css .ticker-wrap / .ticker / .ticker__item).
   Motion lives in part.js (speed in px/s, duration computed from the set's width); this file is the look. */

.atb {
  --atb-bg: #ec6d26;               /* band colour (source: orange #ec6d26 or black) */
  --atb-ink: #fceee0;              /* words + mark (source: cream #fceee0) */
  --atb-mark-ink: currentColor;    /* mark colour, defaults to the words' */
  --atb-font: "Young Serif", Georgia, "Times New Roman", serif;   /* source: a display serif */
  --atb-size: 18px;                /* type size (source 18px) */
  --atb-size-sm: 14px;             /* <= 640px (source 14px) */
  --atb-leading: 1.25;             /* 22.5px line at 18px: band 41.5px tall */
  --atb-pad: 11px 7.5px 8px;       /* item padding (source) */
  --atb-mark-w: 50px;              /* mark box (source 50 x 21) */
  --atb-mark-h: 21px;
  --atb-mark-gap: 8px;             /* mark to word (source: span padding-left 8px) */
  --atb-step-dur: 300ms;           /* pinned band stepping aside for a menu / modal */
  --atb-step-ease: cubic-bezier(.3, .7, .4, 1);
  --atb-z: 50;                     /* pinned band stacking (source 10000) */

  display: block;
  position: relative;
  overflow: hidden;
  background: var(--atb-bg);
  color: var(--atb-ink);
  font-family: var(--atb-font);
  font-size: var(--atb-size);
  line-height: var(--atb-leading);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 640px) { .atb { font-size: var(--atb-size-sm); } }

/* a whole-band link or button: no UA button chrome, text stays put */
button.atb { appearance: none; border: 0; margin: 0; padding: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; font-family: var(--atb-font); font-size: var(--atb-size); line-height: var(--atb-leading); }
@media (max-width: 640px) { button.atb { font-size: var(--atb-size-sm); } }
a.atb:focus-visible, button.atb:focus-visible { outline: 2px solid var(--atb-ink); outline-offset: -4px; }

.atb__track { display: flex; width: max-content; will-change: transform; }
.atb__set { display: flex; flex: none; }

.atb__item { display: inline-flex; align-items: center; flex: none; padding: var(--atb-pad); }
.atb__mark { flex: none; width: var(--atb-mark-w); height: var(--atb-mark-h); color: var(--atb-mark-ink); }
.atb__mark + .atb__word, .atb__mark + * { padding-left: var(--atb-mark-gap); }

/* pin="bottom": fixed to the bottom of the window, the whole band one link/button.
   Steps down out of view while a menu or a modal is open (shared html signals). */
.atb[data-atb-pin="bottom"] {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--atb-z);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform var(--atb-step-dur) var(--atb-step-ease), visibility 0s linear 0s;
}
html.is-menu-open .atb[data-atb-pin="bottom"],
html.is-modal-open .atb[data-atb-pin="bottom"] {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--atb-step-dur) var(--atb-step-ease), visibility 0s linear var(--atb-step-dur);
}

/* reduced motion: the band stands still, first set from the left edge */
@media (prefers-reduced-motion: reduce) {
  .atb__track { transform: none !important; will-change: auto; }
  .atb[data-atb-pin="bottom"] { transition: none; }
}