/* zoeblom.nl — sitelaag bovenop het designsysteem: navigatie zonder kader, sfeerlagen en ademende gloed. */
nav[aria-label="Hoofdnavigatie"] a{font-family:var(--font-kop)!important;font-weight:var(--gewicht-kop)!important;font-size:var(--fs--1)!important;letter-spacing:.09em!important;text-transform:uppercase}
nav[aria-label="Hoofdnavigatie"] ul{gap:var(--sp-2) var(--sp-8)!important}
.zb-kop{position:relative;overflow:hidden;background:var(--nacht);isolation:isolate}
.zb-kop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.zb-nevel{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1;mix-blend-mode:screen}
.zb-nevel-a{width:60vw;height:60vw;max-width:900px;max-height:900px;left:45%;top:-10%;background:radial-gradient(circle,rgba(94,44,129,.55) 0%,transparent 62%);animation:zb-drijf-a 46s ease-in-out infinite alternate}
.zb-nevel-b{width:46vw;height:46vw;max-width:700px;max-height:700px;left:-12%;bottom:-30%;background:radial-gradient(circle,rgba(74,159,219,.28) 0%,transparent 62%);animation:zb-drijf-b 58s ease-in-out infinite alternate}
.zb-sluier{position:absolute;inset:0;z-index:2;pointer-events:none}
.zb-ster{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFF0C8;box-shadow:0 0 8px 2px rgba(246,206,106,.55);z-index:2;animation:zb-flonker 4s ease-in-out infinite alternate}
.zb-binnen{position:relative;z-index:3;max-width:var(--pagina-max);margin:0 auto;padding:var(--sp-6) var(--pagina-marge) 0}
.zb-opkomen{animation:zb-opkomen 1.3s var(--soepel,cubic-bezier(.2,.7,.2,1)) both}
.zb-portaal{position:relative;display:flex;justify-content:center;align-items:center;perspective:1400px}
.zb-aura{position:absolute;width:150%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(232,168,44,.5) 0%,rgba(212,125,13,.22) 32%,rgba(94,44,129,.18) 52%,transparent 70%);filter:blur(10px);animation:zb-ontwaken 1.8s var(--soepel) both,zb-adem 7s 1.8s ease-in-out infinite alternate;pointer-events:none}
.zb-ring{position:absolute;width:128%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(232,168,44,.28);mask:conic-gradient(from 0deg,transparent 0 12%,#000 30% 70%,transparent 88% 100%);-webkit-mask:conic-gradient(from 0deg,transparent 0 12%,#000 30% 70%,transparent 88% 100%);animation:zb-draai 70s linear infinite;pointer-events:none}
.zb-ring-2{width:112%;border-color:rgba(246,206,106,.18);animation-direction:reverse;animation-duration:95s}
.zb-boek{transform:rotateY(-12deg) rotateX(3deg);transition:transform .7s var(--soepel,ease);animation:zb-zweef 9s 1.8s ease-in-out infinite alternate;will-change:transform}
.zb-portaal:hover .zb-boek{transform:rotateY(0) rotateX(0)}
.zb-drempel{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;height:var(--sp-12)}
.zb-drempel::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:var(--lijn)}
.zb-drempel>*{position:relative;background:var(--nacht);padding:0 var(--sp-4)}
.zb-deuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-8)}
.zb-deur+.zb-deur{border-top:var(--lijn);padding-top:var(--sp-6)}
@media (min-width:900px){.zb-deur+.zb-deur{border-top:none;border-left:var(--lijn);padding:0 0 0 var(--sp-8)}}
@keyframes zb-adem{from{opacity:.72;transform:scale(1)}to{opacity:1;transform:scale(1.07)}}
@keyframes zb-zweef{from{translate:0 0}to{translate:0 -12px}}
@keyframes zb-draai{to{rotate:360deg}}
@keyframes zb-flonker{from{opacity:.15;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes zb-drijf-a{to{transform:translate(-8%,10%)}}
@keyframes zb-drijf-b{to{transform:translate(14%,-12%)}}
@keyframes zb-opkomen{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.zb-nevel,.zb-ster,.zb-aura,.zb-ring,.zb-boek,.zb-opkomen{animation:none!important}.zb-boek{transform:none}}
/* Tijdelijke toegangspoort (toegang.js) */
.zb-dicht #root{display:none}
#zb-poort{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-6);background:radial-gradient(circle at 12% 18%,rgba(255,240,200,.9) 0 1px,transparent 2px),radial-gradient(circle at 78% 26%,rgba(255,240,200,.8) 0 1px,transparent 2px),radial-gradient(circle at 34% 72%,rgba(255,240,200,.7) 0 1px,transparent 2px),radial-gradient(circle at 62% 84%,rgba(255,240,200,.75) 0 1px,transparent 2px),radial-gradient(circle at 90% 68%,rgba(255,240,200,.7) 0 1px,transparent 2px),var(--nevel-hero),var(--verloop-nacht)}
.zb-poort-kader{width:100%;max-width:440px;border:var(--lijn-kader);border-radius:var(--r-kader);background:var(--vlak-kader);padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.zb-poort-merk{font-family:var(--font-wordmark);font-weight:var(--gewicht-wordmark);font-size:var(--fs-3);letter-spacing:var(--spatie-wordmark);line-height:1;padding-top:.12em;margin:0 0 var(--sp-2);background:var(--verloop-wordmark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--goud)}
.zb-poort-tekst{margin:0 0 var(--sp-4);color:var(--tekst-zacht)}
.zb-poort-kader label{color:var(--tekst)}
.zb-poort-kader input{font:inherit;color:var(--tekst);background:var(--vlak-veld);border:var(--lijn-veld);border-radius:var(--r-pil);padding:.6em 1.1em;min-height:var(--raakvlak-min);width:100%}
.zb-poort-kader input:focus{outline:var(--focus-ring);outline-offset:2px;border-color:var(--rand-sterk)}
.zb-poort-kader input[aria-invalid]{border-color:var(--fout)}
.zb-poort-fout{margin:0;font-size:var(--fs--1);color:var(--fout-tekst)}
.zb-poort-kader button{align-self:flex-start;margin-top:var(--sp-2);min-height:var(--raakvlak-min);padding:.7em 1.5em;border-radius:var(--r-pil);border:2px solid var(--actie);background:var(--actie);color:var(--tekst-op-goud);font-family:var(--font-kop);font-weight:var(--gewicht-kop);font-size:var(--fs--1);letter-spacing:var(--spatie-knop);cursor:pointer;transition:background var(--duur-hover),box-shadow var(--duur-hover)}
.zb-poort-kader button:hover{background:var(--actie-hover);border-color:var(--actie-hover);box-shadow:var(--gloed-goud)}