/* Growetic · seizoensthema uit Growetic OS (hoort bij g-seizoen.js): de hero van de homepage en de rest van de website */
.sun{display:none}
.halo,.ring,.ring i{transition:background 1.2s var(--ease),border-color 1.2s var(--ease),box-shadow 1.2s var(--ease)}

/* sfeer: extra deeltjesvormen */
.p.sz-hart{clip-path:polygon(50% 100%,8% 58%,0 32%,6% 10%,24% 0,40% 4%,50% 16%,60% 4%,76% 0,94% 10%,100% 32%,92% 58%)}
.p.sz-ster{clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);animation-name:sz-twinkel;animation-timing-function:var(--ease);animation-direction:alternate}
@keyframes sz-twinkel{from{opacity:.15;transform:scale(.55) rotate(0)}to{opacity:1;transform:scale(1) rotate(45deg)}}
.sz-burst{position:absolute;width:0;height:0;animation:sz-burst 3.2s var(--ease) infinite}
.sz-burst i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--k);box-shadow:0 0 10px 2px var(--k);transform:rotate(var(--a)) translateY(0);animation:sz-vonk 3.2s var(--ease) infinite;animation-delay:inherit}
@keyframes sz-burst{0%,8%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes sz-vonk{0%,10%{transform:rotate(var(--a)) translateY(0) scale(.4)}70%{transform:rotate(var(--a)) translateY(-56px) scale(1)}100%{transform:rotate(var(--a)) translateY(-64px) scale(.3)}}

/* vorm: de seizoensvorm zweeft naast het logo, kleine echo's vervangen de glasscherfjes */
#shards.sz-vormen{position:absolute;inset:0;pointer-events:none}
.sz-vorm{position:absolute;aspect-ratio:1/1;animation:sz-zweef 8s var(--ease) infinite alternate}
.sz-vorm svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 18px var(--halo1)) drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.sz-groot{left:5%;top:5%;width:21%;animation-duration:9s}
.sz-klein{opacity:.7}
.sz-klein svg{filter:drop-shadow(0 0 10px var(--halo1))}
@keyframes sz-zweef{from{transform:translate3d(0,-6%,0) rotate(-6deg)}to{transform:translate3d(0,6%,0) rotate(6deg)}}
[data-thema=licht] .sz-vorm svg{filter:drop-shadow(0 8px 18px rgba(0,1,59,.18))}

/* accessoire op het logo (ankers zoals in het OS: viewBox 200×160, punt ax/ay komt op de top van het logo) */
.sz-acc{position:absolute;left:33%;top:35%;width:calc(42% * var(--aw));aspect-ratio:200/160;transform:translateZ(3px) translate(calc(var(--ax) * -1),calc(var(--ay) * -1)) rotate(var(--ar));transform-origin:var(--ax) var(--ay);pointer-events:none;z-index:2;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));animation:sz-in .9s var(--ease) both}
.sz-acc svg{display:block;width:100%;height:100%}
@keyframes sz-in{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}

/* actie-chip */
#sz-chip{display:contents}
#sz-chip[hidden]{display:none}
.sz-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 16px 8px 8px;border-radius:999px;font-size:14px;line-height:1.35;color:var(--ink);text-decoration:none;box-shadow:inset 0 1px 0 rgba(var(--w),.14),0 0 0 1px var(--ring),0 10px 30px -12px var(--halo1);transition:transform .5s var(--ease),box-shadow .5s var(--ease);animation:sz-in .9s var(--ease) both}
a.sz-chip:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(var(--w),.18),0 0 0 1px var(--acc),0 16px 36px -12px var(--halo1)}
.sz-chip-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--acc);background:rgba(var(--w),.08);box-shadow:0 0 16px -2px var(--halo1)}
.sz-chip-ic svg{width:16px;height:16px}
.sz-chip-t{min-width:0}
.sz-chip-cd{flex:none;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);padding:5px 8px;border-radius:999px;background:rgba(var(--w),.07)}
.sz-chip-pijl{flex:none;color:var(--acc);transition:transform .5s var(--ease)}
a.sz-chip:hover .sz-chip-pijl{transform:translateX(3px)}
@media (max-width:560px){.sz-chip{font-size:13px;align-items:flex-start;border-radius:20px}.sz-chip-cd{display:none}}

