/* ===========================================================================
   PILO — twee onderdelen, allebei buiten de gepinde scenes.

   1. De Pilo in de sectie "Dit is Pilo": beeld naast tekst, met een gloed
      erachter, zoals de template dat elders ook doet.
   2. De zwevende Pilo rechtsonder in beeld, met de ballon "Vraag het aan Pilo".

   Regels die hier gelden:
   - alleen transform, opacity en filter animeren;
   - geen backdrop-filter, want dat is in WebKit tijdens scrollen duur;
   - de gloed is een radial-gradient en geen filter: blur(). Dat scheelt een
     dure laag per frame en ziet er op deze afstand hetzelfde uit;
   - kleuren komen uit het palet in css/vastpilot-v6.webflow.css. Op een licht
     vlak is het accent --vp-accent-op-licht, nooit --vp-accent-op-donker.
   =========================================================================== */

/* ===========================================================================
   1. PILO IN DE SECTIE "DIT IS PILO"
   =========================================================================== */

/* .common-heading-div is een flexkolom met 32px ertussen. Op desktop draaien we
   die om naar een rij: Pilo links, de kop en de subkop rechts. Onder 992px valt
   hij terug in de kolom die de template al had, met Pilo boven de kop. */
.vp-pilo-intro {
  --vp-pilo-maat: 208px;
  gap: clamp(28px, 4vw, 64px);
}

.vp-pilo-portret {
  position: relative;
  flex: 0 0 auto;
  width: var(--vp-pilo-maat);
  height: var(--vp-pilo-maat);
  isolation: isolate;
}

/* Rustige, koele halo achter de kiezel. De ruststand zelf heeft geen
   statusgloed; dit vlak geeft alleen diepte tegen de lichte pagina. */
.vp-pilo-gloed {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  width: 190%;
  height: 190%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background:
    radial-gradient(closest-side, rgba(42, 76, 119, .18), rgba(42, 76, 119, 0) 68%),
    radial-gradient(closest-side, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0) 76%);
  pointer-events: none;
}

/* De vloer waar hij op staat. Zonder deze schaduw zweeft hij in de sectie. */
.vp-pilo-vloer {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -6px;
  width: 62%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 100%;
  background: radial-gradient(ellipse, rgba(34, 48, 59, .30), rgba(34, 48, 59, 0) 70%);
  pointer-events: none;
}

/* De puls-ring groeit buiten het 100x100-vlak; inline svg mag dat tekenen
   zolang overflow zichtbaar is. */
.vp-pilo-bob svg { overflow: visible; }

.vp-pilo-bob {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 22px rgba(34, 48, 59, .18));
  animation: vpPiloDeinen 4.55s ease-in-out infinite;
  will-change: transform;
}

.vp-pilo-ogen {
  transform-origin: 50px 48px;
  animation: vpPiloKnipper 5.25s ease-in-out infinite;
}

/* Kiezel-Pilo, ruststand. Vorm en beweging volgen Design/Pilo mascotte
   2026-09-02.md. Alleen dit sectieportret gebruikt deze nieuwe markup; andere
   Pilo-plekken blijven buiten deze wijziging. */
.vp-pilo-intro .vp-pilo-bob {
  animation: none;
  filter: drop-shadow(0 20px 24px rgba(24, 40, 56, .23));
}

.vp-pilo-kiezel {
  display: block;
  overflow: visible;
}

.vp-pilo-adem,
.vp-pilo-kiezel-ring {
  transform-box: fill-box;
  transform-origin: center;
}

.vp-pilo-adem {
  animation: vpPiloAdem 6.8s ease-in-out infinite;
}

.vp-pilo-kiezel-ring {
  opacity: 0;
  animation: vpPiloRustRing 2s linear infinite;
}

.vp-pilo-z1,
.vp-pilo-z2,
.vp-pilo-z3 {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: vpPiloZ 3.4s ease-in-out infinite;
}

.vp-pilo-z2 { animation-delay: .55s; }
.vp-pilo-z3 { animation-delay: 1.1s; }

