/* OVIO Space: the OVIO Brands element ([ovio_brands]). Columns (--br-n) of glass logo tiles drifting slowly, every other column the other
   way and each at its own pace (--br-t), fading in at one edge and out at the other; each list is there twice, so a drift of half its
   length loops without a seam. Pointing at a column holds it and lights the tile under the pointer. The tiles are the site's glass (still:
   gx-static, so the Glass UI adds no moving lights to a crowd of moving tiles). Heights: --br-h (desktop), --br-hm (phones), --br-tile. */
.ovio-br { --br-gap: 18px; position: relative; color: #fff; }
.ovio-br-light { color: #0e1222; }
.ovio-br-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px; margin: 0 0 28px; }
.ovio-br-head-stack { flex-direction: column; align-items: flex-start; }
.ovio-br-head-center { flex-direction: column; align-items: center; text-align: center; }
.ovio-br-name { display: flex; flex-direction: column; gap: 12px; }
.ovio-br-head-center .ovio-br-name { align-items: center; }
.ovio-br-eyebrow { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .72; }
.ovio-br-title { margin: 0; font-size: clamp(30px, 3.2vw, 46px); font-weight: 300; line-height: 1.1; color: inherit; }
.ovio-br-tag { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.7; opacity: .8; }

.ovio-br-cols { display: grid; grid-template-columns: repeat(var(--br-n, 2), minmax(0, 1fr)); gap: var(--br-gap); height: var(--br-h, 560px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.ovio-br-col { min-width: 0; }
/* (off screen, the browser skips drawing the columns and their drift altogether) */
.ovio-br-cols { content-visibility: auto; contain-intrinsic-size: auto var(--br-h, 560px); }
.ovio-br .ovio-br-track { display: flex; flex-direction: column; gap: var(--br-gap); margin: 0; padding: 0; list-style: none; animation: ovio-br-drift var(--br-t, 40s) linear infinite; will-change: translate; }
.ovio-br-col:nth-child(even) .ovio-br-track { animation-direction: reverse; }
.ovio-br-col:hover .ovio-br-track { animation-play-state: paused; }
@keyframes ovio-br-drift { to { translate: 0 calc(-50% - var(--br-gap) / 2); } }

/* a tile: the site's glass box, without its usual padding, the logo in the middle */
.ovio-br .ovio-br-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 100%; height: var(--br-tile, 124px); margin: 0 !important; padding: 0 12px !important;
  box-sizing: border-box; border-radius: 22px; transition: box-shadow .4s ease, background .4s ease; }
.ovio-br .ovio-br-tile::before { content: none; }
.ovio-br .ovio-br-tile:hover { box-shadow: inset 0 0 0 1px rgba(150, 190, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 40px -10px rgba(150, 190, 255, .8); }
.ovio-br-light .ovio-br-tile:hover { box-shadow: inset 0 0 0 1px rgba(60, 100, 230, .55), inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 40px -12px rgba(60, 100, 230, .6); }
.ovio-br-tile img { display: block; width: auto; max-width: 74%; object-fit: contain; filter: brightness(0) invert(1); opacity: .88; transition: opacity .4s ease; }
.ovio-br-light .ovio-br-tile img { filter: brightness(0); opacity: .78; }
.ovio-br-original .ovio-br-tile img { filter: none; opacity: 1; }
.ovio-br-tile:hover img { opacity: 1; }

@media (max-width: 767px) {
  .ovio-br { --br-gap: 12px; }
  .ovio-br-head { flex-direction: column; align-items: flex-start; margin-bottom: 22px; }
  .ovio-br-head-center { align-items: center; }
  .ovio-br-cols { height: var(--br-hm, 440px); }
  .ovio-br .ovio-br-tile { height: calc(var(--br-tile, 124px) * .78); border-radius: 18px; padding: 0 8px !important; }
  .ovio-br-tile img { scale: .78; max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) { .ovio-br .ovio-br-track { animation: none; } }