/* ==========================================================================
   Scroll-scrub — bildsekvens på canvas, aldrig video.currentTime
   En H.264-fil måste spola från närmaste keyframe vid varje scroll-tick,
   och på 4K hackar det. En JPEG-sekvens ritad till canvas gör det inte.
   ========================================================================== */

.scrub {
  position: relative;
  /* Scrollsträckan är det som gör rörelsen mjuk — inte fler rutor. */
  height: 340vh;
}

.scrub__fast {
  position: sticky;
  top: 0;
  /* svh, inte vh: annars hamnar underkanten under mobilens adressfält */
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vh, 44px);
  padding-block: 20px;
  width: 100%;
  overflow: hidden;
}

/* Full bredd — kunden ville inte ha sekvenserna i en ruta.
   100vw och inte 100% : sektionen ligger inne i sidans omslag, och
   procent hade mätts mot omslagets bredd i stället för skärmens. */
.scrub__duk {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  aspect-ratio: 1672 / 940;
  background: var(--yta);
  border: 0;
}

/* --- texten som byts ut medan man scrollar --- */

.scrub__text {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-inline: var(--marg);
  pointer-events: none;
}
.scrub__steg {
  grid-area: 1 / 1;
  max-width: 34ch;
  opacity: 0;
  translate: 0 12px;
  transition: opacity .55s ease, translate .55s cubic-bezier(.14, 1, .34, 1);
}
.scrub__steg[data-på="1"] { opacity: 1; translate: 0; }
.scrub__steg p {
  margin: .5em 0 0;
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.45;
  color: var(--text);
  text-shadow: 0 2px 18px rgba(4, 9, 13, .85);
}
.scrub__steg .etikett { color: var(--guld); text-shadow: 0 2px 14px rgba(4, 9, 13, .9); }

/* --- laddningsindikator --- */

.scrub__laddar {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-svag);
  transition: opacity .4s ease;
}
.scrub[data-klar="1"] .scrub__laddar { opacity: 0; }

/* --- utan scroll-jack: visa slutrutan, ingen kapad sträcka --- */

.scrub[data-stilla="1"] { height: auto; }
.scrub[data-stilla="1"] .scrub__fast { position: static; height: auto; padding-block: var(--sektion); }
.scrub[data-stilla="1"] .scrub__duk { max-height: none; }
.scrub[data-stilla="1"] .scrub__steg { opacity: 1; translate: 0; }
.scrub[data-stilla="1"] .scrub__steg + .scrub__steg { display: none; }

/* --- mobil: i flödet, inte fastlåst (se scrub.js) --- */
@media (max-width: 759px) {
  .scrub { height: auto; }
  .scrub__fast { position: relative; height: auto; padding-block: 0; }
}