/* De compacte voettekst (13 okt 2026, ronde 2, naar joincellular.com en Timons vraag: enkel logo, socials,
   adres, BV, rechten, legal, taal). HTML: voet_html() in technisch/bouw.py, ook op de homepage-reel en de
   app-pagina's. Op zichzelf staand (laadt via een <link> in de voettekst zelf), dus zonder site.css te
   veronderstellen. Kleuren en letters uit tokens.json: charcoal, ivory, ivorydof, goud, Cal Sans, Manrope.
   Beeld: het logo met de gouden lijngrafiek die zich tekent (zoals in de balk), daarachter een zacht datanetwerk
   en, heel laag in contrast, de plate man die traint (video laadt pas als de voet in beeld komt). */

.voet {
  --v-ivory: #F2E8DA; --v-ivorydof: #ADA79C; --v-goud: #D3B27E; --v-charcoal: #1A1A1A;
  position: relative; overflow: hidden; isolation: isolate; background: var(--v-charcoal); color: var(--v-ivorydof);
  font-family: "Manrope", system-ui, sans-serif; font-size: 13px; line-height: 1.5; padding: 0;
  border-top: 0;
}
footer:has(> .voet) { padding: 0; background: transparent; }
/* Zachte overgang van de pagina naar de voet (Timon, 13 okt 2026): de brug ligt over de onderste rand van wat eraan
   voorafgaat (negatieve marge, geen klikken) en loopt van doorzichtig naar het charcoal van de voet. Zo vertrekt hij
   altijd van de echte achtergrond erboven, licht of donker, met korrel of video, op elke pagina en zonder script.
   Daaronder komt de duinvideo uit het donker op (mask op de video). */
.voet-brug { position: relative; z-index: 1; height: 150px; margin-top: -150px; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.28) 40%, rgba(26,26,26,.78) 75%, #1A1A1A 100%); }
@media (max-width: 767px) { .voet-brug { height: 110px; margin-top: -110px; } }
.voet *, .voet *::before, .voet *::after { box-sizing: border-box; }
.voet a { color: inherit; }
.voet .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* achtergrond: de plate man rechts, zacht en zonder kleur; het datanetwerk over de hele breedte */
.voet-achter { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.voet-plateman { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  opacity: 0; filter: saturate(.55) contrast(.95); transition: opacity 1.6s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%); }
.voet-plateman.klaar { opacity: .3; }
.voet-achter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.75), rgba(26,26,26,.45) 50%, rgba(26,26,26,.8)); }
.voet-net { display: none; }
.voet-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.voet-net line { stroke: var(--v-goud); stroke-width: .6; stroke-opacity: .28; stroke-dasharray: 1; stroke-dashoffset: 1; }
.voet-net circle { fill: var(--v-goud); fill-opacity: .55; }
.voet.in-beeld .voet-net line { animation: voet-lijn 2.4s cubic-bezier(.4,0,.2,1) forwards; }
.voet.in-beeld .voet-net circle { animation: voet-punt 5s ease-in-out infinite; }
.voet-net line:nth-child(2n) { animation-delay: .5s; } .voet-net line:nth-child(3n) { animation-delay: .9s; } .voet-net line:nth-child(5n) { animation-delay: 1.3s; }
.voet-net circle:nth-child(2n) { animation-delay: -1.7s; } .voet-net circle:nth-child(3n) { animation-delay: -3.1s; }
@keyframes voet-lijn { to { stroke-dashoffset: 0; } }
@keyframes voet-punt { 0%, 100% { fill-opacity: .25; } 50% { fill-opacity: .8; } }

.voet-in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 56px clamp(20px, 5vw, 64px) 28px; }

/* bovenaan: het logo met de lijngrafiek links, de socials en het adres rechts */
/* ordening zoals Cellular (Timon, ronde 5): de naam bovenaan, daaronder links het merkblok (identiteit met de socials eronder)
   en rechts de drie linkkolommen, dan de logostrook en de onderrij. */
