/* Waterplein — centrale motion-laag.
   Eén plek voor timing, easing en alle effecten. Ontwerp en lay-out staan in styles.css en editorial.css.
   Principes: alleen transform en opacity animeren, inhoud is altijd zichtbaar zonder JavaScript,
   doorlopende beweging alleen in de hero (pauzeerbaar, stopt buiten beeld), en prefers-reduced-motion geeft een rustige site. */

:root{
 --ease-out:cubic-bezier(.16,1,.3,1);      /* zachte uitloop voor reveals en entrees */
 --ease-std:cubic-bezier(.2,.7,.2,1);      /* hovers en micro-interacties */
 --dur-fast:180ms;--dur-base:280ms;--dur-reveal:700ms;--dur-enter:900ms;
 --reveal-distance:16px;--stagger:70ms;
}
@media(max-width:760px){:root{--reveal-distance:10px;--dur-reveal:550ms}}

/* ---------- Header ------------------------------------------------------- */
.header{transition:box-shadow var(--dur-base) var(--ease-std),background-color var(--dur-base) var(--ease-std)}
.header.is-scrolled{box-shadow:0 6px 24px #102f400d}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .header.is-scrolled{background:#fffffff0;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
}

/* ---------- Scroll reveals ------------------------------------------------
   JS voegt .reveal (één blok) of .reveal-stagger (kinderen na elkaar) toe; zonder JS blijft alles zichtbaar. */