/* demo-kiezer: meer thema's, dus scrollbaar */
.demo-s{left:auto;right:14px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:22px;max-height:calc(100svh - 120px);overflow-y:auto;scrollbar-width:none}
.demo-s .mono{display:block;padding:4px 6px 6px;text-align:center}
.demo-s button{min-height:32px;padding:0 10px;font-size:12px}
@media (max-width:1240px){.demo-s{left:50%;right:auto;top:auto;bottom:88px;transform:translateX(-50%);flex-direction:row;align-items:center;width:max-content;max-width:calc(100vw - 32px);max-height:none;overflow-x:auto;overflow-y:hidden;padding:6px;border-radius:999px}.demo-s .mono{display:none}}
.demo-s::-webkit-scrollbar{display:none}
.demo-s button{flex:none;white-space:nowrap}

@media (prefers-reduced-motion:reduce){.sz-vorm,.sz-burst,.sz-burst i,.sz-acc,.sz-chip{animation:none}}

/* andere pagina's: seizoenslaag achter het hero-object (alleen zichtbaar als er een thema live is) */
.pg-vis{isolation:isolate}
.sz-laag{position:absolute;inset:-14% -10%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
[data-seizoen=os] .sz-laag{opacity:1}
.sz-gloed{position:absolute;inset:10%;border-radius:50%;filter:blur(64px);background:radial-gradient(circle at 45% 45%,var(--halo1) 0%,var(--halo2) 48%,transparent 72%);opacity:.75;animation:sz-adem 8s var(--ease) infinite alternate}
@keyframes sz-adem{from{transform:scale(.92);opacity:.55}to{transform:scale(1.05);opacity:.8}}
.sz-laag .pfield{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse,#000 50%,transparent 72%);mask-image:radial-gradient(ellipse,#000 50%,transparent 72%)}
.sz-laag .p{position:absolute;top:-6%;animation-iteration-count:infinite;animation-timing-function:linear}
.sz-laag .p.fall{animation-name:sz-val}.sz-laag .p.rise{animation-name:sz-stijg}
.sz-laag .p.sz-ster{animation-name:sz-twinkel;animation-timing-function:var(--ease);animation-direction:alternate}
@keyframes sz-val{0%{top:-6%;transform:translateX(0) rotate(0);opacity:0}10%{opacity:1}50%{transform:translateX(var(--sway)) rotate(var(--rot))}90%{opacity:.9}100%{top:104%;transform:translateX(0) rotate(calc(var(--rot)*2));opacity:0}}
@keyframes sz-stijg{0%{top:104%;transform:translateX(0) scale(.5);opacity:0}15%{opacity:1}60%{transform:translateX(var(--sway)) scale(1)}100%{top:-6%;transform:translateX(0) scale(.35);opacity:0}}
.sz-laag .sz-vak{position:absolute;inset:0}
.sz-laag .sz-groot{left:auto;right:1%;top:-1%;width:13%;z-index:2}
.sz-laag .sz-klein{width:5%!important}
.pg-copy .sz-chip{align-self:flex-start}
.pg-copy #sz-chip:not([hidden]){display:block}

/* ── de rest van de website (g-seizoen.js → website()) ── */
/* niveau 1+: accentkleur in de kleine dingen */
[data-seizoen=os]{scrollbar-color:var(--acc) transparent}
[data-seizoen=os] ::selection{background:var(--halo1)}
[data-seizoen=os] :focus-visible{outline-color:var(--acc)}
[data-seizoen=os] .dot{color:var(--acc)}

/* logo in de menubalk: het accessoire op de G, of anders een vormpje als sticker */
.nav .brand,.mmenu-top .brand{position:relative}
.sz-nav-acc{position:absolute;pointer-events:none;z-index:2;animation:sz-in .9s var(--ease) both}
.sz-nav-acc svg{display:block;width:100%;height:100%;overflow:visible}
.sz-nav-hoed{left:-4%;bottom:68%;height:calc(92% * var(--aw));width:auto;aspect-ratio:200/160;transform:rotate(var(--ar));transform-origin:50% 90%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
/* het logo krimpt bij scrollen: alles hierboven is in % van de logohoogte, dus het accessoire krimpt mee */
.sz-nav-vorm{right:-12%;top:-22%;height:46%;width:auto;aspect-ratio:1;animation:sz-in .9s var(--ease) both,sz-zweef 6s var(--ease) infinite alternate}
.sz-nav-vorm svg{filter:drop-shadow(0 0 8px var(--halo1))}

/* actiebalk bovenaan: de actie-chip van het thema in plaats van de quickscan-melding */
.aankondiging a.sz-balk{box-shadow:inset 0 1px 0 rgba(var(--w),.14),0 0 0 1px var(--ring),0 10px 30px -14px var(--halo1);color:var(--ink);animation:sz-in .9s var(--ease) both}
.aankondiging a.sz-balk .sz-chip-ic{width:24px;height:24px}
.aankondiging a.sz-balk .sz-chip-ic svg{width:13px;height:13px}
.aankondiging a.sz-balk .sz-chip-cd{font-size:10px;padding:4px 7px}
.aankondiging a.sz-balk:hover .sz-chip-pijl{transform:translateX(3px)}
@media (max-width:620px){.aankondiging a.sz-balk{max-width:calc(100vw - 32px)}.aankondiging a.sz-balk .sz-balk-t{font-weight:500;font-size:12.5px;line-height:1.3}.aankondiging a.sz-balk .sz-chip-cd{display:none}}

/* niveau 2+: de bolletjes worden de themavorm */
.sz-bolletjes .dot{border-radius:0;background:currentColor;width:11px;height:11px;-webkit-mask:var(--sz-masker) center/contain no-repeat;mask:var(--sz-masker) center/contain no-repeat}
.sz-bolletjes .dot.s{width:9px;height:9px}

/* vorm bij de knoppen en het formulier */
.sz-stuk{display:block;pointer-events:none}
.sz-stuk svg{display:block;width:100%;height:100%;overflow:visible}
.sz-hoek{position:absolute!important;right:clamp(14px,3vw,34px);top:clamp(12px,2.4vw,26px);width:clamp(34px,4.4vw,58px);aspect-ratio:1;z-index:1;opacity:.92;animation:sz-in .9s var(--ease) both,sz-zweef 8s var(--ease) infinite alternate}
.sz-hoek svg{filter:drop-shadow(0 0 16px var(--halo1)) drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.scan.glass{position:relative}
.sz-cta-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px!important;font-size:11px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)!important}
.sz-cta-tag::before{content:"";width:18px;height:1px;background:currentColor}

/* blogkaarten: klein vormpje op de foto */
.b-kaart>a{position:relative}
.sz-kaart-vorm{position:absolute;top:10px;right:10px;width:26px;aspect-ratio:1;z-index:1;transition:transform .5s var(--ease)}
.sz-kaart-vorm svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) drop-shadow(0 0 10px var(--halo1))}
.b-kaart>a:hover .sz-kaart-vorm{transform:translateY(-4px) rotate(-8deg)}
.b-kaart--groot .sz-kaart-vorm{width:36px;top:14px;right:14px}

