/* ============================================================
   beredskaQet — CS2-billedticker (marquee, hoejre -> venstre)
   v4: track er position:absolute, animation roerer KUN transform,
   GPU-lag paa baade container og track. Ingen JS flytter noget.
   ============================================================ */

.bq-ticker{
  --bqt-h: clamp(64px, 8vw, 96px);
  --bqt-gap: 12px;
  position:relative;
  z-index:1;
  background:var(--bg-secondary,#12151c);
  border-top:1px solid var(--border,#222733);
  border-bottom:1px solid var(--border,#222733);
  padding:10px 0;
  overflow:hidden;
  isolation:isolate;
  contain:layout paint style;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.bq-ticker[hidden]{display:none}

/* viewport har fast hoejde, saa intet i flowet aendrer sig under animationen */
.bq-ticker__viewport{
  position:relative;
  height:var(--bqt-h);
  overflow:hidden;
}

/* track ligger UDE AF FLOWET: ingen reflow, kun compositing */
.bq-ticker__track{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  width:max-content;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  animation-name:bq-ticker-scroll;
  animation-duration:130s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-play-state:running;
}

.bq-ticker__group{
  display:flex;
  gap:var(--bqt-gap);
  padding-right:var(--bqt-gap);
  flex:0 0 auto;
}

.bq-ticker__group img{
  display:block;
  height:var(--bqt-h);
  width:auto;
  aspect-ratio:533 / 300;
  object-fit:cover;
  border-radius:var(--radius-md,12px);
  background:var(--bg-primary,#0a0c10);
  flex:0 0 auto;
}

/* animationen roerer UDELUKKENDE transform */
@keyframes bq-ticker-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* blode kanter som statiske lag (ingen mask-image, ingen filter) */
.bq-ticker::before,
.bq-ticker::after{
  content:"";
  position:absolute; top:0; bottom:0; width:64px; z-index:2;
  pointer-events:none;
}
.bq-ticker::before{left:0; background:linear-gradient(90deg,var(--bg-secondary,#12151c) 0%,rgba(18,21,28,0) 100%)}
.bq-ticker::after{right:0; background:linear-gradient(270deg,var(--bg-secondary,#12151c) 0%,rgba(18,21,28,0) 100%)}

.bq-ticker:hover .bq-ticker__track,
.bq-ticker:focus-within .bq-ticker__track{
  animation-play-state:paused;
}

@media (prefers-reduced-motion:reduce){
  .bq-ticker__track{animation:none; transform:translate3d(0,0,0)}
  .bq-ticker__viewport{overflow-x:auto}
}

@media (max-width:640px){
  .bq-ticker{--bqt-h:56px; --bqt-gap:8px; padding:8px 0}
  .bq-ticker::before,.bq-ticker::after{width:32px}
}