.voet-top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); gap: 24px 64px; align-items: start; padding: 0 0 36px; }
.voet-merk { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--v-ivory); }
.voet-merk img { height: 48px; width: auto; display: block; }
.voet-grafiek { width: 150px; height: 32px; overflow: visible; flex: none; }
.voet-grafiek path { fill: none; stroke: var(--v-goud); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.voet-grafiek circle { fill: var(--v-goud); offset-path: path("M0 34 C 30 33, 50 30, 70 27 S 110 24, 130 18 S 170 14, 200 8 S 225 4, 240 3"); opacity: 0; }
.voet.in-beeld .voet-grafiek path { animation: balk-grafiek 6s cubic-bezier(.4,0,.2,1) infinite; }
.voet.in-beeld .voet-grafiek circle { animation: balk-grafiekpunt 6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes balk-grafiek { 0% { stroke-dashoffset: 1; opacity: 0 } 8% { opacity: 1 } 60% { stroke-dashoffset: 0; opacity: 1 } 88% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes balk-grafiekpunt { 0% { offset-distance: 0%; opacity: 0 } 8% { opacity: 1 } 60% { offset-distance: 100%; opacity: 1 } 88% { offset-distance: 100%; opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
.voet-id { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
.voet-socials { display: flex; gap: 6px; }
.voet-socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(242,232,218,.16); color: var(--v-ivory); transition: background .2s, border-color .2s; }
.voet-socials a:hover { background: rgba(242,232,218,.08); border-color: rgba(242,232,218,.4); }
.voet-socials svg { width: 15px; height: 15px; }
.voet .voet-adres, .voet .voet-copy, .voet .voet-credit { margin: 0; color: var(--v-ivorydof); }
.voet-adres { font-size: 12.5px; }
.voet-adres b { font-weight: 600; color: var(--v-ivory); }

/* korte linkkolommen */
.voet-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; padding: 0; }
.voet-kolommen h5 { margin: 0 0 8px; font: 500 11px/1.3 "Manrope", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,232,218,.55); }
.voet-kolommen a { display: block; padding: 3px 0; font-size: 13.5px; color: var(--v-ivory); text-decoration: none; opacity: .82; }
.voet-kolommen a:hover { opacity: 1; color: var(--v-goud); }
@media (max-width: 480px) { .voet-kolommen { gap: 18px 16px; } .voet-kolommen a { font-size: 13px; } }

/* de Trusted-strook, klein en zonder kop: één rij logo's op 60 procent */
.voet .trusted { padding: 18px 0; border-top: 1px solid rgba(242,232,218,.08); border-bottom: 1px solid rgba(242,232,218,.08); }
.voet .trusted .trusted-kop { display: none; }
.voet .trusted .trusted-baan { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.voet .trusted .trusted-spoor { display: flex; align-items: center; width: max-content; animation: voet-trusted 36s linear infinite; }
.voet .trusted .trusted-spoor .dubbel { display: contents; }
.voet .trusted .trusted-baan:hover .trusted-spoor { animation-play-state: paused; }
@keyframes voet-trusted { to { transform: translateX(-50%); } }
.voet .trusted .trusted-logo { display: flex; align-items: center; margin-right: 44px; text-decoration: none; opacity: .38; transition: opacity .2s; }
.voet .trusted .trusted-logo:hover { opacity: .8; }
.voet .trusted .trusted-logo img { height: 20px; width: auto; max-width: 110px; object-fit: contain; filter: brightness(0) invert(1); }
.voet .trusted .trusted-logo.kleur img { filter: grayscale(1) brightness(1.3); height: 28px; }
.voet .trusted .trusted-tekst { font-family: Georgia, "Times New Roman", serif; font-size: 15px; letter-spacing: .03em; color: #fff; white-space: nowrap; }

/* de naam groot, over bijna de volle breedte: de letters tekenen zich als lijnen, de datapunten eromheen lichten
   op en doven, dan vult de naam zich. Eén keer bij in beeld komen. */
.voet-naam { position: relative; display: block; margin: 0 0 40px; text-decoration: none; color: var(--v-ivory); }
.voet-naam svg { width: 100%; height: auto; display: block; overflow: visible; }
.voet-naam text { font-family: "Cal Sans", system-ui, sans-serif; font-size: 150px; letter-spacing: -.02em; paint-order: stroke; }
.voet-naam-vul { fill: var(--v-ivory); fill-opacity: 0; stroke: var(--v-goud); stroke-width: 1.2; stroke-opacity: .9; stroke-dasharray: 520; stroke-dashoffset: 520; }
.voet.in-beeld .voet-naam-vul { animation: voet-naam-lijn 2.8s cubic-bezier(.4,0,.2,1) forwards, voet-naam-vul 1.6s ease 2.2s forwards; }
@keyframes voet-naam-lijn { to { stroke-dashoffset: 0; } }
@keyframes voet-naam-vul { to { fill-opacity: .92; stroke-opacity: 0; } }
/* de datastroom: dunne streepjes die traag langs de contouren lopen, pas na het vullen */
.voet-naam-stroom { fill: none; stroke: var(--v-goud); stroke-width: 1; stroke-dasharray: 3 22; stroke-opacity: 0; }
.voet.in-beeld .voet-naam-stroom { animation: voet-stroom-aan 1.4s ease 3.4s forwards, voet-stroom 14s linear 3.4s infinite; }
@keyframes voet-stroom-aan { to { stroke-opacity: .55; } }
@keyframes voet-stroom { to { stroke-dashoffset: -500; } }
@media (max-width: 767px) { .voet-naam { margin: 0 0 28px; } }

/* onderaan: rechten, legal, taal met vlag, credit */
.voet-onder { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-top: 18px; font-size: 12px; }
.voet-copy { margin: 0; }
.voet-links { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.voet-links a, .voet-links button { font: inherit; color: var(--v-ivorydof); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(242,232,218,.16); }
.voet-links a:hover, .voet-links button:hover { color: var(--v-ivory); border-bottom-color: rgba(242,232,218,.5); }
.voet-taal { display: inline-flex; gap: 2px; border: 1px solid rgba(242,232,218,.14); border-radius: 999px; padding: 3px; }
.voet-taal a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; text-decoration: none; color: var(--v-ivorydof); font-weight: 600; letter-spacing: .06em; font-size: 11px; }
.voet-taal a[aria-current] { background: rgba(242,232,218,.1); color: var(--v-ivory); }
.voet-taal a:hover { color: var(--v-ivory); }
.voet-taal .vlag { width: 16px; height: 11px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(242,232,218,.25); }
.voet-taal a:not([aria-current]) .vlag { opacity: .7; }
.voet-credit { flex-basis: 100%; text-align: center; margin-top: 6px; font-size: 11.5px; position: relative; display: inline-block; }
.voet-credit a { color: var(--v-ivory); text-decoration: none; border-bottom: 1px solid rgba(242,232,218,.3); }
.voet-credit .credit-hartjes { position: relative; display: inline-block; width: 22px; height: 14px; margin-left: 4px; vertical-align: middle; color: var(--v-goud); }
.voet-credit .credit-hartjes svg { position: absolute; left: 4px; bottom: 0; opacity: 0; animation: voet-hart 3.2s ease-in-out infinite; }
.voet-credit .credit-hartjes svg:nth-child(2) { left: 10px; animation-delay: .8s; } .voet-credit .credit-hartjes svg:nth-child(3) { left: 0; animation-delay: 1.6s; } .voet-credit .credit-hartjes svg:nth-child(4) { left: 12px; animation-delay: 2.4s; }
@keyframes voet-hart { 0% { transform: translateY(0) scale(.6); opacity: 0 } 20% { opacity: .9 } 100% { transform: translateY(-18px) scale(1); opacity: 0 } }
.voet a:focus-visible, .voet button:focus-visible { outline: 2px solid var(--v-goud); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 767px) {
  .voet-in { padding: 44px 20px 24px; }
  .voet-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
  .voet-plateman.klaar { opacity: .24; }
  .voet-onder { flex-direction: column; align-items: flex-start; gap: 12px; }
  .voet-credit { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .voet.in-beeld .voet-net line, .voet.in-beeld .voet-net circle, .voet.in-beeld .voet-grafiek path, .voet.in-beeld .voet-grafiek circle,
  .voet .trusted .trusted-spoor, .voet-credit .credit-hartjes svg { animation: none; }
  .voet-net line { stroke-dashoffset: 0; } .voet-grafiek path { stroke-dashoffset: 0; } .voet-grafiek circle { offset-distance: 100%; opacity: 1; }
  .voet.in-beeld .voet-naam-vul, .voet.in-beeld .voet-naam-stroom { animation: none; }
  .voet-naam-vul { stroke-dashoffset: 0; fill-opacity: .92; stroke-opacity: 0; } .voet-naam-stroom { stroke-opacity: .35; }
  .voet-credit .credit-hartjes svg { opacity: .8; transform: none; }
  .voet .trusted .trusted-baan { overflow-x: auto; }
}