.owf-saw-shell {
  --owf-saw-duration: 38s;
  --owf-saw-scan-duration: 24s;
  --owf-saw-gap: 26px;
  --owf-saw-item-width: 160px;
  --owf-saw-logo-height: 120px;
  --owf-saw-logo-width: 200px;
  --owf-saw-padding-y: 10px;
  --owf-saw-edge-fade: 6%;
  --owf-saw-logo-opacity: .45;
  --owf-saw-hover-opacity: 1;
  --owf-saw-dim-opacity: .25;
  --owf-saw-logo-scale: .9;
  --owf-saw-hover-scale: 1.05;
  --owf-saw-glow: rgba(120, 180, 255, .25);
  --owf-saw-gradient-top: rgba(8, 18, 34, .55);
  --owf-saw-gradient-quarter: rgba(6, 12, 24, .32);
  --owf-saw-gradient-center: rgba(5, 10, 20, .20);
  --owf-saw-accent-left: rgba(70, 130, 255, .08);
  --owf-saw-accent-right: rgba(100, 170, 255, .06);
  --owf-saw-border-top: rgba(120, 180, 255, .18);
  --owf-saw-border-bottom: rgba(120, 180, 255, .12);
  --owf-saw-scan-color: #aadcff;
  --owf-saw-star-opacity: .22;
  --owf-saw-name-color: rgba(225, 236, 255, .78);
  --owf-saw-location-color: rgba(205, 220, 245, .48);
  --owf-saw-name-size: 12px;
  --owf-saw-location-size: 11px;
  position: relative;
  width: 100%;
}

.owf-saw-ribbon {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--owf-saw-padding-y) 0 max(0px, calc(var(--owf-saw-padding-y) - 2px));
  border-top: 1px solid var(--owf-saw-border-top);
  border-bottom: 1px solid var(--owf-saw-border-bottom);
  background:
    radial-gradient(circle at 20% 50%, var(--owf-saw-accent-left) 0%, transparent 34%),
    radial-gradient(circle at 80% 45%, var(--owf-saw-accent-right) 0%, transparent 30%),
    linear-gradient(
      to bottom,
      var(--owf-saw-gradient-top) 0%,
      var(--owf-saw-gradient-quarter) 25%,
      var(--owf-saw-gradient-center) 50%,
      var(--owf-saw-gradient-quarter) 75%,
      var(--owf-saw-gradient-top) 100%
    );
  box-shadow:
    inset 0 1px 18px rgba(120, 180, 255, .05),
    inset 0 -1px 18px rgba(100, 170, 255, .04),
    0 0 16px rgba(30, 80, 140, .08);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--owf-saw-edge-fade),
    black calc(100% - var(--owf-saw-edge-fade)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--owf-saw-edge-fade),
    black calc(100% - var(--owf-saw-edge-fade)),
    transparent 100%
  );
}

.owf-saw-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 35%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 70%, rgba(170,210,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 24%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 60%, rgba(170,210,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 30%, rgba(170,210,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 68%, rgba(255,255,255,.12) 0 1px, transparent 2px);
  opacity: 0;
}

.owf-saw-stars .owf-saw-ribbon::before {
  opacity: var(--owf-saw-star-opacity);
}

.owf-saw-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -38%;
  z-index: 4;
  width: 34%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--owf-saw-scan-color) 12%, transparent) 18%,
    color-mix(in srgb, var(--owf-saw-scan-color) 30%, transparent) 34%,
    color-mix(in srgb, var(--owf-saw-scan-color) 48%, transparent) 50%,
    color-mix(in srgb, var(--owf-saw-scan-color) 30%, transparent) 66%,
    color-mix(in srgb, var(--owf-saw-scan-color) 12%, transparent) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 18px color-mix(in srgb, var(--owf-saw-scan-color) 16%, transparent),
    0 0 28px color-mix(in srgb, var(--owf-saw-scan-color) 12%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: skewX(-18deg);
}

.owf-saw-scan .owf-saw-ribbon::after {
  opacity: 1;
  animation: owfSawScan var(--owf-saw-scan-duration) linear infinite;
}

.owf-saw-scan.owf-saw-scan-hover .owf-saw-ribbon::after {
  opacity: 0;
  transition: opacity .35s ease;
}