@keyframes vpPiloAdem {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes vpPiloRustRing {
  0% { transform: scale(1); opacity: .65; animation-timing-function: ease-out; }
  45%, 100% { transform: scale(1.42); opacity: 0; }
}

@keyframes vpPiloZ {
  0% { opacity: 0; transform: translate(0, 4px) scale(.7); }
  25% { opacity: .85; }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translate(4px, -10px) scale(1.05); }
}

/* De tekstkolom. De template zet 32px tussen de kop en de subkop; dat halen we
   hier terug, want de kolom is nu een eigen flexcontainer. */
.vp-pilo-woord {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---spacing--32px);
  min-width: 0;
}

/* De link begint met een lijn uit de ruimte tussen Pilo en de tekst. Zo hoort
   hij bij de introductie in plaats van als losse knop onder zes kaarten. */
.vp-pilo-doorlink {
  position: relative;
  align-self: flex-start;
  display: flex;
  align-items: center;
  width: fit-content;
  margin-top: -8px;
  --vp-anim-delay: 300ms;
}

.vp-pilo-doorlink .app-button {
  min-width: min(100%, 218px);
}

/* Tweede kaartenrij telt nu drie blokken, gelijk aan de rij erboven. */
#pilo .feature-grid._01.vp-pilo-grid-drie {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vp-pilo-toolgraphic {
  display: block;
  width: min(100%, 220px);
  height: auto;
  filter: drop-shadow(0 0 3px #00000040);
}

@media screen and (min-width: 992px) {
  .vp-pilo-intro {
    --vp-pilo-maat: 224px;
    flex-flow: row;
    /* Links uitgelijnd, niet gecentreerd: zo staat Pilo met zijn linkerrand
       precies op de linkerrand van het kaartenraster eronder. Gemeten op 1440:
       allebei op 220px. */
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }

  /* .feature-heading-div knijpt de kop op 340px en centreert hem. In de rij is
     dat niet wat we willen: daar mag de kop de kolom vullen. */
  .vp-pilo-woord .feature-heading-div {
    max-width: 30ch;
    margin-left: 0;
    margin-right: 0;
  }

  .vp-pilo-woord .large-paragraph {
    max-width: 46ch;
  }

  .vp-pilo-doorlink {
    margin-left: -70px;
    padding-left: 70px;
  }

  .vp-pilo-doorlink::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, rgba(30, 58, 95, .08), rgba(30, 58, 95, .55));
  }

  .vp-pilo-doorlink::after {
    content: "";
    position: absolute;
    left: 52px;
    top: calc(50% - 3px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vp-navy);
  }
}

@media screen and (max-width: 991px) {
  .vp-pilo-intro {
    --vp-pilo-maat: 176px;
  }

  .vp-pilo-doorlink {
    align-self: center;
    margin-top: 4px;
  }
}

@media screen and (max-width: 479px) {
  .vp-pilo-intro {
    --vp-pilo-maat: 136px;
  }
}

@media screen and (max-width: 767px) {
  #pilo .feature-grid._01.vp-pilo-grid-drie {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================================================
   1b. PILO IN DE KAART "VRAAG HET AAN PILO"

   Die kaart stond op vijf pagina's met een eigen, ingeplakte tekening: dezelfde
   Pilo, maar met vaste kleurcodes in plaats van de palet-variabelen en zonder
   de klassen die het knipperen en het deinen dragen. Twee bouwstenen voor
   hetzelfde ding dus. De kaart gebruikt nu dezelfde markup als de knop
   hieronder; alleen de doos eromheen verschilt.

   De maat is die van de oude tekening: 92 bij 96 met 10px lucht eromheen, dus
   box-sizing: content-box.
   =========================================================================== */

.vp-pilo-kaart {
  box-sizing: content-box;
  width: 92px;
  height: 92px;
  padding: 10px;
  border-radius: 10px;
  background: var(--vp-kaart);
  line-height: 0;
}

/* De schaduw van de zwevende knop is te zwaar voor een tekening van 92px op een
   plaatje van 10px lucht. */
.vp-pilo-kaart .vp-pilo-bob {
  filter: drop-shadow(0 6px 10px rgba(34, 48, 59, .16));
}

/* ===========================================================================
   2. DE ZWEVENDE PILO RECHTSONDER
   =========================================================================== */

/* Zonder JavaScript blijft hij weg: het hidden-attribuut staat in de markup en
   vp/pilo.js haalt het pas weg als het script draait. */
.vp-pilo-zwever[hidden] {
  display: none;
}

.vp-pilo-zwever {
  position: fixed;
  z-index: 90;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 30px);
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  gap: 8px;

  /* Beginstand: uit beeld en onaanraakbaar. vp/pilo.js zet is-zichtbaar zodra
     de bezoeker de hero voorbij is. */
  opacity: 0;
  transform: translateY(18px) scale(.94);
  pointer-events: none;
  transition: opacity .245s ease, transform .245s cubic-bezier(.16, 1, .3, 1);
}

