/* ============================================================
   MOTION-LAYER STYLES
   - .nt-motion is set only when JS + full motion are active,
     so content never hides without JS (progressive enhancement)
   - special-state choreography for the thinking model
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Model steps: idle state is quieter so activation reads as discovery */
.nt-motion .model-step.is-idle .model-node {
  border-color: rgba(198, 154, 53, 0.28);
  color: rgba(198, 154, 53, 0.55);
}
/* 0.45 gaf 3,17:1 op de donkere grond en zakte dus op WCAG AA (4,5 nodig bij 12px).
   Op mobiel staan bijna alle stappen idle in de horizontale scroller, dus dat is
   precies de tekst die de bezoeker te zien krijgt. 0.66 haalt circa 5,4:1. */
.nt-motion .model-step.is-idle .t { color: rgba(207, 201, 186, 0.66); }

/* RIPPLE | second- and third-order rings radiate outward once active */
.model-step .model-node { position: relative; }
.model-step .model-node::before,
.model-step .model-node::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(198, 154, 53, 0.0);
  border-radius: 50%;
  pointer-events: none;
}
.nt-motion .model-step[data-step="ripple"].is-active .model-node::before {
  animation: nt-ripple 2.6s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
}
.nt-motion .model-step[data-step="ripple"].is-active .model-node::after {
  animation: nt-ripple 2.6s cubic-bezier(0.25, 0.6, 0.4, 1) 0.9s infinite;
}
@keyframes nt-ripple {
  0%   { transform: scale(1);    border-color: rgba(198, 154, 53, 0.4); }
  70%  { transform: scale(1.75); border-color: rgba(198, 154, 53, 0.0); }
  100% { transform: scale(1.75); border-color: rgba(198, 154, 53, 0.0); }
}

/* CORE | surrounding noise quiets, attention converges */
.nt-motion .model-step[data-step="core"].is-active .model-node {
  box-shadow: 0 0 0 4px rgba(198, 154, 53, 0.06) inset;
}

/* GO / NO-GO: de poort krijgt iets meer gewicht dan de andere stappen */
.nt-motion .model-step[data-step="gonogo"].is-active .model-node {
  border-width: 2px;
}

/* Reduced motion: kill everything that moves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}