/* Homepage: afgeleide tokens, animaties en toestanden die alleen het script zet. */
html:root {
  --jb-plate: color-mix(in oklch, var(--base-ultra-dark) 85%, var(--base));
  --jb-plate-2: color-mix(in oklch, var(--base-ultra-dark) 65%, var(--base));
  --jb-ok: oklch(85% 0.11 162);
  --jb-radius: calc(var(--radius) * 2);
  --jb-radius-l: calc(var(--radius) * 3.2);
}

@keyframes jb-pulse { 50% { opacity: .35; box-shadow: 0 0 2px var(--jb-ok); } }

.jbblock__mod.jbblock__mod--on {
  border-color: var(--accent);
}

.jbblock__mod.jbblock__mod--on::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.reveal.reveal--pre {
  opacity: .25;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  .portrait__tag::before {
    animation: none;
  }
  .reveal,
  .jbblock__mod,
  .jbblock__mod::before,
  .service,
  .case-card {
    transition: none;
  }
  .reveal.reveal--pre {
    opacity: 1;
    transform: none;
  }
}