/* =============================================================================
   vp/omhoog.css  —  de zwevende knop naar boven.

   WAAROM GEEN HERGEBRUIK VAN .back-to-top-link
   Die klasse (css/vastpilot-v6.webflow.css, ~1652) staat al in de voet en
   werkt daar prima: een pijlknop naar #home, gewoon in de leesstroom van de
   pagina. Maar de opdracht vraagt een knop die VERSCHIJNT zodra de bezoeker
   een eind naar beneden is, op elke plek op de pagina — dat is per definitie
   position: fixed en een scroll-afhankelijke zichtbaarheid, geen van beide
   heeft .back-to-top-link. Het is dus geen ander uiterlijk voor hetzelfde
   ding, maar een ander ding met dezelfde bestemming. Vandaar een nieuwe
   klasse in een nieuw bestand, met wel dezelfde pijl-taal.

   STAPELEN OP PILO, DE OPDRACHT VAN DE OPDRACHTGEVER
   Rechtsonder staat straks ook de zwevende Pilo-knop (vp/pilo.css,
   [data-vp-pilo-zwever], z-index 90, right/bottom: clamp(14px, 2vw, 30px)).
   Op verzoek van de opdrachtgever stapelt deze knop BOVEN Pilo in dezelfde
   hoek, niet ernaast. Dit bestand zet alleen de vorm en de rechterrand vast
   (dezelfde clamp-formule als Pilo, dus dezelfde rechterlijn); de VERTICALE
   afstand tot Pilo kan dit bestand niet vastzetten, want die hangt af van
   Pilo's eigen, wisselende hoogte (met of zonder ballon, en straks mogelijk
   een andere maat als de Pilo-integratie verandert). Dat rekent vp/omhoog.js
   uit met een echte meting van Pilo's doos, telkens opnieuw, en zet het
   resultaat als bottom in de stijl van dit element. Zie de toelichting
   daarboven in dat bestand voor de rekenwijze.

   ZONDER JAVASCRIPT
   De link moet dan gewoon werken: geen scroll-gestuurd verschijnen (dat kan
   niet zonder JS), dus staat hij gewoon zichtbaar op de vaste hoek-plek —
   dezelfde plek als Pilo's rustpositie, want zonder JS verschijnt Pilo zelf
   ook nooit (vp/pilo.js zet het hidden-attribuut pas weg). Er is dus geen
   botsing om zonder JS voor op te lossen. vp/omhoog.js zet er, zodra het
   draait, een klasse bovenop die de knop verbergt tot er genoeg gescrold is.
   ========================================================================= */

.vp-omhoog-link {
  position: fixed;
  z-index: 91;                                  /* net boven Pilo (90) */
  right: clamp(14px, 2vw, 30px);                 /* zelfde rechterrand als Pilo */
  bottom: clamp(14px, 2vw, 30px);                /* val terug: Pilo's eigen rustplek.
                                                     vp/omhoog.js overschrijft dit
                                                     zodra hij Pilo's doos vindt. */

  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100%;

  background: var(--vp-navy);
  color: var(--vp-op-donker);
  box-shadow: 0 12px 24px -12px rgba(34, 48, 59, .45);

  text-decoration: none;
  cursor: pointer;

  /* Zonder JS: gewoon zichtbaar, gewoon in de tabvolgorde. */
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .21s ease, transform .21s cubic-bezier(.16, 1, .3, 1),
              background-color .21s ease;
}

.vp-omhoog-link svg {
  width: 18px;
  height: 18px;
  display: block;
}

.vp-omhoog-link:hover {
  background: var(--vp-accent-op-donker);
  transform: translateY(-3px);
}

/* De ring zit BINNEN de cirkel (negatieve offset) in plaats van erbuiten.
   Erbuiten zou de ring over willekeurige paginainhoud vallen — deze knop
   zweeft over alles, ook over de donkere machinescene — en dan is er geen
   vaste ondergrond om de 3:1 tegen te garanderen. Binnen de cirkel ligt de
   ring altijd tegen --vp-navy, en --vp-op-donker op --vp-navy is ruim boven
   de 3:1 (gemeten: zie het testrapport). */
.vp-omhoog-link:focus-visible {
  outline: 3px solid var(--vp-op-donker);
  outline-offset: -7px;
}

/* -----------------------------------------------------------------------
   Met JavaScript: verborgen tot er genoeg gescrold is.
   vp/omhoog.js zet .vp-js zodra het script draait, en .is-zichtbaar zodra
   de drempel gehaald is. Zonder .vp-js (JS draait niet) gelden alleen de
   regels hierboven en blijft de knop gewoon staan.
   ----------------------------------------------------------------------- */

.vp-omhoog-link.vp-js {
  opacity: 0;
  transform: translateY(14px) scale(.92);
  pointer-events: none;
}

.vp-omhoog-link.vp-js.is-zichtbaar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .vp-omhoog-link {
    transition: opacity .12s linear;
  }
  .vp-omhoog-link:hover {
    transform: none;
  }
  .vp-omhoog-link.vp-js {
    transform: none;
  }
}