/* ==========================================================================
   LAADSCHERM — pulserend Weerfocus-logo (js/laadscherm.js)
   Gedeeld: router-overlay (#wf-laadscherm) en de ensemble-loader.
   Eén lus = 1,6 s: punt klopt, daarna lichten de bogen van binnen naar buiten op.
   ========================================================================== */

#wf-laadscherm {
  position: absolute;
  inset: 0;
  z-index: var(--z-laadscherm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

#wf-laadscherm.zichtbaar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s;
}

#wf-laadscherm .wf-laadlogo {
  width: 72px;
  height: 72px;
}

.wf-laadlogo .wf-laadlogo-punt {
  transform-box: fill-box;
  transform-origin: center;
  animation: wf-laadlogo-punt 1.6s ease-out infinite;
}

.wf-laadlogo .wf-laadlogo-boog {
  transform-box: view-box;
  transform-origin: 250px 250px;
  opacity: 0.25;
  transform: scale(0.94);
  animation: wf-laadlogo-boog 1.6s ease-out infinite;
}

.wf-laadlogo .wf-laadlogo-boog-2 { animation-delay: 0.2s; }
.wf-laadlogo .wf-laadlogo-boog-3 { animation-delay: 0.4s; }

@keyframes wf-laadlogo-punt {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.16); }
  31%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Boog 1 start na 0,17 s (10/96 van de lus); de delays verschuiven boog 2 en 3 */
@keyframes wf-laadlogo-boog {
  0%, 10%  { opacity: 0.25; transform: scale(0.94); }
  21%      { opacity: 1;    transform: scale(1); }
  52%      { opacity: 0.25; transform: scale(0.94); }
  100%     { opacity: 0.25; transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .wf-laadlogo .wf-laadlogo-punt,
  .wf-laadlogo .wf-laadlogo-boog {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Alleen voor schermlezers */
#wf-laadscherm .wf-laadscherm-tekst {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}