/* ============================================================
   CLARIX, schuifbalk met haltes (alleen de home)

   Waarom: de home is een scroll-animatie van 2800vh. Je ziet nergens hoe ver
   je bent en welke haltes er nog komen. Deze balk is een navigatiehulp, geen
   tweede attractie naast de 3D-scene.

   VORM, bijgesteld 25 aug 2026 op verzoek van Ali. Hij las de vorige versie
   (een haarlijn die zich van boven vulde, met zeven stippen erop) niet als een
   schuifbalk: "het uiteinde is wit, dus je ziet niet goed op welke hoogte van
   de site je zit". Nu staat er wat hij vroeg: een BAAN met daarin een DUIM,
   precies zoals de schuifbalk van een venster. De duim is een dicht staafje
   met halfronde uiteinden, in de kleur die het woordmerk op die hoogte heeft.
   De zeven stippen zijn weg; de haltes zijn streepjes in de baan geworden.

   Kleur: dezelfde ramp als het woordmerk en de shaders in index.html,
   blauw #0091ff via paars #8000ff naar magenta #ff0099. Die staat hier
   opnieuw als losse waarden omdat dit bestand ook zonder de :root van
   index.html moet kunnen laden; verandert de ramp daar, verander hem hier mee.
   De duim krijgt EEN kleur uit die ramp in plaats van het hele verloop: een
   dicht vlak steekt af, een verloop over 28 px zou hem juist vager maken.

   Stapeling: z-index 90. Boven de scroll-secties (hoogste is 10, de
   glass-container) en onder het menu (100), de nulmeting-overlay (9998), de
   preloader (9999) en de skip-link (10000). Zo dekt hij nooit iets af waar
   je op moet kunnen klikken.
   ============================================================ */

