/* Webworked geanimeerd logo — geëxtraheerd uit het ontwerp (item 4).
   .logo-mark = de drie bewegende stukjes; .logo-text = woordmerk-shimmer.
   .logo-mark.once speelt de animatie één keer (voor de navigatie). */

.logo {
  display: flex;
  align-items: center;
  gap: 48px;
  user-select: none;
  cursor: pointer;
}

/*
  Two-layer approach:
  .pw (outer) = animation transform + filter drop-shadow
  .pi (inner) = individual piece PNG (transparent outside piece shape)

  PNG transparency clips each piece; drop-shadow on .pw sees shaped pixels
  -> glow follows exact piece silhouette.
  No clip-path -> no clip-edge artifacts between pieces.
*/
.logo-mark {
  position: relative;
  width: 128px;
  height: 133px;
  flex-shrink: 0;
}

.pw {
  position: absolute;
  inset: 0;
  will-change: transform, filter;
}

.pi {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

/* Per-piece PNG: exact piece pixels only (no gap fill = no bright edge stripes) */
.p1 .pi { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABdCAYAAACy/NZgAAACvklEQVR42u2XT0gUYRjGf99sEPpt1iGQboEkGh0EiQ6FGJ06dAmKiHJ3Uoo6dApMBCkKETp56hQ7axBEhyC8dDHEi4dAOhRah6BD9AclaGb/6O68HbZVN21Zc+abivkdd2d59nnned/v/SAmJiYmJiYmJibmP8RzuilOdJqSUxScNso8B9oqH0kW4SZJ+1OYwhYlbq2JAqgUME8+eyFcYcXRjXVQu/HlIZ4zE1b5LYSWOt8fo+S/wXOGgxdG/Aaeu4vrLJCbOBKgsJIGY9iO+LO42cGgHKut9YGM4TpTuI9azTiudX8clufJOdfNOV4T34Mwjpt5Td7pMeO4tvUO4jNNLjO2ReGAEDWI60zjZrrCLfXm5e9BqTlcZ8ic49o/MIrnzFDIHDArXJ16ZfUW17lnWrjq/gaeMxJ8qhvjNvnM+fDCVY+yGkce7DLtGBR78RIj5h1XuGwuXLWuW8hnes0LVybcyWiEffZHI4zsi0hYtZptpzXHpSjaCVBfonK8EpXjndE4ViSiaicVkXAUs/rvEFZ8MJzq1XdcNByuHVXhRcOhrvaxfDb8elf7eNZwqf2KsJV4YThcUhFu6nsPPDOoK+v6WN2KZoDo1BzIiNlSV9H2HWDSxJ1i48hsljMgWTOprqmCXUDbaSyrF5GvoS24vz0kmvqm0VYnMGGm1DXuU4vodArLPwFBHiTKb+xYbLo0RXP5EOAE84ql3Ph5rPq/o9M2Sp1D+LZNx6WtLwLNqcfoUhtwfxttXPqzDUQNLKHT15BEFyILZhyvJ3nxFUm7A6XGgk114+UfAuswIu8a/MVycMue7ntJ0m4HGQa8+qlmJfgtU9ujUG4Hnta5SRTDWW91/0d0+jSoU5uPXSmGu1fr1CS63AHy5JdSF8Jf6NXAEto+C343IjM/1+qc+euDl72C51wlJiYm5p/kBx3X3pE6yAfFAAAAAElFTkSuQmCC"); background-size: 42px 131px; background-position: 0px 0px; }
.p2 .pi { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABdCAYAAACy/NZgAAACeklEQVR42u2ZP2hTURTGf+c1oVKHgoNFRAQ7qEM3wT9DbaoVB+dY24gUwSqCugiCioKiuCji0K1KNS+lDlJctMW8WCm6KOhgRMRJB0EXUVRi33GoJaamtsHmnuG9bwwPfvm+c869990HsWLFihUrVqzISij4mwm5g9CC6lPQo3RmJusPzvufEJbN+v0WjYkDbEl/qxfYqwIFyPC9VKTgd9UPPGcWshpljCB7l4fD692By/9gF2H4krx/YXFrHPhaw/OvIOwjlXniwHGF1oH3mCA7wPhIs0vwTFAHSZSK5P20q6j/luoYovtJZd45cFzR/TvAKxLkDrt1XOl+Ak32sC39vv6OK923I6XXBP5JgutL3IGn4U3AebTxDUF2uztwuYgrQcYJ/H1uwWXdIJ89YgEGkavkcxvdgwFEb3N/aKl7MKwimdxtAQbRvTZg6GByaLkFGH4k22zA6FojMK1W4KQVGBuwMGUDVkIrxxoxx1g5FrWKWqyitnIsVs2lVs2FRK2r8azGycqxZ7aAWEUdLyARiFo8q22xwSjqMGG1STRaLZlWx1uJ2jiZHfaid7yN3n6sodkchxF7TfWsDgKh1R2I2N2BWN36aJNVV68xrrHqV8fk0WmwJ12ovnWU8yVSPfemjc8oyJ4DOVWnun4A7aezd7Sc+J96MNyKTA0i0r6I0MtI4gyp9JfKUldTwd9DyBWElv9APsLz+tnaXazeY3NpfKSZhtJFRA7VCPwIeoxUb/bfzT2fgtwGCAdB2hawOAzQpCfYlPk8/1QtVAX/OKGe/f21dHYdX5Dw+mjvfrbwca5FEzdX8NM7jbATpQWR5wjX6OjJ1doAvwCNxNjF3udiwQAAAABJRU5ErkJggg=="); background-size: 42px 131px; background-position: 43px 0px; }
.p3 .pi { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABdCAYAAACy/NZgAAACvklEQVR42u2aQUgUYRTH/+/z0wyD6CS1e4lKEDp16dKhQ7c816UkCbS03dV0dkMiBA/Wjh2arYigpLxVFB071cGsUwZ1SM0icAbWQymYB7f5XgfFFlHT3P0e4fyPMzv83v977833vmEp5mUvE1EvADDzJBP1BAnnHsosiudcXn6RmUcJqnsy2fXUKvhPABhiqGSQ7BwpNVitGRXhiCLzLpZz7++83bfLGngpAKBpxy89FvOyjVaWehW9guHmyVR6vOyOl+koFI3Fc26PbcfF1T/OXHEmSHUO23BcVHx0QCnzOuZl+zHQU20NXBRAZ3y25kP8pnvYKnhR+8F4G/fcbNlzvGrugTEoPum3pd/bcFzc93VkaCR2o/+0VfBSAIof7vHcq9bBAKAImXjOPWUdvKjB3beu1UuAoULliYCJcCx283qddfBCn4WtImBiNMg4JtpX67o19sEAKrfjoAiYQ6oTARNxtYxjRfMiYBjDMmCRdhIFs4qW2lYjG4pyHIGj4opyHBVXVFwrq2KBaX/YY9Yy4y1DS83VVVuruAzByCy1EQJDIRRyTLzFcswcSm0SodD5WMgxsdDBnCmUASumGRHwvKn6JAH+OtXenhf4loknIrtTQes7EuBn+daOL5bBPFPQOGd9EGBDzfnzzpRVMINP+CnnkbXRh4FZZjT4ifTjle7rMg3PE2z4eNCeGbU27DFjcA7Vh9aCltrxi4JBVz7lfFzPj3UJjiR5ZmoJUs7zjTynN1lAA3PbTMePlkszG31W/yPwG4xp8lOZl9ZOEobhUaGifjPQjTr+zITGIOG8KUUl6nUuba+fcK6Usu30X3pyuABunEqmJ0rd73oVi99Z0UU/0fWgXK9UvcJL/e7PsDIzneyYLufmoYv/ycCKzgZtzpCNrVIvzLro9i84fVbnr9qcuxeRIkWK9D/pN/nRDs1SY3PPAAAAAElFTkSuQmCC"); background-size: 42px 131px; background-position: 87px 0px; }

/*
  0-9%  breathe  |  9-14% wind-up  |  14-46% burst+settle
  46-62% float   |  62-74% arc     |  74-87% snap+flash  |  87-100% rest
  Stagger: p2 leads, then p3 (+0.06s), then p1 (+0.12s) — ripple from centre out
*/
.p1 { animation: ap1 6s linear infinite 0.12s; }
.p2 { animation: ap2 6s linear infinite; }
.p3 { animation: ap3 6s linear infinite 0.06s; }

@keyframes ap1 {
  /* breathe */
  0%   { animation-timing-function: ease-in-out;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  4%   { animation-timing-function: ease-in-out;
         transform: translate(0,0) rotate(0deg) scale(1.02);
         filter: brightness(1.08) drop-shadow(0 0 5px rgba(0,232,194,.2)); }
  9%   { animation-timing-function: ease-in;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  /* wind-up */
  14%  { animation-timing-function: cubic-bezier(0.1,0.85,0.25,1);
         transform: translate(4px,5px) rotate(3deg) scale(0.90);
         filter: brightness(0.84) drop-shadow(0 0 0px transparent); }
  /* burst overshoot → settle */
  42%  { animation-timing-function: ease-out;
         transform: translate(-34px,-29px) rotate(-26deg) scale(1.15);
         filter: brightness(2.1) drop-shadow(0 0 22px rgba(0,232,194,1)); }
  46%  { animation-timing-function: ease-in-out;
         transform: translate(-22px,-20px) rotate(-18deg) scale(1.08);
         filter: brightness(1.70) drop-shadow(0 0 14px rgba(0,232,194,.85)); }
  /* float breathe */
  55%  { animation-timing-function: ease-in-out;
         transform: translate(-25px,-23px) rotate(-20deg) scale(1.12);
         filter: brightness(1.90) drop-shadow(0 0 18px rgba(0,232,194,.95)); }
  62%  { animation-timing-function: cubic-bezier(0.4,0,0.6,1);
         transform: translate(-22px,-20px) rotate(-18deg) scale(1.08);
         filter: brightness(1.70) drop-shadow(0 0 14px rgba(0,232,194,.85)); }
  /* arc peak — sweeps up and inward */
  73%  { animation-timing-function: cubic-bezier(0.6,0,0.4,1);
         transform: translate(-5px,-37px) rotate(5deg) scale(1.04);
         filter: brightness(1.30) drop-shadow(0 0 8px rgba(0,232,194,.5)); }
  /* snap overshoot below centre */
  79%  { animation-timing-function: ease-out;
         transform: translate(3px,5px) rotate(-3deg) scale(1.05);
         filter: brightness(1.15) drop-shadow(0 0 5px rgba(0,232,194,.3)); }
  83%  { animation-timing-function: ease-in-out;
         transform: translate(-1px,-1px) rotate(0.5deg) scale(1.01);
         filter: brightness(1.04) drop-shadow(0 0 0px transparent); }
  /* reassembly flash */
  87%  { animation-timing-function: ease-out;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(2.20) drop-shadow(0 0 16px rgba(0,232,194,.85)); }
  91%  { transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  100% { transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
}

@keyframes ap2 {
  0%   { animation-timing-function: ease-in-out;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  4%   { animation-timing-function: ease-in-out;
         transform: translate(0,0) rotate(0deg) scale(1.025);
         filter: brightness(1.09) drop-shadow(0 0 6px rgba(0,196,166,.22)); }
  9%   { animation-timing-function: ease-in;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  14%  { animation-timing-function: cubic-bezier(0.1,0.85,0.25,1);
         transform: translate(0,6px) rotate(0deg) scale(0.90);
         filter: brightness(0.84) drop-shadow(0 0 0px transparent); }
  42%  { animation-timing-function: ease-out;
         transform: translate(0,-39px) rotate(0deg) scale(1.17);
         filter: brightness(2.1) drop-shadow(0 0 22px rgba(0,196,166,1)); }
  46%  { animation-timing-function: ease-in-out;
         transform: translate(0,-30px) rotate(0deg) scale(1.10);
         filter: brightness(1.70) drop-shadow(0 0 14px rgba(0,196,166,.85)); }
  55%  { animation-timing-function: ease-in-out;
         transform: translate(0,-34px) rotate(0deg) scale(1.14);
         filter: brightness(1.90) drop-shadow(0 0 18px rgba(0,196,166,.95)); }
  62%  { animation-timing-function: cubic-bezier(0.4,0,0.6,1);
         transform: translate(0,-30px) rotate(0deg) scale(1.10);
         filter: brightness(1.70) drop-shadow(0 0 14px rgba(0,196,166,.85)); }
  73%  { animation-timing-function: cubic-bezier(0.6,0,0.4,1);
         transform: translate(0,-43px) rotate(0deg) scale(1.04);
         filter: brightness(1.30) drop-shadow(0 0 8px rgba(0,196,166,.5)); }
  79%  { animation-timing-function: ease-out;
         transform: translate(0,6px) rotate(0deg) scale(1.06);
         filter: brightness(1.15) drop-shadow(0 0 5px rgba(0,196,166,.3)); }
  83%  { animation-timing-function: ease-in-out;
         transform: translate(0,-1px) rotate(0deg) scale(1.01);
         filter: brightness(1.04) drop-shadow(0 0 0px transparent); }
  87%  { animation-timing-function: ease-out;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(2.20) drop-shadow(0 0 16px rgba(0,196,166,.85)); }
  91%  { transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  100% { transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
}

@keyframes ap3 {
  0%   { animation-timing-function: ease-in-out;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  4%   { animation-timing-function: ease-in-out;
         transform: translate(0,0) rotate(0deg) scale(1.02);
         filter: brightness(1.08) drop-shadow(0 0 5px rgba(0,150,136,.2)); }
  9%   { animation-timing-function: ease-in;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  14%  { animation-timing-function: cubic-bezier(0.1,0.85,0.25,1);
         transform: translate(-4px,5px) rotate(-3deg) scale(0.90);
         filter: brightness(0.84) drop-shadow(0 0 0px transparent); }
  42%  { animation-timing-function: ease-out;
         transform: translate(34px,-26px) rotate(26deg) scale(1.15);
         filter: brightness(2.1) drop-shadow(0 0 22px rgba(0,150,136,1)); }
  46%  { animation-timing-function: ease-in-out;
         transform: translate(22px,-18px) rotate(18deg) scale(1.08);
         filter: brightness(1.70) drop-shadow(0 0 14px rgba(0,150,136,.9)); }
  55%  { animation-timing-function: ease-in-out;
         transform: translate(25px,-21px) rotate(20deg) scale(1.12);
         filter: brightness(1.90) drop-shadow(0 0 18px rgba(0,150,136,.95)); }
  62%  { animation-timing-function: cubic-bezier(0.4,0,0.6,1);
         transform: translate(22px,-18px) rotate(18deg) scale(1.08);
         filter: brightness(1.70) drop-shadow(0 0 14px rgba(0,150,136,.9)); }
  73%  { animation-timing-function: cubic-bezier(0.6,0,0.4,1);
         transform: translate(5px,-35px) rotate(-5deg) scale(1.04);
         filter: brightness(1.30) drop-shadow(0 0 8px rgba(0,150,136,.5)); }
  79%  { animation-timing-function: ease-out;
         transform: translate(-3px,5px) rotate(3deg) scale(1.05);
         filter: brightness(1.15) drop-shadow(0 0 5px rgba(0,150,136,.3)); }
  83%  { animation-timing-function: ease-in-out;
         transform: translate(1px,-1px) rotate(-0.5deg) scale(1.01);
         filter: brightness(1.04) drop-shadow(0 0 0px transparent); }
  87%  { animation-timing-function: ease-out;
         transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(2.20) drop-shadow(0 0 16px rgba(0,150,136,.85)); }
  91%  { transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
  100% { transform: translate(0,0) rotate(0deg) scale(1);
         filter: brightness(1) drop-shadow(0 0 0px transparent); }
}

.logo-text {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 78px;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1;
  background: linear-gradient(90deg, #fff 20%, #00F5A0 50%, #fff 80%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 6s ease-in-out infinite;
}

@keyframes textShimmer {
  0%, 9%    { animation-timing-function: ease-in; background-position: 150% center; }
  44%        { animation-timing-function: ease-in-out; background-position: -50% center; }
  62%        { animation-timing-function: cubic-bezier(0.4,0,0.6,1); background-position: -50% center; }
  87%        { animation-timing-function: ease-out; background-position: 150% center; }
  91%,100%   { background-position: 150% center; }
}

/* Werkt ook met <span>-markup (inline → block forceren voor de afmetingen). */
.logo-mark{display:block}
/* Eén keer afspelen (navigatie) i.p.v. oneindig — minder afleidend. */
.logo-mark.once .p1,.logo-mark.once .p2,.logo-mark.once .p3{animation-iteration-count:1}
/* Compacte variant voor de zijbalk: schaal de hele mark in een clippende
   wrapper, zodat de losse px-achtergronden correct meeschalen. */
.logo-mark-wrap{display:inline-block;width:40px;height:42px;flex-shrink:0}
.logo-mark-wrap .logo-mark{transform:scale(.30);transform-origin:top left}
/* Zijbalk-merk (donkere achtergrond): geanimeerd symbool + woordmerk.
   Verbergt netjes bij het inklappen van de sidebar (.rail). */
.erp-root .brand .brand-anim.full{display:flex;align-items:center;gap:10px}
.erp-root.rail .brand .brand-anim.full{display:none}
.brand-anim .brand-wm{font-size:18px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
/* Klantportaal-topbalk (lichte achtergrond): donker woordmerk. */
.portal-top .brand .brand-anim{display:flex;align-items:center;gap:9px}
.portal-top .brand .brand-anim .brand-wm{color:var(--ink,#0D1117)}

/* Toegankelijkheid: geen beweging bij voorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce){.pw,.logo-text{animation:none!important;filter:none!important}}