/* Gekopieerd uit NorthByte Lab, effect E323 (lab/effecten/E323-regen, 04-10-2026). */
/* ==========================================================================
   E323 · Regen met plensjes op de grond
   Schuine regenstrepen die door de sectie vallen, met kleine kringen waar de
   druppels de grond raken. Elke druppel zit in een baan die met transform naar
   beneden schuift; de kringen schalen en vervagen met transform en opacity.
   Pauzeert buiten beeld en bij een verborgen tab.
   Instellen op .e323 met CSS-variabelen en data-attributen:
     --e323-lucht      achtergrond                          (standaard leigrijs)
     --e323-druppel    kleur van de druppels als RGB         (standaard 214 228 242)
     --e323-schuin     hoek van de regen                     (standaard 10deg; 0deg is recht)
     data-e323-aantal  aantal druppels op een groot scherm   (standaard 80; op mobiel de helft)
   ========================================================================== */

.e323 { position: relative; isolation: isolate; overflow: hidden; background: var(--e323-lucht, linear-gradient(180deg, #273039 0%, #344250 60%, #3d4b59 100%)); }
.e323-veld {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* Stilstaande regen zonder JavaScript */
  background-image: repeating-linear-gradient(100deg, transparent 0 46px, rgb(var(--e323-druppel, 214 228 242) / .08) 46px 47px);
}
.e323-veld.e323-klaar { background-image: none; }
.e323-schuin { position: absolute; inset: -12% -18%; transform: rotate(var(--e323-schuin, 10deg)); }
.e323-baan { position: absolute; top: 0; height: 100%; width: 2px; }
.e323-druppel {
  position: absolute; left: 0; top: -120px; width: var(--e323-dik, 1.5px); height: var(--e323-len, 70px); border-radius: 2px;
  background: linear-gradient(180deg, rgb(var(--e323-druppel, 214 228 242) / 0), rgb(var(--e323-druppel, 214 228 242) / var(--e323-o, .5)));
}
.e323-plons {
  position: absolute; width: 34px; height: 9px; margin: -4px 0 0 -17px; border-radius: 50%; opacity: 0;
  border: 1.5px solid rgb(var(--e323-druppel, 214 228 242) / .6);
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e323-baan {
    animation: e323-val var(--e323-d, .8s) linear infinite;
    animation-delay: var(--e323-v, 0s);
    animation-play-state: paused;
  }
  html:not([data-rm]) .e323-plons {
    animation: e323-plons var(--e323-pd, 1.1s) ease-out infinite;
    animation-delay: var(--e323-pv, 0s);
    animation-play-state: paused;
  }
  html:not([data-rm]) .e323-speelt .e323-baan,
  html:not([data-rm]) .e323-speelt .e323-plons { animation-play-state: running; }
}

@keyframes e323-val {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(100% + 240px), 0); }
}
@keyframes e323-plons {
  0%   { opacity: .9; transform: scale(.15); }
  70%  { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}