/* Fixed grid cells keep the marquee halves equal in Safari as well as Chromium. */
.brand-strip { --brand-cell:144px; --brand-gap:32px; --brand-height:56px; position:relative; display:flex; align-items:center; min-height:76px; margin-block:8px 20px; background:transparent; }
.brand-window { flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; direction:ltr; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.brand-window::-webkit-scrollbar { display:none; }
.brand-track { display:flex; align-items:center; width:max-content; direction:ltr; }
.brand-strip .brand-group { display:grid; grid-auto-flow:column; grid-auto-columns:var(--brand-cell); align-items:center; justify-content:space-around; flex:none; gap:var(--brand-gap); width:max-content; margin:0; padding:12px var(--brand-gap) 12px 0; list-style:none; }
.brand-strip .brand-group[hidden] { display:none; }
.brand-item { display:flex; align-items:center; justify-content:center; width:var(--brand-cell); min-width:var(--brand-cell); height:var(--brand-height); }
.brand-art { position:relative; display:block; flex:none; width:var(--brand-width); max-width:100%; height:var(--brand-height); }
.brand-art img { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; filter:brightness(0); opacity:.8; }
.brand-item[data-brand="faber-castell"] { --brand-width:120px; --brand-mask:url("assets/brands-v12/faber-castell.svg"); }
.brand-item[data-brand="staedtler"] { --brand-width:56px; --brand-mask:url("assets/brands-v19/staedtler.svg"); }
.brand-item[data-brand="stabilo"] { --brand-width:128px; --brand-mask:url("assets/brands-v19/stabilo.svg"); }
.brand-item[data-brand="pilot"] { --brand-width:104px; --brand-mask:url("assets/brands-v12/pilot.svg"); }
.brand-item[data-brand="pentel"] { --brand-width:94px; --brand-mask:url("assets/brands-v12/pentel.png"); }
.brand-item[data-brand="uni"] { --brand-width:78px; --brand-mask:url("assets/brands-v12/uni.svg"); }
/* The reflection is masked to the artwork, with no rectangular overlay. */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
  .brand-art::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(112deg,transparent 42%,rgb(255 255 255 / .38) 47%,rgb(255 255 255 / .9) 50%,rgb(255 255 255 / .38) 53%,transparent 58%) 100% 0 / 300% 100% no-repeat; -webkit-mask:var(--brand-mask) center / contain no-repeat; mask:var(--brand-mask) center / contain no-repeat; animation:labkhand-brand-sheen 9s ease-in-out infinite; animation-play-state:paused; }
  .brand-item:nth-child(2) .brand-art::after { animation-delay:.35s; }
  .brand-item:nth-child(3) .brand-art::after { animation-delay:.7s; }
  .brand-item:nth-child(4) .brand-art::after { animation-delay:1.05s; }
  .brand-item:nth-child(5) .brand-art::after { animation-delay:1.4s; }
  .brand-item:nth-child(6) .brand-art::after { animation-delay:1.75s; }
  .brand-strip[data-running="true"] .brand-art::after { animation-play-state:running; }
}
.brand-strip[data-enhanced="true"] .brand-window { overflow-x:hidden; }
.brand-strip[data-enhanced="true"] .brand-track { animation:labkhand-brands-flow var(--brand-duration,36s) linear infinite; animation-play-state:paused; }
.brand-strip[data-running="true"] .brand-track { animation-play-state:running; }
.brand-window:focus-visible { outline:2px solid var(--primary,#218358); outline-offset:4px; border-radius:4px; }
@keyframes labkhand-brands-flow { to { transform:translateX(-50%); } }
@keyframes labkhand-brand-sheen { 0%,72% { background-position:100% 0; opacity:0; } 77% { opacity:.85; } 91% { opacity:.85; } 96%,100% { background-position:0 0; opacity:0; } }
@media (max-width:700px) {
  .brand-strip { --brand-cell:112px; --brand-gap:24px; --brand-height:46px; min-height:66px; margin-block:6px 16px; }
  .brand-strip .brand-group { padding-block:10px; }
  .brand-item[data-brand="faber-castell"] { --brand-width:98px; }
  .brand-item[data-brand="staedtler"] { --brand-width:46px; }
  .brand-item[data-brand="stabilo"] { --brand-width:104px; }
  .brand-item[data-brand="pilot"] { --brand-width:85px; }
  .brand-item[data-brand="pentel"] { --brand-width:78px; }
  .brand-item[data-brand="uni"] { --brand-width:72px; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-strip[data-enhanced="true"] .brand-track { animation:none; transform:none; }
  .brand-strip .brand-art::after { animation:none; opacity:0; }
  .brand-strip[data-enhanced="true"] .brand-window { overflow-x:auto; }
  .brand-strip .brand-group[data-brand-copy] { display:none; }
}