/* The Hong Kong Film Gala's band (gala-logos.js). Its heading's link: a small ↗ just after the name,
   as a footnote mark, in the heading's own ink and size, its hit area a ::after wider than it's
   drawn (about 44px to a finger); the credit a small, quiet line under the name */
.gala-link {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  margin-left: -5px; width: 1em; height: 1em; color: var(--ink-soft); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: color .15s, transform .15s var(--ease);
}
.gala-link::after { content: ""; position: absolute; inset: -12px; }
.gala-link svg { display: block; width: 0.72em; height: 0.72em; translate: 0 -0.06em; }
.gala-link:active { transform: scale(0.88); }
.gala-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) { .gala-link:hover { color: var(--accent); } }
.gala-head { flex-wrap: wrap; row-gap: 1px; }
.gala-credit { display: block; flex: 0 0 100%; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.35; color: var(--ink-faint); }
.gala-credit > span { white-space: nowrap; }
html.page-scroll .gala-credit { font-size: 0.7rem; }
/* a phone's band heading is a line 34px tall, its name in the middle (cards.css's .band-head, its
   min-height): the Gala's name, the credit under it, in the same line's middle, so it's as far from
   the band above as any heading */
html.page-scroll .grid-view .gala-head > span:first-child { display: flex; align-items: center; min-height: 34px; }

/* Its partner logos: a small strip under its band's films,
   scrolling slowly, a wide fade at each end. Each logo's own shape as a mask, filled with one bone colour */
.gala-logos {
  --gl-ink: #e6e0d2; /* (bone: warm, a little under the page's white ink) */
  --gl-h: 28px; /* (a squarish mark's height; each its own: --k) */
  --gl-gap: 30px;
  --gl-speed: 16; /* (px a second) */
  --gl-fade: 18%;
  --gl-alpha: .66;
  grid-column: 1 / -1; min-width: 0;
  display: flex; align-items: center;
  margin: 4px -20px 0; padding: 10px 0 4px; /* (its logos' foot as far from the band below as a row of films') */
  overflow: hidden; contain: paint;
}
.gl-view {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gl-fade), #000 calc(100% - var(--gl-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gl-fade), #000 calc(100% - var(--gl-fade)), transparent);
}
.gl-track {
  display: flex; width: max-content; align-items: center;
  animation: gl-roll var(--gl-dur, 40s) linear infinite;
  will-change: transform;
}
@keyframes gl-roll { to { transform: translate3d(-50%, 0, 0); } }
.gl-set { display: flex; flex: none; align-items: center; gap: var(--gl-gap); padding-right: var(--gl-gap); }
.gl-logo {
  display: block; flex: none;
  height: calc(var(--gl-h) * var(--k)); aspect-ratio: var(--r);
  background: var(--gl-ink); opacity: var(--gl-alpha);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) { .gala-logos:hover .gl-track { animation-play-state: paused; } }

/* wider than a phone: the band's films across the grid, the strip under them, the grid's own edges */
.grid-view.banded-wide .gala-logos { margin: 6px 0 0; padding-bottom: 0; } /* (its logos' foot where a row of films' would be: the band below as far as from any) */
@media (min-width: 1066px) { .gala-logos { --gl-h: 30px; } }

/* less motion: still, one set, centred (wrapped, if need be: 4 over 3 on a phone) */
@media (prefers-reduced-motion: reduce) {
  .gl-track { animation: none; width: 100%; justify-content: center; }
  .gl-set[aria-hidden] { display: none; }
  .gl-set { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 14px; padding: 0 20px; }
  .gl-view { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .gl-set { max-width: 340px; margin-inline: auto; } }