/* RBN-huisstijl: beweging (uit de stijlgids, rbn-services.css v1.5, alleen wat we gebruiken).
   Geladen op het dashboard, de loginpagina en Coming Soon. Regels: alleen transform en opacity, 200 tot 800 ms,
   alles uit bij prefers-reduced-motion. Gebruik: data-dans (één woord per scherm), .rbn-punt, .rbn-wiggle,
   .rbn-fx-knop (Bricks-knop), data-reveal (op een container, niet op iets met een eigen hover-transform). */
:root{--rbn-fx-tilt:-2.5deg;--rbn-fx-ease:cubic-bezier(.2,.7,.2,1);--rbn-fx-veer:cubic-bezier(.34,1.56,.64,1)}

.rbn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rbn-punt::after{content:".";color:#34D56F}

/* Dansende letters: licht scheef zoals in het logo, springen binnen als ze in beeld komen */
.rbn-dans-letters{white-space:nowrap}
.rbn-dans-letters>span[aria-hidden]{display:inline-block;transition:transform .4s var(--rbn-fx-ease)}
.rbn-dans-letters>span[aria-hidden]:nth-child(3n+1){transform:rotate(calc(var(--rbn-fx-tilt) * .6))}
.rbn-dans-letters>span[aria-hidden]:nth-child(3n+2){transform:rotate(calc(var(--rbn-fx-tilt) * -.5))}
.rbn-dans-letters>span[aria-hidden]:nth-child(3n){transform:rotate(calc(var(--rbn-fx-tilt) * .4))}
.rbn-dans-letters:hover>span[aria-hidden]{transform:rotate(0)}
@keyframes rbn-letter-in{from{transform:translateY(.45em) rotate(12deg)}}
.rbn-dans-letters.is-in>span[aria-hidden]{animation:rbn-letter-in .85s var(--rbn-fx-veer) both;animation-delay:calc(var(--i,0) * 38ms)}

/* Logo-wiebel bij hover */
@keyframes rbn-wiggle{0%{transform:rotate(0)}25%{transform:rotate(-3deg)}50%{transform:rotate(2.2deg)}75%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.rbn-wiggle:hover{animation:rbn-wiggle .7s var(--rbn-fx-veer);transform-origin:20% 80%}

/* Knoppen (Bricks): even omhoog en een tikje scheef, indrukken bij klikken */
.rbn-fx-knop{transition:transform .25s var(--rbn-fx-ease),background-color .2s,color .2s}
.rbn-fx-knop:hover{transform:translateY(-2px) rotate(calc(var(--rbn-fx-tilt) * .3))}
.rbn-fx-knop:active{transform:translateY(0) scale(.97)}

/* Zacht verschijnen tijdens het scrollen (html.rbn-js en .is-in komen van rbn-effecten.js) */
html.rbn-js .rbn-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--rbn-fx-ease) var(--rbn-d,0s),transform .85s var(--rbn-fx-ease) var(--rbn-d,0s)}
html.rbn-js .rbn-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
	.rbn-wiggle,.rbn-dans-letters>span{animation:none!important;transition:none!important}
	.rbn-fx-knop{transition:none}
	.rbn-fx-knop:hover{transform:none}
	html.rbn-js .rbn-reveal{opacity:1;transform:none;transition:none}
}