/* Nieuwsbrief — een aanmeldpagina zoals u hem verwacht. De envelop doet het werk. */

.nb-kader{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,440px);gap:clamp(30px,6vw,90px);align-items:center}
.nb-kop{padding-bottom:clamp(50px,7vw,100px)}
.nb-punten{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:38px;padding-top:24px;border-top:1px solid var(--glas-rand);max-width:520px}
.nb-punten li{display:flex;flex-direction:column;gap:4px}
.nb-punten span{font:500 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof)}
.nb-punten b{font-weight:600;font-size:1rem;color:var(--tekst);font-variant-numeric:tabular-nums}

/* het paneel */
.nb-paneel{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,4vw,34px);background:rgba(10,5,22,.62)}
.nb-status{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nb-pil{cursor:default}
.nb-melding{display:grid;gap:6px}
.nb-melding.is-nieuw{animation:nbMelding 1.1s var(--zacht)}
@keyframes nbMelding{0%{opacity:.2;transform:translateY(6px)}35%{box-shadow:0 0 0 4px rgba(255,122,26,.16),0 0 40px -10px var(--oranje-gloed)}100%{opacity:1;transform:none;box-shadow:none}}
.nb-melding-tijd{font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.nb-melding-tijd[hidden]{display:none}

.nb-form{display:grid;gap:14px}
.nb-form .knop{width:100%;padding:.9em 1.2em;font-size:1rem}
.nb-form .knop[disabled],.nb-afmeldvraag .knop[disabled]{cursor:progress;transform:none;filter:saturate(.75) brightness(.92)}
.nb-form .knop[disabled]::before{content:"";width:1em;height:1em;border-radius:50%;border:2px solid rgba(20,7,0,.28);border-top-color:#140700;animation:nbDraai .7s linear infinite;flex:none}
@keyframes nbDraai{to{transform:rotate(360deg)}}
.nb-form.is-bezig .veld input{opacity:.55}

.nb-onder{display:grid;gap:10px;font-size:.86rem;color:var(--tekst-dof)}
.nb-onder a,.nb-tekstlink{color:var(--lila);text-decoration:underline;text-decoration-color:rgba(205,191,255,.35);text-underline-offset:3px;transition:color .25s}
.nb-onder a:hover,.nb-tekstlink:hover{color:var(--tekst)}
.nb-afmelden{min-height:2.6em;display:flex;align-items:center}
.nb-afmeldlink{font-size:.86rem;color:var(--tekst-dof);text-decoration:underline;text-decoration-color:rgba(255,255,255,.18);text-underline-offset:3px;padding:.3em 0;transition:color .25s}
.nb-afmeldlink:hover{color:var(--tekst)}
.nb-afmeldlink[hidden],.nb-afmeldvraag[hidden]{display:none}
.nb-afmeldvraag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;color:var(--tekst-zacht);animation:nbIn .5s var(--zacht)}
.nb-afmeldvraag span{margin-right:4px}
.nb-afmeldvraag .knop{padding:.45em 1em;font-size:.84rem}
@keyframes nbIn{from{opacity:0;transform:translateY(6px)}}

/* ── De envelop ── */
.nb-envelop{position:relative;display:grid;place-items:center;margin:-6px 0 -4px;isolation:isolate}
.nb-envelop::before{content:"";position:absolute;z-index:-1;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(143,107,255,.42),rgba(74,31,184,.16) 45%,transparent 70%);filter:blur(10px);animation:nbGloed 6s ease-in-out infinite}
.nb-envelop svg{width:min(230px,62%);height:auto;overflow:visible;display:block;animation:nbZweef 6s ease-in-out infinite}
.nb-env{transform-box:fill-box;transform-origin:50% 50%}
.nb-env-rug{fill:#0a0516;stroke:rgba(205,191,255,.35);stroke-width:1.4}
.nb-klep-open,.nb-klep-dicht{fill:#110827;stroke:rgba(205,191,255,.5);stroke-width:1.4;stroke-linejoin:round;transform-box:fill-box}
.nb-klep-open{transform-origin:50% 100%}
.nb-klep-dicht{transform-origin:50% 0;transform:scaleY(0);fill:#160b30}
.nb-brief rect{stroke:rgba(205,191,255,.55);stroke-width:1.2}
.nb-brief-regels{fill:none;stroke:rgba(205,191,255,.4);stroke-width:3;stroke-linecap:round}
.nb-brief-lamp{fill:var(--oranje);filter:drop-shadow(0 0 5px var(--oranje));animation:nbLamp 3.4s ease-in-out infinite}
.nb-env-voor{fill:#0d061d;stroke:rgba(205,191,255,.5);stroke-width:1.4;stroke-linejoin:round}
.nb-env-vouw{fill:none;stroke:rgba(205,191,255,.18);stroke-width:1.2;stroke-linecap:round}
.nb-zegel{fill:var(--oranje);opacity:0;filter:drop-shadow(0 0 8px var(--oranje))}
@keyframes nbZweef{50%{transform:translateY(-5px)}}
@keyframes nbGloed{50%{opacity:.6;transform:scale(1.08)}}
@keyframes nbLamp{50%{opacity:.45}}

/* versturen: de brief zakt weg, de klep gaat dicht, het zegel licht op, en alles komt terug */
.nb-envelop.is-verzenden .nb-env{animation:nbStuur 3s var(--zacht)}
.nb-envelop.is-verzenden .nb-brief{animation:nbBriefIn 3s var(--zacht)}
.nb-envelop.is-verzenden .nb-klep-open{animation:nbKlepOpen 3s linear}
.nb-envelop.is-verzenden .nb-klep-dicht{animation:nbKlepDicht 3s linear}
.nb-envelop.is-verzenden .nb-zegel{animation:nbZegel 3s linear}
@keyframes nbBriefIn{0%{transform:none}24%,72%{transform:translateY(42px)}100%{transform:none}}
@keyframes nbKlepOpen{0%,24%{transform:scaleY(1)}32%,66%{transform:scaleY(0)}74%,100%{transform:scaleY(1)}}
@keyframes nbKlepDicht{0%,32%{transform:scaleY(0)}40%,58%{transform:scaleY(1)}66%,100%{transform:scaleY(0)}}
@keyframes nbZegel{0%,40%{opacity:0}45%,55%{opacity:1}60%,100%{opacity:0}}
@keyframes nbStuur{0%,40%{transform:none}50%{transform:translateY(-9px) scale(1.03)}60%,100%{transform:none}}
.nb-envelop.is-stil *,.nb-envelop.is-stil::before{animation-play-state:paused}

/* ── Archief ── */
.nb-archief{margin-top:clamp(34px,5vw,56px);border-top:1px solid var(--glas-rand)}
.nb-editie{display:grid;grid-template-columns:110px minmax(0,1fr) auto 90px;gap:8px 28px;align-items:baseline;padding:22px 8px;border-bottom:1px solid var(--glas-rand)}
.nb-editie:hover{background:rgba(143,107,255,.05)}
.nb-editie-nr{font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--paars-licht);font-variant-numeric:tabular-nums}
.nb-editie h3{font-size:1.2rem;font-weight:700;letter-spacing:-.03em;line-height:1.25}
.nb-editie p{margin-top:4px;color:var(--tekst-zacht);font-size:.95rem}
.nb-editie-datum{font:500 .74rem var(--mono);color:var(--tekst-dof);white-space:nowrap;font-variant-numeric:tabular-nums}
.nb-bezorgd{text-align:right}
.nb-editie:first-child .nb-bezorgd{color:var(--oranje)}
@media (max-width:760px){
  .nb-editie{grid-template-columns:minmax(0,1fr) auto;padding:18px 2px}
  .nb-editie-nr{grid-column:1;grid-row:1}
  .nb-editie-datum{grid-column:2;grid-row:1;text-align:right}
  .nb-editie div{grid-column:1/-1}
  .nb-bezorgd{grid-column:1/-1;text-align:left}
}

.nb-slot{text-align:center;background:radial-gradient(ellipse 70% 70% at 50% 100%,rgba(74,31,184,.35),transparent 70%)}
.nb-slot .kop,.nb-slot .lead{margin-left:auto;margin-right:auto}
.nb-slot .kop{max-width:18ch}
.nb-slot-acties{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

@media (max-width:940px){
  .nb-kader{grid-template-columns:1fr}
  .nb-paneel{max-width:520px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .nb-envelop svg,.nb-envelop::before,.nb-brief-lamp,.nb-melding.is-nieuw,.nb-afmeldvraag{animation:none!important}
  .nb-envelop.is-verzenden .nb-brief,.nb-envelop.is-verzenden .nb-klep-open,.nb-envelop.is-verzenden .nb-klep-dicht,.nb-envelop.is-verzenden .nb-env{animation:none!important}
}