.clarix-scrollbalk {
  /* Afstand van het HART van de baan tot de rechterrand. Bewust in px en niet
     in rem: de root-lettergrootte loopt van 12px op 1440 tot 24px op 3440, dus
     een rem-maat zou de balk op Ali's scherm twee keer zo ver naar binnen
     zetten. Gemeten 25 aug 2026 loopt de inhoud tot 3365 px op een scherm van
     3440 (75 px marge) en tot 1403 px op 1440 (37 px marge); de baan blijft
     daar overal buiten. */
  --sb-rechts: clamp(18px, 1.15vw, 34px);
  /* Breedte van de kolom die de muis opvangt. Smal, want alles erbuiten moet
     gewoon aanklikbaar blijven. */
  --sb-breedte: 28px;
  /* De baan en de duim. 14 om 10 px is de maat van een schuifbalk in een
     venster: de duim ligt IN de goot, met 2 px goot links en rechts van hem.
     Dat is geen opmaak maar de reden dat je hem ziet. Gemeten op 3440 boven
     het lichtblauwe raster van de 3D-scene: de blauwe duim haalt 2,78 tegen
     de pagina-achtergrond en 3,11 tegen de goot. Lag de duim even breed als
     de baan, dan was links en rechts van hem alleen die 2,78 te zien; nu is
     de goot zijn buurman aan alle vier de kanten. */
  --sb-baan: 14px;
  /* Twee px smaller dan de baan, niet vier. Zo vullen spoor en duim de baan met
     1 px lucht aan elke kant, precies zoals de scrollbar van shadcn/ui dat doet
     (p-px op de baan, flex-1 op de duim). Op 10 px binnen een baan van 14 bleef
     er links en rechts wit over en oogde de gekleurde route als een draadje in
     een buis in plaats van als een gevulde baan. */
  --sb-duim-breed: 12px;
  /* Hoger dan de vorige versie (560 px). De duim geeft de zichtbare fractie
     van de pagina weer, en die is op een pagina van 2800vh maar 3,6 procent;
     hoe langer de baan, hoe nauwkeuriger je die duim kunt aflezen en
     neerzetten. Gemeten past 720 px op 3440x1440 ruim tussen het menu
     (eindigt op y 311) en de onderrand. */
  --sb-hoogte: clamp(300px, 60vh, 720px);
  /* Ondergrens voor de duim. Een echte schuifbalk doet hetzelfde: onder een
     bepaalde lengte blijft de duim staan, anders is hij niet meer te pakken.
     3,6 procent van 720 px is 26 px, dus in de praktijk telt deze grens
     nauwelijks mee; hij vangt alleen kortere vensters op. */
  --sb-duim-min: 28px;
  --sb-lijn: rgba(0, 0, 0, 0.1);   /* de haarlijn van de site */

  position: fixed;
  top: 50%;
  right: calc(var(--sb-rechts) - var(--sb-breedte) / 2);
  transform: translateY(-50%);
  width: var(--sb-breedte);
  height: var(--sb-hoogte);
  z-index: 90;
  font-family: 'Sarabun', ui-sans-serif, system-ui, sans-serif;
  /* pan-y en niet auto of none: dezelfde keuze als bij het canvas (punt A2).
     Verticaal vegen scrollt de pagina gewoon door, ook met de vinger precies
     op de balk. Zonder deze regel is het gedrag hetzelfde, maar dan hangt het
     af van een browserstandaard in plaats van van een afspraak. */
  touch-action: pan-y;
  /* De hele kolom vangt de muis op: hover toont de namen en een sleep aan de
     duim begint hier. Op de telefoon staat dit uit, zie de mediaregel. */
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.6s var(--gl-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* ---- de baan ---------------------------------------------------------- */
/* Een staande capsule met een haarlijn eromheen, iets lichter dan de pagina.
   Bewust geen doorschijnend zwart: de balk hangt zowel boven het lichtblauwe
   raster van de 3D-scene als boven wit, en een lichte capsule met een lijntje
   houdt op allebei dezelfde vorm. */
.sb-spoor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--sb-baan);
  margin-left: calc(var(--sb-baan) / -2);
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  /* Iets donkerder dan de haarlijn van de site (0,1). Reden: Ali's klacht ging
     letterlijk over de omlijning die niet te zien was. Gemeten op 3440 haalt
     de rand op 0,1 maar 1,15 tegen de pagina ernaast; op 0,16 wordt dat 1,4 en
     is de baan ook over een egale ondergrond een vorm in plaats van een vaag
     wit vlak. Verder dan dit gaan we niet: dan wordt de baan zelf een streep
     die om aandacht vraagt, en het gaat om de duim. */
  /* De rand stond op zwart, eerst 0,16 en daarna 0,28. Ali, 26 aug 2026: "de
     omlijning is wat grijzer, ik vind dat grijze niet echt mooi." Terecht: op
     een pagina die verder alleen zwart, wit en het blauw-paars-magenta van het
     woordmerk gebruikt, is een grijze lijn de enige grijze lijn.
     Ter vergelijking gekeken naar de scrollbar van shadcn/ui: die geeft de baan
     helemaal GEEN zichtbare rand (border-l-transparent) en laat alleen de duim
     het werk doen. Dat gaat hier te ver, want Ali vroeg eerder juist om een
     zichtbare omlijning. Dus wel een rand, maar in het accent van de site in
     plaats van grijs. */
  /* 0,32 en niet 0,22: op 0,22 haalde de rand 1,29 contrast tegen de pagina,
     terwijl de oude grijze rand op 1,40 zat. Zichtbaarheid inleveren voor een
     mooiere kleur is geen ruil die Ali gevraagd heeft; hij wilde allebei. Op
     0,32 zit het blauw op dezelfde 1,40 als het grijs daarvoor. */
  border: 1px solid rgba(0, 145, 255, 0.32);
  z-index: 0;
}

