/* ═══════════════════════════════════════════════════════════════════════════
   EFFECTEN — extra laag bovenop style.css (en diensten.css / projects.css)
   voor alle publieke pagina's, samen met wow.js. Weglaten = site zoals voorheen.
   Kleuren komen uit de tokens van style.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Voortgangsbalk: een "stroomdraad" die volloopt tijdens het scrollen ─── */
.wow-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 2px;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--blue), var(--orange));
  box-shadow: 0 0 10px rgba(56,187,217,.8);
}

/* ─── Kop bovenaan: printplaat met stroompulsen en zwevende vonkjes ─── */
.wow-kop { position: relative; overflow: hidden; isolation: isolate; }
.wow-kop .hero-inner, .wow-kop .pg-hero-inner, .wow-kop .page-header-inner { position: relative; z-index: 2; }
.wow-kop .hero-scroll { z-index: 2; } /* positie blijft zoals in style.css */
.privacy-header.wow-kop > :not(.wow-circuit):not(.wow-sparks) { position: relative; z-index: 2; }

.wow-circuit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; animation: wow-fade-in 1.4s ease .2s forwards;
}
.wow-circuit .trace { fill: none; stroke: rgba(56,187,217,.10); stroke-width: 1.2; }
.wow-circuit .node  { fill: var(--dark); stroke: rgba(56,187,217,.35); stroke-width: 1.2; }
.wow-circuit .pulse { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.wow-circuit .pulse.b { stroke: var(--blue);   filter: drop-shadow(0 0 5px var(--blue)); }
.wow-circuit .pulse.o { stroke: var(--orange); filter: drop-shadow(0 0 5px var(--orange)); }
@keyframes wow-fade-in { to { opacity: 1; } }

.wow-sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* het pictogram rechts op de dienstpagina's licht zacht op, zoals een knooppunt */
.wow-kop .pg-hero-icon { box-shadow: 0 0 40px -8px currentColor; }

/* ─── Titel: woorden schuiven omhoog, het gekleurde woord gaat aan als een tl-lamp ─── */
.wow-words .w {
  display: inline-block;
  opacity: 0; transform: translateY(40%); filter: blur(8px);
  animation: wow-word-in .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(.15s + var(--i) * .12s);
}
@keyframes wow-word-in { to { opacity: 1; transform: none; filter: none; } }

/* padding onderaan zodat de kleurverloop-achtergrond ook de staart van de g bedekt;
   de negatieve marge houdt de regelhoogte gelijk */
.wow-neon { position: relative; display: inline-block; padding-bottom: .15em; margin-bottom: -.15em; animation: wow-flicker 1.5s steps(1) .55s both; }
.wow-neon::after {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: -1;
  background: inherit; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(22px); opacity: .5;
  animation: wow-glow 8s ease-in-out 2.2s infinite;
}
@keyframes wow-flicker {
  0%   { opacity: .06; } 8%  { opacity: 1; } 11% { opacity: .12; }
  19%  { opacity: 1; }   22% { opacity: .3; } 38% { opacity: 1; }
  41%  { opacity: .55; } 44%, 100% { opacity: 1; }
}
@keyframes wow-glow { 0%, 100% { opacity: .45; } 50% { opacity: .6; } }

/* ─── Kaarten: lichte kanteling + een rand die oplicht waar de muis is ───
   Plat getekend (geen preserve-3d): in echte 3D liep het licht door de kaart
   (vage bol) en verdwenen de pictogrammen tijdens het bewegen. */
.wow-tilt { transition: transform .25s ease; }
.wow-glow { position: relative; }
.feat-card.wow-glow { overflow: hidden; }
.wow-glow::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(56,187,217,.95), rgba(243,101,27,.55) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.wow-glow:hover::after, .wow-glow:focus-visible::after { opacity: 1; }
.service-icon, .feat-icon { transition: box-shadow .3s; }
.service-card.wow-glow:hover .service-icon,
.feat-card.wow-glow:hover .feat-icon { box-shadow: 0 0 22px currentColor; }

/* Secties komen wazig → scherp binnen (bovenop de bestaande .reveal) */
.reveal { filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.reveal.visible { filter: none; }

/* ─── WERKGEBIED: radar rond Bornem ─── */
.wow-radar { width: min(440px, 100%); margin: 2.5rem auto 0; aspect-ratio: 480 / 400; } /* = viewBox, geen lege rand */
.wow-radar svg { width: 100%; height: 100%; overflow: visible; }
.wow-radar .ring  { fill: none; stroke: rgba(56,187,217,.16); stroke-dasharray: 3 5; }
.wow-radar .axis  { stroke: rgba(56,187,217,.08); }
.wow-radar .sweep { transform-origin: 200px 200px; animation: wow-spin 5s linear infinite; }
.wow-radar .dot   { fill: var(--blue); }
.wow-radar .ping  {
  fill: none; stroke: var(--blue); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: wow-ping 5s ease-out infinite; animation-delay: var(--d, 0s); opacity: 0;
}
.wow-radar .home      { fill: var(--orange); }
.wow-radar .home-ping { stroke: var(--orange); animation-duration: 2.5s; animation-delay: 0s; }
.wow-radar text { fill: var(--gray-light); font: 600 11px Inter, sans-serif; }
.wow-radar text.home-label { fill: var(--white); font-weight: 800; font-size: 13px; }
@media (max-width: 600px) {
  .wow-radar text { font-size: 14px; }
  .wow-radar text.home-label { font-size: 16px; }
}
/* Desktop: tekst links, grotere radar rechts */
@media (min-width: 1001px) {
  .wow-werkgebied {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 3rem; align-items: center; text-align: left;
  }
  .wow-werkgebied .section-sub { margin: 0; }
  .wow-werkgebied .wow-radar { width: 100%; max-width: 600px; margin: 0 0 0 auto; }
}
@keyframes wow-spin { to { transform: rotate(360deg); } }
@keyframes wow-ping {
  0%   { opacity: .9; transform: scale(1); }
  30%  { opacity: 0;  transform: scale(4.5); }
  100% { opacity: 0;  transform: scale(4.5); }
}

/* ─── "Klaar om te starten?": licht gaat aan als het blok in beeld komt ─── */
#cta .cta-inner, .cta-bar { position: relative; overflow: hidden; transition: border-color .6s, box-shadow .6s; }
#cta .cta-inner > :not(.wow-bulb), .cta-bar > :not(.wow-bulb) { position: relative; z-index: 1; }
.wow-bulb {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -260px; width: 760px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,190,120,.30), rgba(243,101,27,.10) 55%, transparent);
  opacity: 0; transition: opacity .25s;
}
.wow-lit .wow-bulb { opacity: 1; animation: wow-flicker 1s steps(1) both; }
#cta .cta-inner.wow-lit, .cta-bar.wow-lit { border-color: rgba(243,101,27,.45); box-shadow: 0 0 80px rgba(243,101,27,.18); }
.wow-lit h2, .wow-lit h3 { text-shadow: 0 0 28px rgba(255,190,120,.45); }

/* ─── Minder beweging: alles stil, inhoud gewoon zichtbaar ─── */
@media (prefers-reduced-motion: reduce) {
  .wow-circuit, .wow-neon, .wow-words .w { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .wow-neon::after, .wow-radar .sweep, .wow-radar .ping, .wow-lit .wow-bulb { animation: none !important; }
  .wow-sparks { display: none; }
  .reveal { filter: none; }
}