/* 
 * BuildSupport Marquee - CSS
 * v1.1.0 - Seamless infinite loop
 */

/* Base variables */
.bsm {
  --bsm-color-default: #FFFFFF;
  --bsm-color-onwhite: #E68D55;
  --bsm-color-transition: 0.5s;
  --bsm-gap: 90px;
  --bsm-speed: 20s;
  --bsm-fade: 0px;
  --bsm-fade-color: rgba(0,0,0,.25);
}

.bsm { 
  position: relative; 
  overflow: hidden; 
  z-index: 1; 
}

.bsm--h { 
  width: 100%; 
  height: var(--bsm-height, 90px); 
}

.bsm--v { 
  height: 100vh; 
  width: var(--bsm-width, 90px); 
}

.bsm__inner {
  display: flex; 
  gap: var(--bsm-gap);
  will-change: transform;
  align-items: center;
}

.bsm--h .bsm__inner { 
  flex-direction: row; 
  height: 100%; 
  animation: bsmScrollX var(--bsm-speed) linear infinite; 
}

.bsm--v .bsm__inner { 
  flex-direction: column; 
  width: 100%; 
  animation: bsmScrollY var(--bsm-speed) linear infinite; 
}

.bsm--dir-normal .bsm__inner { 
  animation-direction: normal; 
}

.bsm--dir-reverse .bsm__inner { 
  animation-direction: reverse; 
}

/* Pause ved hover - bruger data-attribut */
.bsm[data-bsm*='"pause":"true"']:hover .bsm__inner { 
  animation-play-state: paused; 
}

.bsm__item {
  display: block; 
  flex: 0 0 auto;
  height: 100%;
  width: var(--bsm-item-w, auto);
}

/* Link reset - fjerner alle link-farver og styling */
a.bsm__item,
a.bsm__item:link,
a.bsm__item:visited,
a.bsm__item:hover,
a.bsm__item:active,
a.bsm__item:focus {
  color: inherit;
  text-decoration: none;
}

.bsm__img { 
  display: block; 
  height: 100%; 
  width: auto; 
  object-fit: contain; 
}

/* SVG wrapper: color via currentColor with transition */
.bsm__svg { 
  display: block; 
  height: 100%; 
}

.bsm__svg svg { 
  display: block; 
  height: 100%; 
  width: auto; 
}

.bsm__svg svg * { 
  fill: currentColor; 
}

.bsm { 
  color: var(--bsm-color-default); 
  transition: color var(--bsm-color-transition) ease;
}

.bsm.bsm--on-white { 
  color: var(--bsm-color-onwhite); 
}

/* Fades */
.bsm::before,
.bsm::after { 
  content: ""; 
  position: absolute; 
  pointer-events: none; 
  z-index: 2; 
}

.bsm__inner { 
  position: relative; 
  z-index: 1; 
}

.bsm--h::before,
.bsm--h::after { 
  top: 0; 
  bottom: 0; 
  width: var(--bsm-fade); 
}

.bsm--h::before { 
  left: 0; 
  background: linear-gradient(to right, var(--bsm-fade-color), rgba(0,0,0,0)); 
}

.bsm--h::after { 
  right: 0; 
  background: linear-gradient(to left, var(--bsm-fade-color), rgba(0,0,0,0)); 
}

.bsm--v::before,
.bsm--v::after { 
  left: 0; 
  right: 0; 
  height: var(--bsm-fade); 
}

.bsm--v::before { 
  top: 0; 
  background: linear-gradient(to bottom, var(--bsm-fade-color), rgba(0,0,0,0)); 
}

.bsm--v::after { 
  bottom: 0; 
  background: linear-gradient(to top, var(--bsm-fade-color), rgba(0,0,0,0)); 
}

/* 
 * Keyframes - bruger dynamisk scroll distance sat af JS
 * Scroller præcis én "original" bredde for seamless loop
 */
@keyframes bsmScrollX {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(var(--bsm-scroll-distance, 50%) * -1)); }
}

@keyframes bsmScrollY {
  0% { transform: translateY(calc(var(--bsm-scroll-distance, 50%) * -1)); }
  100% { transform: translateY(0); }
}

/* Hide on mobile */
@media (max-width: 768px) {
  .bsm.bsm--hide-mobile { 
    display: none; 
  }
}