/**
 * scrub-hero.css — Scroll-scrubbad videohero
 *
 * Struktur (Bricks):
 *   section.cco-scrub-hero
 *     div.cco-scrub-hero__stage          klistrar mot toppen medan sektionen scrollas förbi
 *       div.cco-scrub-hero__video        täcker scenen, spolas av scroll i scrub-hero.js
 *       div.cco-scrub-hero__content      h1, ingress, knapp — tonar in ett block i taget
 *
 * Riktning efter färgschema (styrs i scrub-hero.js):
 *   ljust:  natt → dag, texten landar på dagbilden med mörk text, utan ton
 *   mörkt:  dag → natt, texten landar på natten med vit text och mörk ton
 *       span.cco-scrub-hero__cue         "Scrolla", tonar ut i början
 *
 * Utan JS, i buildern och vid prefers-reduced-motion är sektionen en vanlig
 * helskärmsyta med slutrutan som affisch och texten fullt synlig. Först när
 * scrub-hero.js lägger på .is-scrub blir den hög nog att scrolla igenom,
 * och innehållet börjar dolt.
 *
 * Reglage (sätts på sektionen i Bricks):
 *   --scrub-length   hur långt man scrollar medan videon spelar
 *   --fade-start     andel av scrubben där första textblocket börjar tona in
 *   --fade-end       andel där sista blocket ska vara helt synligt
 *   --item-span      hur stor andel av scrubben ett enskilt block tonar över
 *   --content-bottom avstånd från scenens underkant till textblocket
 *
 * Staggern är automatisk: scrub-hero.js numrerar varje synligt direkt barn i
 * .cco-scrub-hero__content (--i) och räknar ut --fade-step och --fade-span
 * så att blocken fördelas jämnt mellan --fade-start och --fade-end. Lägg
 * knappar i ett eget block — [class*=btn--] har transition: all .3s i
 * style.css, och en naken knapp skulle släpa efter scrollen.
 */

.cco-scrub-hero {
  --scrub:        0;
  --scrub-length: 200svh;
  --fade-start:   0.45;
  --fade-end:     0.8;
  --item-span:    0.15;
  /* Räknas ut av scrub-hero.js; värdena här gäller bara om skriptet inte kör. */
  --fade-step:    0.1;
  --fade-span:    0.35;
  --reveal:       1;
  /* Ingen tonplatta i ljust schema — bilden ska stå orörd (beslut 2026-09-11,
     även på bekostnad av läsbarheten). Mörkt schema sätter egen styrka nedan. */
  --scrim-max:    0;
  --content-bottom: var(--space-xxl);
  position: relative;
  height:   100vh;
  height:   100svh;
  padding:  0;
}

.cco-scrub-hero.is-scrub {
  --reveal: clamp(0, calc((var(--scrub) - var(--fade-start)) / var(--fade-span)), 1);
  height: calc(100vh + var(--scrub-length));
  height: calc(100svh + var(--scrub-length));
}

.cco-scrub-hero__stage {
  position:    sticky;
  top:         0;
  display:     grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: end center;
  width:       100%;
  height:      100vh;
  height:      100svh;
  overflow:    hidden;
}

/* Bricks video-element sätter 16:9 på wrappern — scenen bestämmer formatet här. */
.cco-scrub-hero__video {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  aspect-ratio: auto;
  margin:       0;
}

.cco-scrub-hero__video video {
  display:        block;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  pointer-events: none;
}

/* Jämn ton bakom texten, tonar in med den. Används bara i mörkt schema, där
   var(--white) är svart: mörk ton under vit text. I ljust är --scrim-max 0. */
.cco-scrub-hero__stage::after {
  content:          "";
  position:         absolute;
  inset:            0;
  background-color: var(--white);
  opacity:          calc(var(--reveal) * var(--scrim-max));
  pointer-events:   none;
}

/* ── Innehåll ───────────────────────────────────────────────────────────
   Ljust schema: textens egna färger (mörka) över dagbilden.
   Mörkt schema: vit text över natten. Typografin ärvs som vanligt. */
.cco-scrub-hero__content {
  position: relative;
  z-index:  2;
  padding-inline: var(--space-m);
  padding-bottom: var(--content-bottom);
}

.color-scheme--alt .cco-scrub-hero {
  --scrim-max: 0.4;
}

/* Ingressen är normalt dämpad (--text-dark-muted); över video behöver den full färg. */
.cco-scrub-hero .cco-scrub-hero__content .brxe-text-basic {
  color: var(--text-dark);
}

.color-scheme--alt .cco-scrub-hero .cco-scrub-hero__content .brxe-heading,
.color-scheme--alt .cco-scrub-hero .cco-scrub-hero__content .brxe-text-basic {
  color: #fff;
}

/* Ett block i taget. Varje barn räknar sin egen andel ur --scrub, förskjuten
   med --i × --fade-step (båda sätts av scrub-hero.js). */
.cco-scrub-hero.is-scrub .cco-scrub-hero__content > * {
  --item-reveal: clamp(0, calc((var(--scrub) - var(--fade-start) - var(--i, 0) * var(--fade-step)) / var(--item-span)), 1);
  opacity:   var(--item-reveal);
  transform: translateY(calc((1 - var(--item-reveal)) * 1.5rem));
}

/* Tangentbordsfokus på knappen ska aldrig landa på något osynligt. */
.cco-scrub-hero.is-scrub .cco-scrub-hero__content:focus-within > * {
  opacity:   1;
  transform: none;
}

/* ── Scroll-ledtråd ─────────────────────────────────────────────────── */
.cco-scrub-hero__cue {
  display:          none;
  position:         absolute;
  left:             50%;
  bottom:           var(--space-l);
  z-index:          2;
  transform:        translateX(-50%);
  padding:          0.5em 1em;
  border-radius:    var(--radius);
  background-color: var(--black);
  color:            var(--white);
  font-size:        var(--text-s);
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  /* Tonar ut under första ~12 % av scrubben. */
  opacity:          calc(1 - var(--scrub) * 8);
}

.cco-scrub-hero__cue::after {
  content:     "↓";
  margin-left: 0.5em;
}

.cco-scrub-hero.is-scrub .cco-scrub-hero__cue {
  display: block;
}

/* ── Logotyp över natt ─────────────────────────────────────────────────
   I ljust schema börjar heron på natten, och den svarta logotypen i den
   genomskinliga headern försvinner. scrub-hero.js sätter cco-scrub-night på
   <html> så länge det är natt bakom headern; då lånas den vita logotypen via
   samma --logo-inverse som mörkt läge använder (inc/logo-color-scheme.php).
   Inte när headern är sticky-aktiv — då har den ljus remsa och svart ska stå kvar. */
.cco-scrub-night #brx-header:not(.x-header_sticky-active) .bricks-site-logo {
  content: var(--logo-inverse);
}

@media (prefers-reduced-motion: reduce) {
  .cco-scrub-hero,
  .cco-scrub-hero.is-scrub {
    height: 100vh;
    height: 100svh;
  }
  .cco-scrub-hero,
  .cco-scrub-hero.is-scrub {
    --reveal: 1;
  }
  .cco-scrub-hero .cco-scrub-hero__content > * {
    opacity:   1 !important;
    transform: none !important;
  }
  .cco-scrub-hero__cue {
    display: none !important;
  }
}