/* Base variables */
.bsm{
  --bsm-color-default:#FFFFFF;
  --bsm-color-onwhite:#E68D55;
  --bsm-color-transition:0.5s;
  --bsm-gap:90px;
  --bsm-speed:55s;
  --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; }

.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 bsmScrollX{
  0%{ transform:translateX(0) }
  100%{ transform:translateX(-50%) }
}
@keyframes bsmScrollY{
  0%{ transform:translateY(-50%) }
  100%{ transform:translateY(0) }
}

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