.vp-pilo-zwever.is-zichtbaar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Staat het mobiele menu open, dan wijkt hij. De navigatiebalk zelf staat
   absoluut bovenaan de pagina en komt hier dus nooit overheen, maar de
   opengeklapte overlay kan wel tot onder in beeld lopen. */
body:has(.w-nav-button.w--open) .vp-pilo-zwever {
  opacity: 0;
  pointer-events: none;
}

/* De ballon staat BOVEN de kop en de punt wijst naar beneden, naar Pilo toe.
   Naast de kop zou de punt naar niets wijzen. */
.vp-pilo-ballon {
  position: relative;
  margin: 0 6px 0 0;
  padding: 11px 16px;
  background: var(--vp-kaart);
  border: 1px solid var(--vp-lijn);
  border-radius: 14px;
  box-shadow: 0 18px 44px -22px rgba(34, 48, 59, .45);
  color: var(--vp-navy);
  font-size: 15px;
  line-height: 1.2;
  font-weight: var(--_typography---font-weight--medium);
  white-space: nowrap;
}

/* 34px vanaf de rechterkant van de ballon: dat is het midden van de kop
   eronder, want de knop is 88px breed en staat 6px verder naar rechts. */
.vp-pilo-tip {
  position: absolute;
  right: 34px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--vp-kaart);
  border-right: 1px solid var(--vp-lijn);
  border-bottom: 1px solid var(--vp-lijn);
  transform: rotate(45deg);
}

.vp-pilo-knop {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  transition: transform .21s cubic-bezier(.16, 1, .3, 1);
}

.vp-pilo-knop:hover {
  transform: translateY(-5px) scale(1.04);
}

.vp-pilo-knop:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 4px;
}

.vp-pilo-knop .vp-pilo-bob {
  filter: drop-shadow(0 12px 20px rgba(34, 48, 59, .28));
}

/* Onder 940px verdwijnt de ballon: daar is geen ruimte naast de kop zonder dat
   hij inhoud afdekt. De knop zelf wordt kleiner en schuift dichter naar de
   hoek. */
@media screen and (max-width: 939px) {
  .vp-pilo-ballon {
    display: none;
  }

  .vp-pilo-knop {
    width: 62px;
    height: 62px;
  }
}

@media screen and (max-width: 479px) {
  .vp-pilo-knop {
    width: 54px;
    height: 54px;
  }
}

/* ===========================================================================
   3. RUST
   =========================================================================== */

@keyframes vpPiloDeinen {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Knipperen is een scaleY op de oogjes, dus ook een transform. */
@keyframes vpPiloKnipper {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
}



@media (prefers-reduced-motion: reduce) {

  .vp-pilo-bob,
  .vp-pilo-ogen,
  .vp-pilo-adem,
  .vp-pilo-kiezel-ring,
  .vp-pilo-z1,
  .vp-pilo-z2,
  .vp-pilo-z3 {
    animation: none;
  }

  .vp-pilo-kiezel-ring {
    opacity: 0;
  }

  .vp-pilo-z1,
  .vp-pilo-z2,
  .vp-pilo-z3 {
    opacity: .6;
  }

  .vp-pilo-zwever,
  .vp-pilo-knop {
    transition: none;
  }

  .vp-pilo-knop:hover {
    transform: none;
  }
}