/* Preloader */
.preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#fff;transition:clip-path 1s cubic-bezier(.77,0,.18,1);clip-path:inset(0 0 0 0)}
.pl-curtain{position:absolute;inset:0;background:var(--pl-to);clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
.pl-logo{position:relative;width:min(280px,62vw);transition:transform .9s cubic-bezier(.77,0,.18,1),opacity .5s}
.pl-logo svg{display:block;width:100%;overflow:visible}
.pl-base path{fill:var(--pl-from);fill-opacity:0;stroke:var(--pl-from);stroke-width:.9;stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:pl-draw 1s cubic-bezier(.65,0,.35,1) forwards, pl-fill .5s ease forwards;
  animation-delay:calc(var(--i) * 70ms), calc(.8s + var(--i) * 50ms)}
.pl-line{display:block;height:3px;margin:22px auto 0;width:64px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.pl-line::after{content:"";position:absolute;inset:0;background:var(--pl-from);transition:background .8s ease;transform:scaleX(0);transform-origin:left;animation:pl-bar 1.8s cubic-bezier(.65,0,.35,1) forwards}
/* Nieuwe kleur trekt per letter de lijnen na over het bestaande logo en kleurt dan in */
.pl-over path{fill:var(--pl-to);fill-opacity:0;stroke:var(--pl-to);stroke-width:1.1;stroke-dasharray:1 1;stroke-dashoffset:1}
.tint .pl-over path{animation:pl-draw .8s cubic-bezier(.65,0,.35,1) forwards, pl-fill .45s ease forwards;
  animation-delay:calc(var(--i) * 70ms), calc(.55s + var(--i) * 70ms)}
.preloader.tint .pl-line::after{background:var(--pl-to)}

/* Wissel van omgeving: logo staat er al, alleen de kleur verandert */
.pl-switch .pl-base path{animation:none;fill-opacity:1;stroke-width:0;stroke-dashoffset:0}
.pl-switch .pl-line{display:none}
.pl-switch.out{transition-delay:.25s}

@keyframes pl-draw{to{stroke-dashoffset:0}}
@keyframes pl-fill{to{fill-opacity:1;stroke-width:0}}
@keyframes pl-bar{to{transform:scaleX(1)}}

/* Uitgang: koraal veegt omhoog over het logo, daarna schuift het geheel weg */
.preloader.out{clip-path:inset(0 0 100% 0);transition-delay:.35s}
.preloader.out .pl-curtain{clip-path:inset(0 0 0 0)}
.preloader.out .pl-logo{transform:translateY(-40px);opacity:0}

@media (prefers-reduced-motion:reduce){
  .pl-base path{animation:none;fill-opacity:1;stroke-width:0}
  .pl-over path{animation:none!important;fill-opacity:1;stroke-width:0;opacity:0}
  .tint .pl-over path{opacity:1}
  .pl-line{display:none}
  .preloader,.preloader.out{clip-path:none;transition:opacity .35s}
  .preloader.out{opacity:0}
  .pl-curtain{display:none}
}