/* niveau 3: deeltjes en een grote vorm in de footer */
footer{position:relative;isolation:isolate}
.sz-voet{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}
footer>*:not(.sz-voet){position:relative}
.sz-voet .pfield{position:absolute;inset:0}
.sz-voet .p{position:absolute;top:-6%;animation-iteration-count:infinite;animation-timing-function:linear;opacity:.7}
.sz-voet .p.fall{animation-name:sz-val}.sz-voet .p.rise{animation-name:sz-stijg}
.sz-voet .p.sz-ster{animation-name:sz-twinkel;animation-timing-function:var(--ease);animation-direction:alternate}
.sz-voet-vorm{position:absolute;right:4vw;bottom:-6%;width:clamp(160px,22vw,300px);aspect-ratio:1;opacity:.12;transform:rotate(-10deg)}
.sz-voet-vorm svg{display:block;width:100%;height:100%}
[data-thema=licht] .sz-voet-vorm{opacity:.16}

/* voorbeeld dat over pagina's heen blijft staan */
.sz-pil{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;font-size:13px;color:var(--ink)}
.sz-pil .mono{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sz-pil button{min-height:30px;padding:0 12px;border-radius:999px;border:0;font:inherit;font-size:12px;color:var(--ink);background:rgba(var(--w),.1);cursor:pointer}
.sz-pil button:hover{background:rgba(var(--w),.18)}
@media (max-width:860px){.sz-pil{bottom:84px}}

@media (prefers-reduced-motion:reduce){.sz-nav-acc,.sz-hoek,.sz-nav-vorm,.aankondiging a.sz-balk{animation:none}}
@media (max-width:860px){.sz-laag{inset:-10% 0}}
/* mega-menu doet mee: gloed om het beeld en de vorm in de hoek */
[data-sz-niveau="2"] .mega-vis,[data-sz-niveau="3"] .mega-vis{box-shadow:inset 0 0 0 1px var(--ring),0 14px 40px -18px var(--halo1)}
.mega-raam .sz-hoek{width:34px;right:12px;top:12px;z-index:2}

/* de balk onderin doet mee (g-seizoen.js → dok) */
[data-seizoen=os] .dock{border-color:var(--ring);box-shadow:var(--glass-hi),var(--glass-sh),0 18px 46px -16px var(--halo1);transition:box-shadow 1.2s var(--ease),border-color 1.2s var(--ease)}
[data-seizoen=os] .dock::before{content:"";position:absolute;left:16%;right:16%;top:-1px;height:1px;border-radius:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);pointer-events:none}
[data-seizoen=os] .dock::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,var(--halo2) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;mix-blend-mode:screen;animation:sz-glans 7s var(--ease) infinite}
@keyframes sz-glans{0%,62%{background-position:120% 0}100%{background-position:-120% 0}}
[data-thema=licht][data-seizoen=os] .dock::after{mix-blend-mode:multiply;opacity:.5}
[data-seizoen=os] .dock .tip:hover,[data-seizoen=os] .dock .tip:focus-visible{color:var(--acc)}
[data-seizoen=os] .dock .sep{background:var(--ring)}
.sz-dok-vorm{position:absolute!important;left:-12px;top:-17px;width:32px;aspect-ratio:1;z-index:2;animation:sz-in .9s var(--ease) both,sz-zweef 6s var(--ease) infinite alternate}
.sz-dok-vorm svg{filter:drop-shadow(0 0 10px var(--halo1)) drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.sz-dok-veld{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1}
.sz-dok-veld .pfield{position:absolute;inset:0}
.sz-dok-veld .p{position:absolute;top:-6%;animation-iteration-count:infinite;animation-timing-function:linear;opacity:.75}
.sz-dok-veld .p.fall{animation-name:sz-val}.sz-dok-veld .p.rise{animation-name:sz-stijg}
.sz-dok-veld .p.sz-ster{animation-name:sz-twinkel;animation-timing-function:var(--ease);animation-direction:alternate}
@media (prefers-reduced-motion:reduce){[data-seizoen=os] .dock::after,.sz-dok-vorm{animation:none}}