.owf-saw-scan.owf-saw-scan-hover .owf-saw-ribbon:hover::after {
  opacity: 1;
}

@keyframes owfSawScan {
  from { left: -38%; }
  to { left: 120%; }
}

.owf-saw-track {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  width: max-content;
  animation: owfSawScroll var(--owf-saw-duration) linear infinite;
  will-change: transform;
}

.owf-saw-set {
  display: flex;
  align-items: center;
  gap: var(--owf-saw-gap);
  padding-right: var(--owf-saw-gap);
}

.owf-saw-pause-hover .owf-saw-ribbon:hover .owf-saw-track {
  animation-play-state: paused;
}

.owf-saw-direction-right .owf-saw-track {
  animation-name: owfSawScrollRight;
}

@keyframes owfSawScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes owfSawScrollRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.owf-saw-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: var(--owf-saw-item-width);
  padding: 8px 8px 6px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: all .35s ease;
}

.owf-saw-item::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(120, 180, 255, .16);
  border-radius: 14px;
  background: linear-gradient(
    to bottom,
    rgba(120, 180, 255, .05),
    rgba(120, 180, 255, .015) 45%,
    rgba(100, 170, 255, .03)
  );
  opacity: 0;
  transition: opacity .35s ease;
}

.owf-saw-item::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  background:
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) top left / 14px 1px no-repeat,
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) top left / 1px 14px no-repeat,
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) top right / 14px 1px no-repeat,
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) top right / 1px 14px no-repeat,
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) bottom left / 14px 1px no-repeat,
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) bottom left / 1px 14px no-repeat,
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) bottom right / 14px 1px no-repeat,
    linear-gradient(rgba(130,190,255,.28), rgba(130,190,255,.28)) bottom right / 1px 14px no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
}

.owf-saw-item:hover,
.owf-saw-item:focus-visible {
  background: radial-gradient(circle, rgba(120, 180, 255, .08), transparent 70%);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--owf-saw-glow) 40%, transparent),
    inset 0 0 12px rgba(100, 170, 255, .03);
  outline: none;
}

.owf-saw-item:hover::before,
.owf-saw-item:hover::after,
.owf-saw-item:focus-visible::before,
.owf-saw-item:focus-visible::after {
  opacity: 1;
}

.owf-saw-item img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: var(--owf-saw-logo-width);
  max-height: var(--owf-saw-logo-height);
  object-fit: contain;
  opacity: var(--owf-saw-logo-opacity);
  transform: scale(var(--owf-saw-logo-scale));
  transition: all .35s ease;
}

.owf-saw-grayscale .owf-saw-item img {
  filter: grayscale(100%);
}

.owf-saw-item:hover img,
.owf-saw-item:focus-visible img {
  opacity: var(--owf-saw-hover-opacity);
  transform: scale(var(--owf-saw-hover-scale));
}

.owf-saw-color-hover .owf-saw-item:hover img,
.owf-saw-color-hover .owf-saw-item:focus-visible img {
  filter:
    grayscale(0%)
    drop-shadow(0 0 8px rgba(255,255,255,.25))
    drop-shadow(0 0 12px var(--owf-saw-glow));
}

.owf-saw-dim-others .owf-saw-track:hover .owf-saw-item:not(:hover) img {
  opacity: var(--owf-saw-dim-opacity);
}

.owf-saw-name,
.owf-saw-location {
  position: relative;
  z-index: 1;
}

.owf-saw-name {
  margin-top: 6px;
  color: var(--owf-saw-name-color);
  font-size: var(--owf-saw-name-size);
  font-weight: 600;
}

.owf-saw-location {
  color: var(--owf-saw-location-color);
  font-size: var(--owf-saw-location-size);
}

.owf-saw-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(120, 180, 255, .35);
  color: inherit;
  text-align: center;
}

@media (max-width: 767px) {
  .owf-saw-shell {
    --owf-saw-duration: 28s;
    --owf-saw-gap: 16px;
    --owf-saw-item-width: 118px;
    --owf-saw-logo-height: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .owf-saw-track,
  .owf-saw-ribbon::after {
    animation-play-state: paused !important;
  }
}