/* ==========================================================================
   Beweging — de gedeelde motion-laag van de publieke site.

   Tot 26-08-2026 had elke publieke pagina haar eigen entrance-idioom: de hero
   met CSS-keyframes, home.css met .animate-in (14/20/30px, drie easings),
   service-pagina.css met tien .prop-*-varianten. Tijdens één scroll zag je
   daardoor drie handschriften. Hier staat er nog één.

   Twee dingen en niet meer:
     1. de tokens — duur, easing en de enige verplaatsingsafstand;
     2. .ff-in — een blok dat in beeld komt.

   Wordt via _publiek_base.html op ELKE publieke pagina geladen, direct na
   navbar.css. Daarom staan de tokens hier en niet in fenofin-2026.css: dat
   stylesheet laadt elke pagina zelf in haar extra_css, de huls niet.

   De startstaat (opacity: 0) hangt aan .js-motion op <html>, gezet door een
   guard in de <head>. Zonder JavaScript — of als het script faalt — komt die
   class er niet en is alles gewoon zichtbaar. De reveal is versiering; de
   inhoud mag er nooit van afhangen.
   ========================================================================== */

:root {
    /* Eén easing voor alles: rustig uitlopend, geen overshoot. */
    --ff-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --ff-dur-hover: 180ms;   /* hover, focus, kleurwissels */
    --ff-dur-in: 420ms;      /* een blok dat in beeld komt */

    /* De enige verplaatsingsafstand. Klein: de 2026-taal beweegt met 4px in de
       hero, dus een blok mag niet 20 of 30px opspringen. */
    --ff-lift: 8px;
}

/* ---------- Een blok dat in beeld komt ----------
   Zet .ff-in op het INHOUDSBLOK, nooit op een hele <section>: een sectie van
   500px die als één vlak omhoog schuift leest als een schok, niet als een
   overgang. De observer in js/home/motion.js zet .is-in erbij. */
.js-motion .ff-in {
    opacity: 0;
    transform: translateY(var(--ff-lift));
    transition: opacity var(--ff-dur-in) var(--ff-ease),
                transform var(--ff-dur-in) var(--ff-ease);
}

.js-motion .ff-in.is-in {
    opacity: 1;
    transform: none;
}

/* Naast elkaar staande blokken (kaartenrij, twee roadmap-groepen) lopen licht
   uit elkaar. Drie stappen is genoeg; meer wordt een polonaise. */
.js-motion .ff-in--2 { transition-delay: 70ms; }
.js-motion .ff-in--3 { transition-delay: 140ms; }

/* ---------- Wie beweging heeft uitgezet ----------
   Krijgt alles meteen compleet, en geen glijdende scroll. Die laatste staat op
   <html> in home.css/propositie.css en wordt door een duration-clamp niet
   geraakt — scroll-behavior is geen transition. */
@media (prefers-reduced-motion: reduce) {
    .js-motion .ff-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}