.motion-enabled .reveal,.motion-enabled .reveal-stagger>*{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.motion-enabled .reveal:not(.is-visible),.motion-enabled .reveal-stagger:not(.is-visible)>*{opacity:0;transform:translate3d(0,var(--reveal-distance),0)}
/* Na de reveal geen vertraging meer op hovers. */
.motion-enabled .reveal.is-settled,.motion-enabled .reveal-stagger.is-settled>*{transition-delay:0s}

/* Verbindingslijnen die zich uittekenen wanneer een groep in beeld komt. */
.company-directory,.hub-pairings{position:relative}
.motion-enabled .company-directory.reveal-stagger,.motion-enabled .hub-pairings.reveal-stagger{border-top-color:transparent}
.motion-enabled .company-directory.reveal-stagger::before,.motion-enabled .hub-pairings.reveal-stagger::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-strong);transform-origin:left center;transform:scaleX(0);transition:transform 1.2s var(--ease-out)}
.motion-enabled .hub-pairings.reveal-stagger::before{background:#ffffff35}
.motion-enabled .company-directory.is-visible::before,.motion-enabled .hub-pairings.is-visible::before{transform:none}

/* ---------- Hero: entree, ambient licht, verbindingsveld, diepte ------------ */
.hub-hero{position:relative;isolation:isolate;overflow:hidden}
.hub-hero>.wrap{position:relative;z-index:1}
.hub-hero::before{content:'';position:absolute;z-index:0;pointer-events:none;width:1100px;height:1100px;left:calc(50% - 620px);top:calc(62% - 550px);background:radial-gradient(closest-side,#5fb3c81f,#5fb3c80a 55%,transparent);transform:translate3d(0,0,0)}
.hub-hero-field{position:absolute;z-index:0;inset:0;pointer-events:none;overflow:hidden}
.hub-hero-field svg{position:absolute;left:50%;top:50%;width:2640px;max-width:none;height:640px;margin:-320px 0 0 -1320px;translate:0 var(--field-shift,0px)}
.field-line{fill:none;stroke:url(#hero-field-fade);stroke-width:1}
.field-pulse{fill:none;stroke:#9ee6f2;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:.045 .955;stroke-dashoffset:1;opacity:0}
/* Elke lijn eigen tempo en startpunt, zodat de pulsen nooit synchroon lopen. */
.field-pulses>:nth-child(1){--flow:9s;--flow-delay:-1s}.field-pulses>:nth-child(2){--flow:11s;--flow-delay:-6s}.field-pulses>:nth-child(3){--flow:10s;--flow-delay:-3.5s}
.field-pulses>:nth-child(4){--flow:8s;--flow-delay:-8s}.field-pulses>:nth-child(5){--flow:12s;--flow-delay:-4.5s}
.field-node{fill:#9ee6f2}
.field-ring{fill:none;stroke:#9ee6f2;stroke-width:1;opacity:.35;transform-box:fill-box;transform-origin:center}
@media(max-width:760px){.hub-hero-field,.hub-hero::before{display:none}}
.hub-hero-photo{overflow:hidden}
.hub-hero-photo>img{translate:0 var(--photo-shift,0px);scale:1.06}
.hub-hero-photo figcaption{position:relative;background:#163c4e}

.motion-enabled .hub-hero-copy>*{animation:enter-up var(--dur-enter) var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms + 60ms)}
.motion-enabled .hub-hero-copy>:nth-child(2){--i:1}.motion-enabled .hub-hero-copy>:nth-child(3){--i:2}
.motion-enabled .hub-hero-copy>:nth-child(4){--i:3}.motion-enabled .hub-hero-copy>:nth-child(n+5){--i:4}
.motion-enabled .hub-hero-photo{animation:enter-up 1.1s var(--ease-out) .15s both}
.motion-enabled .hub-hero-photo>img{animation:photo-settle 1.8s var(--ease-out) .15s both}
.motion-enabled .hub-hero-field{animation:fade-in 1.6s ease .3s both}
/* Snelkoppelingen direct onder de hero komen mee met de entree (CSS, dus geen flits bij laden). */
.motion-enabled .hub-index>a{animation:enter-up 700ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + 420ms)}
.hub-index>a:nth-child(2){--i:1}.hub-index>a:nth-child(3){--i:2}.hub-index>a:nth-child(4){--i:3}

/* Doorlopende beweging alleen op grotere schermen, alleen als de hero in beeld is en niet gepauzeerd. */
@media(min-width:761px){
 .motion-enabled .hub-hero::before{animation:light-drift 26s ease-in-out infinite alternate}
 .motion-enabled .field-pulse{animation:field-flow var(--flow,9s) linear infinite;animation-delay:var(--flow-delay,0s)}
 .motion-enabled .field-ring{animation:node-ring 4.5s var(--ease-out) infinite}
 .motion-enabled .hub-hero:not(.is-inview)::before,.motion-enabled .hub-hero:not(.is-inview) .hub-hero-field *{animation-play-state:paused}
}

/* Pauzeknop voor doorlopende beweging (WCAG 2.2.2). Alleen zichtbaar waar die beweging draait. */
/* Absoluut gepositioneerd onder de hero-tekst: verandert de hero-hoogte niet. */
.motion-control{position:absolute;left:0;bottom:6px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:#bad0d9;font:inherit;font-size:11px;letter-spacing:.02em;cursor:pointer}
.motion-control::before{content:'';width:9px;height:10px;border-inline:2px solid currentColor;box-sizing:border-box}
.motion-control[aria-pressed=true]::before{width:0;height:0;border:0;border-block:5px solid transparent;border-left:8px solid currentColor}
.motion-control:hover{color:#fff}
.motion-control:focus-visible{outline:3px solid #a7e0e8;outline-offset:4px}
@media(max-width:760px){.motion-control{display:none}}

/* ---------- Micro-interacties (alleen bij echte hover; op touch blijft alles direct leesbaar) ---------- */
.button{transition:background-color var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),box-shadow var(--dur-base) var(--ease-std),transform var(--dur-fast) var(--ease-std)}
.button svg,.text-link svg,.company-line-link svg,.hub-index svg,.hub-hero-photo a svg{transition:transform var(--dur-base) var(--ease-std)}
.route-answer,.org-dropdown{transform-origin:top center}
.motion-enabled .route[open] .route-answer{animation:answer-in 360ms var(--ease-out) both}
.motion-enabled .nav-organisations[open] .org-dropdown,.motion-enabled #navigation.is-open{animation:answer-in 240ms var(--ease-out) both}

@media(hover:hover) and (pointer:fine){
 .button:hover{box-shadow:0 10px 24px #102f401f}
 .button:active{transform:translateY(0);box-shadow:0 2px 8px #102f401a;transition-duration:60ms}
 .button:hover svg,.text-link:hover svg,.hub-hero-photo a:hover svg{transform:translate(2px,-2px)}

 /* Menu: rustige onderstreping i.p.v. vlakvulling. */
 #navigation>a:not(.button),.nav-organisations>summary{position:relative}
 @media(min-width:1101px){
  #navigation>a:not(.button):hover,.nav-organisations>summary:hover{background:transparent}
  #navigation>a:not(.button)::after,.nav-organisations>summary::after{content:'';position:absolute;left:var(--space-2);right:var(--space-2);bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-std)}
  #navigation>a:not(.button):hover::after,.nav-organisations>summary:hover::after{transform:scaleX(1)}
  #navigation>a[aria-current=page]::after{display:none}
 }

 /* Snelkoppelingen onder de hero. */
 .hub-index>a{position:relative;transition:background-color var(--dur-base) var(--ease-std)}
 .hub-index>a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--org,var(--accent));transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease-out)}
 .hub-index>a:hover::after{transform:scaleX(1)}
 .hub-index>a:hover svg{transform:translate(3px,-3px)}
 .hub-index-dot{transition:transform var(--dur-base) var(--ease-std)}
 .hub-index>a:hover .hub-index-dot{transform:scale(1.6)}

 /* Bedrijfsregels: vlak, accentlijn en een duidelijke overgang naar de CTA. */
 .company-line{position:relative;isolation:isolate}
 .company-line::before{content:'';position:absolute;z-index:-1;inset:0 -24px;background:var(--surface);opacity:0;transition:opacity var(--dur-base) var(--ease-std)}
 .company-line::after{content:'';position:absolute;left:-24px;top:24px;bottom:24px;width:2px;background:var(--org);transform:scaleY(0);transform-origin:top;transition:transform 420ms var(--ease-out)}
 .company-line:hover::before{opacity:1}
 .company-line:hover::after{transform:scaleY(1)}
 .company-line-id img{transition:transform var(--dur-base) var(--ease-std)}
 .company-line:hover .company-line-id img{transform:translateX(4px)}
 .company-line-link{position:relative}
 .company-line-link::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--org);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease-out)}
 .company-line:hover .company-line-link::after{transform:scaleX(1)}
 .company-line:hover .company-line-link svg{transform:translate(3px,-3px)}

 /* Kaarten op binnenpagina's: lichte lift en accentrand. */
 .company-card,.flow-link,a.org-level{transition:transform var(--dur-base) var(--ease-std),box-shadow var(--dur-base) var(--ease-std),border-color var(--dur-base) var(--ease-std)}
 .company-card:hover,.flow-link:hover,a.org-level:hover{transform:translateY(-3px);box-shadow:0 16px 36px #0b293914}
 .flow-link:hover{border-color:var(--org)}
 .project-card a:hover .project-image img{transform:scale(1.03)}
 .project-image img{transition:transform 900ms var(--ease-out)}
 .hub-entrance .button:hover{transform:translateY(-1px)}
}

/* ---------- Pauze, verborgen tabblad en reduced motion ------------------- */
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
.motion-paused .reveal,.motion-paused .reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important}

@keyframes enter-up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes photo-settle{from{scale:1.12}to{scale:1.06}}
@keyframes answer-in{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
@keyframes light-drift{from{transform:translate3d(-40px,-20px,0)}to{transform:translate3d(60px,30px,0) scale(1.08)}}
@keyframes field-flow{0%{stroke-dashoffset:1;opacity:0}8%{opacity:.7}85%{opacity:.7}100%{stroke-dashoffset:0;opacity:0}}
@keyframes node-ring{0%{transform:scale(1);opacity:.4}70%,100%{transform:scale(3.2);opacity:0}}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important}
 .hub-hero-photo>img{scale:1;translate:none}
 .hub-hero-field svg{translate:none}
 .motion-control{display:none}
}