/* WeMeekIt plus: de extra laag bovenop het thema (sinds de verhuizing naar Firebase, nov 2026).
   Alles hier is versiering: zonder dit bestand ziet de site er precies zo uit als op WordPress.
   Beweging alleen als de bezoeker dat niet heeft uitgezet. */

/* Zachte overgang tussen pagina's (Chrome, Edge, Safari 18.2+). De kop blijft staan. */
@view-transition { navigation: auto; }
.wm-header { view-transition-name: wm-kop; }
::view-transition-old(root) { animation: 160ms ease-in both wm-plus-uit; }
::view-transition-new(root) { animation: 260ms cubic-bezier(.2,.7,.2,1) both wm-plus-in; }
@keyframes wm-plus-uit { to { opacity: 0; transform: translateY(-6px); } }
@keyframes wm-plus-in { from { opacity: 0; transform: translateY(10px); } }

/* Leesvoortgang bovenaan artikelen, in de kleuren van de golf. */
.wm-plus-voortgang {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; pointer-events: none;
  background: linear-gradient(90deg, var(--wm-blue), var(--wm-wave));
  transform-origin: 0 50%; transform: scaleX(var(--wm-plus-p, 0));
}

/* Verschijnen bij scrollen. Alleen met JS (html.wm-plus), anders staat alles er gewoon. */
html.wm-plus .wm-plus-op {
  opacity: 0; transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--wm-plus-i, 0) * 70ms);
}
html.wm-plus .wm-plus-op.is-zichtbaar { opacity: 1; transform: none; }

/* Lichtvlek die de muis volgt, en een lichte kanteling, op project- en apptegels. */
.wm-plus-tilt { position: relative; transform-style: preserve-3d; will-change: transform; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.wm-plus-tilt.is-actief { transition-duration: 120ms; }
.wm-plus-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--wm-plus-x, 50%) var(--wm-plus-y, 50%), rgba(22, 196, 238, .18), transparent 45%);
  opacity: 0; transition: opacity 300ms;
}
.wm-plus-tilt.is-actief::after { opacity: 1; }

/* Glans die over de knoppen strijkt. */
.wm-button { position: relative; overflow: hidden; isolation: isolate; }
.wm-button::before {
  content: ""; position: absolute; inset: -2px auto -2px -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); transition: left 650ms cubic-bezier(.2,.7,.2,1);
}
.wm-button:hover::before, .wm-button:focus-visible::before { left: 120%; }

/* Golflijn in de koppen van secties trekt zich bij binnenkomst. */
html.wm-plus .wm-section-head.wm-plus-op { border-top-color: transparent; position: relative; }
html.wm-plus .wm-section-head.wm-plus-op::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--wm-wave), var(--wm-line-strong) 40%);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1100ms cubic-bezier(.2,.7,.2,1) 150ms;
}
html.wm-plus .wm-section--dark .wm-section-head.wm-plus-op::before { background: linear-gradient(90deg, var(--wm-wave), rgba(255,255,255,.2) 40%); }
html.wm-plus .wm-section-head.wm-plus-op.is-zichtbaar::before { transform: scaleX(1); }

/* Meldingen van de formulieren (zelfde klassen als de plugin gebruikte). */
.wm-plus-melding { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.wm-plus .wm-plus-op { opacity: 1; transform: none; transition: none; }
  .wm-plus-tilt, .wm-button::before { transition: none; }
}