/* ---- de afgelegde route ------------------------------------------------ */
/* Ali, 26 aug 2026: "wanneer die schuifbalk verder gaat, moet de kleur van de
   route die hij heeft afgelegd ook gevuld raken. Wat je eerst had met die
   balletjes, dat die lijn telkens kleurde, dat wil ik hier ook."
   Dit vlak ligt IN de baan, loopt van boven tot de onderkant van de duim, en
   draagt het verloop van het woordmerk: blauw, paars, magenta. De hoogte zet
   scrollbalk.js elke frame in px.
   Het verloop is vastgezet op de hoogte van de HELE baan (--sb-hoogte-px, ook
   in px gezet door scrollbalk.js). Zonder dat zou het complete verloop bovenaan
   de pagina al doorlopen worden in twintig pixels, en dan zegt de kleur niets
   meer over hoe ver je bent.
   Boven rond, onder recht: bovenaan volgt hij de capsule van de baan, onderaan
   sluit de duim hem af. */
.sb-vulling {
  position: absolute;
  top: 0;
  left: 50%;
  /* Even breed als de duim, en dat is de hele reden. Op de baanbreedte min 2 px
     was het spoor 12 px tegen een duim van 10, dus het stak links en rechts
     naast hem uit en liep daar gewoon door tot onder hem. De duim kapte het
     spoor dan niet af maar zat er als los blokje op geplakt, met aan
     weerszijden een lichte rand die eronderdoor liep. Precies wat Ali zag:
     "niet goed afgekapt met de kleur van die route". Nu is het een streng:
     hetzelfde spoor, met een vol stuk erin op de plek waar je staat. */
  width: var(--sb-duim-breed);
  margin-left: calc(var(--sb-duim-breed) / -2);
  height: 0;
  box-sizing: border-box;
  border-radius: 999px 999px 3px 3px;
  background-image: linear-gradient(180deg, #0091ff 0%, #8000ff 55%, #ff0099 100%);
  background-size: 100% var(--sb-hoogte-px, 720px);
  background-repeat: no-repeat;
  /* Zacht, en met opzet. Op volle dekking loopt de duim visueel op in zijn
     eigen spoor en wordt de balk een thermometer: alles gekleurd, nergens een
     balkje. Ali vroeg om allebei: een route die kleurt EN een kleiner balkje
     dat erdoorheen schuift. Op 0,42 leest de route als een spoor en steekt de
     duim er vol overheen. */
  opacity: 0.42;
  z-index: 1;
  pointer-events: none;
}
/* ---- de duim ---------------------------------------------------------- */
/* Het staafje dat zegt waar je bent. Hoogte en plek zet scrollbalk.js in px,
   want die volgen uit de zichtbare fractie van de pagina en moeten elke frame
   exact kloppen; een percentage zou de rondingen laten meerekenen.

   Geen transition op transform of height: een schuifbalk die naloopt op de
   scroll voelt kapot. Wat wel overgaat is de kleur, en dat is een traag
   verloop over de hele pagina. */
.sb-duim {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--sb-duim-breed);
  margin-left: calc(var(--sb-duim-breed) / -2);
  height: var(--sb-duim-min);
  box-sizing: border-box;
  border-radius: 999px;
  /* Ali, 26 aug 2026: de duim "heeft niet goed afgekapt met de kleur van die
     route; hij is horizontaal de kleur die ook verschuift, maar hij moet net
     als dat kleine balletje erin, een beetje in die vorm zijn."
     Hij stond op een egale kleur (de kleur van de ramp op zijn eigen hoogte).
     Daardoor was hij een los blokje dat op de kleurbaan geplakt zat: boven hem
     een zacht verloop, en dan ineens een vlak fel vlak.
     Nu draagt hij HETZELFDE verloop als het spoor, met dezelfde schaal
     (--sb-hoogte-px, de volle baan). scrollbalk.js schuift de achtergrond met
     hem mee, zodat hij precies het stuk kleur toont dat op zijn plek hoort. De
     duim is dus geen ander ding meer maar hetzelfde spoor, alleen voluit in
     plaats van doorschijnend. */
  background-image: linear-gradient(180deg, #0091ff 0%, #8000ff 55%, #ff0099 100%);
  background-size: 100% var(--sb-hoogte-px, 720px);
  background-repeat: no-repeat;
  /* Geen rand meer, en een schaduw in de merkkleur in plaats van in zwart.
     Er stond een zwarte haarlijn van 0,14 met een zwarte slagschaduw van 0,2
     omheen, en samen met de grijze baanrand maakte dat de hele balk grauw.
     Ali, 26 aug 2026: "dat grijze vind ik niet echt mooi."
     De scrollbar van shadcn/ui geeft de duim ook geen rand: alleen een kleur en
     een volle ronding. De duim staat hier bovendien altijd in zijn eigen baan
     met een lichte ondergrond eromheen, dus hij heeft geen zwarte lijn nodig om
     zich los te maken van wat eronder ligt. Wat blijft is een zachte gloed in
     dezelfde kleur als de duim zelf, voor een klein beetje diepte. */
  box-shadow: 0 1px 5px rgba(0, 60, 140, 0.18);
  z-index: 2;
  will-change: transform;
  transition: opacity 0.4s ease;
  pointer-events: none;   /* de sleep wordt op de hele kolom afgehandeld */
}
/* Terwijl je sleept: iets breder, zodat je ziet dat je hem vasthebt. De
   breedte verandert links en rechts even veel, dus de baan verspringt niet. */
.clarix-scrollbalk.is-slepen .sb-duim {
  width: calc(var(--sb-duim-breed) + 2px);
  margin-left: calc((var(--sb-duim-breed) + 2px) / -2);
}
.clarix-scrollbalk.is-slepen { cursor: grabbing; }
.clarix-scrollbalk:hover .sb-duim { box-shadow: 0 1px 7px rgba(0, 60, 140, 0.3); }

/* ---- toetsenbord ------------------------------------------------------ */
/* De balk is sinds 26 aug 2026 zelf het bedieningselement (role=scrollbar,
   tabindex 0) in plaats van zeven knoppen. BEWUST GEEN `outline: none`:
   index.html heeft een eigen regel `:focus-visible { outline: 3px solid
   focus meer op het enige element dat je nog met tab kunt bereiken. */

/* ---- telefoon --------------------------------------------------------- */
/* Dezelfde grens als MOBILE_MAX in index.html (768px).
   Drie verschillen: smaller, geen namen, en de kolom vangt niets meer op.
   Dat laatste is de belangrijkste: op een aanraakscherm mag een onzichtbare
   strook langs de rand nooit tussen de vinger en de pagina komen. Slepen aan
   de duim kan op de telefoon dus niet, en dat is de bedoeling: daar is vegen
   zelf de snelste manier en een sleepbare strook langs de rand kaapt die
   veeg. */
@media (max-width: 768px) {
  .clarix-scrollbalk {
    /* 8 px en niet meer: gemeten op 390x844 lopen de blokken van de pagina
       (de glaspanelen, de voettekst-kaart) tot 24 px van de rechterrand en de
       taalknop tot 18 px. Met een baan van 10 px staat de hele balk in de
       vrije strook ernaast, van 3 tot 13 px van de rand. */
    --sb-rechts: 8px;
    --sb-breedte: 24px;
    --sb-baan: 10px;
    --sb-duim-breed: 8px;
    --sb-hoogte: clamp(220px, 38vh, 400px);
    --sb-duim-min: 24px;
    pointer-events: none;
  }
}

/* ---- minder beweging -------------------------------------------------- */
/* De duim blijft meelopen met de scroll: dat is geen versiering maar de
   meterstand, en hij loopt sowieso zonder overgang mee. Wat weggaat zijn de
   kleur- en dikte-overgangen. Het springen naar een halte gebeurt dan ineens
   in plaats van vloeiend; dat regelt scrollbalk.js. */
@media (prefers-reduced-motion: reduce) {
  .clarix-scrollbalk,
  .sb-duim,
  .sb-vulling {
    transition: none;
  }
}