/* ==========================================================================
   MKN BEWEGINGSLAAG — additief
   Overgenomen uit de nieuwe site (assets/mkn-brand.css), maar UITSLUITEND de
   bewegende delen. Geen kleuren, geen lettertypes, geen layout van de nieuwe
   site: alles gebruikt de bestaande variabelen van deze site (--orange,
   --line, --ink, --bg). Dit bestand kan niets van de bestaande opmaak
   overschrijven — het voegt enkel klassen toe die nog niet bestonden.
   ========================================================================== */

/* --- keyframes ------------------------------------------------------------ */
@keyframes mkn-pulse { 0%,100% { transform: scale(.92) } 50% { transform: scale(1.12) } }
@keyframes mkn-spin  { to { transform: rotate(360deg) } }
@keyframes mkn-float { 0%,100% { translate: 0 0 } 50% { translate: 0 -7px } }

/* --- scroll-reveal: sectie schuift zacht in beeld ------------------------- */
.mkn-reveal    { opacity: 0; transform: translateY(16px);
                 transition: opacity .7s ease, transform .7s ease }
.mkn-reveal.in { opacity: 1; transform: none }

/* gestapelde vertraging voor rijen kaarten */
.mkn-reveal.d1 { transition-delay: .06s }
.mkn-reveal.d2 { transition-delay: .12s }
.mkn-reveal.d3 { transition-delay: .18s }
.mkn-reveal.d4 { transition-delay: .24s }
.mkn-reveal.d5 { transition-delay: .30s }
.mkn-reveal.d6 { transition-delay: .36s }

/* --- zwevend accent ------------------------------------------------------- */
.mkn-float { animation: mkn-float 5s ease-in-out infinite }

/* --- pulserende stip ------------------------------------------------------ */
.mkn-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
           background: var(--orange);
           box-shadow: 0 0 0 5px rgba(182,90,30,.13);
           animation: mkn-pulse 2.4s ease-in-out infinite }

/* --- draaiende cirkels (orbits) achter een beeld -------------------------- */
.mkn-orbit        { position: absolute; border: 1px solid var(--line);
                    border-radius: 50%; pointer-events: none; z-index: 0 }
.mkn-orbit.dashed { border-style: dashed; animation: mkn-spin 38s linear infinite }

/* --- zwevend pil-label (voor bij een beeld) ------------------------------- */
.mkn-pill { display: inline-flex; align-items: center; gap: 8px;
            border: 1px solid var(--line); border-radius: 999px;
            background: rgba(251,247,241,.94); padding: 8px 14px;
            font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
            text-transform: uppercase; color: var(--ink) }

/* --- toegankelijkheid: wie beweging uitzet, krijgt geen beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mkn-reveal { opacity: 1 !important; transform: none !important }
}