/* Beweging op de site. Twee uitgangspunten:
   1. Alles zit in een no-preference-media query. Zet iemand in zijn systeem
      "minder beweging" aan, dan gebeurt er niets en staat de pagina stil.
   2. De verborgen begintoestand wordt door anim.js aangezet, niet door de HTML.
      Draait het script niet, dan blijft er dus niets onzichtbaar hangen. */

@media (prefers-reduced-motion: no-preference) {

  /* ---- verschijnen bij het scrollen ---- */
  [data-verschijn] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
                transform .55s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--wacht, 0ms);
  }
  [data-verschijn].in-beeld { opacity: 1; transform: none; }

  /* ---- de hero komt binnen bij het laden, zonder op scrollen te wachten ---- */
  .hero .wrap > div > *,
  .head .wrap > * {
    animation: opkomen .62s cubic-bezier(.22, .61, .36, 1) backwards;
  }
  .hero .wrap > div > *:nth-child(1), .head .wrap > *:nth-child(1) { animation-delay: .04s; }
  .hero .wrap > div > *:nth-child(2), .head .wrap > *:nth-child(2) { animation-delay: .12s; }
  .hero .wrap > div > *:nth-child(3), .head .wrap > *:nth-child(3) { animation-delay: .20s; }
  .hero .wrap > div > *:nth-child(4), .head .wrap > *:nth-child(4) { animation-delay: .28s; }
  .hero .wrap > div > *:nth-child(5), .head .wrap > *:nth-child(5) { animation-delay: .36s; }

  @keyframes opkomen {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- de pennenstreep onder het woordmerk tekent zich ---- */
  .logo .w::after {
    transform-origin: left center;
    animation: streep .75s cubic-bezier(.22, .61, .36, 1) .35s backwards;
  }
  @keyframes streep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* ---- het woordmerk leeft ----
     Er loopt af en toe een gouden glans over de letters, zoals licht over
     goudopdruk. Dat gebeurt met een kleurverloop op de letters zelf. Kan de
     browser dat niet, dan slaat het @supports-blok over en blijft het woord
     gewoon staan in zijn eigen kleur: nooit onzichtbare tekst. */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /* Twee lagen: bovenop de glans die langsschuift, eronder de eigen kleur van
       het woord die stil blijft staan. Die onderste laag moet altijd de hele
       letter vullen, anders valt het woord weg zodra de glans voorbij is. */
    .logo .w, .logo .d {
      background-repeat: no-repeat, no-repeat;
      background-size: 230% 100%, 100% 100%;
      background-position: 230% 0, 0 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: glans 9s ease-in-out 1.4s infinite;
    }
    .logo .w {
      background-image:
        linear-gradient(100deg, transparent 40%, rgba(255, 243, 208, .75) 47%, #fff8e6 50%, rgba(255, 243, 208, .75) 53%, transparent 60%),
        linear-gradient(var(--ink, #e8e1d4), var(--ink, #e8e1d4));
    }
    .logo .d {
      background-image:
        linear-gradient(100deg, transparent 40%, rgba(255, 238, 180, .8) 47%, #fff6dc 50%, rgba(255, 238, 180, .8) 53%, transparent 60%),
        linear-gradient(var(--accent, #d9a514), var(--accent, #d9a514));
      animation-delay: 1.52s;
    }
    @keyframes glans {
      0%   { background-position: 230% 0, 0 0; }
      13%  { background-position: -60% 0, 0 0; }
      100% { background-position: -60% 0, 0 0; }
    }
  }

  /* Bij aanwijzen kantelt de pen, alsof hij wordt opgepakt. */
  .logo .mark { transition: transform .38s cubic-bezier(.22, .61, .36, 1); }
  .logo:hover .mark, .logo:focus-visible .mark { transform: rotate(-8deg) scale(1.08); }
  .logo .w::after { transition: filter .3s ease; }
  .logo:hover .w::after { filter: brightness(1.25); }

  /* ---- de gloed achter de hero ademt heel traag ---- */
  .hero::before, .head::before { animation: ademen 18s ease-in-out infinite alternate; }
  @keyframes ademen {
    from { opacity: .85; }
    to   { opacity: 1; }
  }

  /* ---- hoverwerk iets levendiger, zonder sprongen ---- */
  .taak { transition: background-color .3s ease; }
  .taak:hover { background: var(--surface-2, var(--surface)); }

  .price { transition: transform .25s cubic-bezier(.22, .61, .36, 1), border-color .25s ease; }
  .price:hover { transform: translateY(-3px); border-color: var(--line-2); }

  .verder a, .chip { transition: transform .18s ease, border-color .18s ease, color .18s ease; }
  .verder a:hover, .chip:hover { transform: translateY(-2px); }

  .masthead nav a { transition: color .18s ease; }

  /* het chevron van de vragenlijst draait mee */
  .faq summary::after { transition: transform .22s ease, color .18s ease; }
  .faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
}

/* Zonder beweging: niets verbergen, niets bewegen. Dit geldt altijd, ook als
   het script wel draait maar de bezoeker beweging heeft uitgezet. */
@media (prefers-reduced-motion: reduce) {
  [data-verschijn] { opacity: 1 !important; transform: none !important; }
}

/* ---- de achtergrond ----
   Een vast vlak achter de hele pagina met twee lagen zacht licht: diep blauw
   achterin, goud ervoor. Bij het scrollen schuiven de lagen verschillend hard,
   zodat het licht langzaam door de pagina trekt. Dat gebeurt met transform en
   niets anders, zodat de browser alleen hoeft te verschuiven en niet opnieuw
   te tekenen.

   anim.js maakt dit vlak. Draait dat script niet, dan is er geen vlak en ziet
   de pagina eruit zoals voorheen. De banden met een eigen achtergrondkleur
   dekken het licht af; juist daardoor lijkt het tussen de secties door te
   schijnen. */
.achtergrond {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.achtergrond .laag { position: absolute; inset: -45%; will-change: transform; }
.achtergrond .laag > i { position: absolute; inset: 0; display: block; }

.achtergrond .laag-1 > i {
  background:
    radial-gradient(48% 42% at 12% 24%, rgba(26, 54, 116, .52), transparent 70%),
    radial-gradient(44% 40% at 88% 64%, rgba(32, 70, 104, .42), transparent 72%);
}
.achtergrond .laag-2 > i {
  background:
    radial-gradient(36% 32% at 64% 16%, rgba(217, 165, 20, .15), transparent 70%),
    radial-gradient(32% 30% at 24% 84%, rgba(217, 165, 20, .10), transparent 72%);
}

@media (prefers-reduced-motion: no-preference) {
  /* Boven op het schuiven drijven de lagen ook uit zichzelf, heel traag, zodat
     de pagina ook leeft als er niet gescrold wordt. */
  .achtergrond .laag-1 > i { animation: drijven-een 44s ease-in-out infinite alternate; }
  .achtergrond .laag-2 > i { animation: drijven-twee 30s ease-in-out infinite alternate; }

  @keyframes drijven-een {
    from { transform: translate3d(-4%, -2%, 0) scale(1); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.14); }
  }
  @keyframes drijven-twee {
    from { transform: translate3d(5%, 3%, 0) scale(1.10); }
    to   { transform: translate3d(-6%, -4%, 0) scale(1); }
  }
}

/* ---- bliksem ----
   Een lichtvlek die de muis volgt en inslagen die naar de muis toe schieten.
   Beide worden door anim.js gemaakt; zonder script is er niets en verandert er
   niets aan de pagina.

   Alles hieronder staat met opzet buiten de no-preference-query voor de vorm,
   maar het script zelf maakt deze onderdelen niet aan als iemand "minder
   beweging" heeft aanstaan. Flikkerende beelden zijn voor sommige mensen niet
   alleen vervelend maar schadelijk; daarom blijft dit dan helemaal weg. */
.achtergrond .lichtvlek {
  position: absolute;
  left: 0; top: 0;
  width: 820px; height: 820px;
  margin: -410px 0 0 -410px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
  will-change: transform;
  background: radial-gradient(closest-side,
    rgba(217, 165, 20, .15),
    rgba(42, 82, 158, .13) 42%,
    transparent 72%);
}
.achtergrond .lichtvlek.aan { opacity: 1; }

.achtergrond .bliksem { position: absolute; left: 0; top: 0; pointer-events: none; }

/* De korte schok bij een inslag: het hele vlak verspringt een paar pixels. */
.achtergrond.schok { animation: schokken .22s steps(4, end) 1; }
@keyframes schokken {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(3px, -2px, 0); }
  50%  { transform: translate3d(-2px, 2px, 0); }
  75%  { transform: translate3d(2px, 1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}