/* ============================================================================
   AISalarischeck.nl — Platform-brede stijl-foundation (2026)
   ============================================================================
   Herbruikbare 2026-effecten die niet in de getrimde Tailwind-build zitten:
   gradient-achtergrond, scroll-reveal, zwevende vormen, hover-lift.
   Platform-breed geladen via base.html. Identiek patroon aan de
   zusterplatforms (ailoopbaancoaching/aiberoepenzoeker).

   Toegankelijkheid: alle beweging uit bij prefers-reduced-motion.
   ============================================================================ */

/* ── Scroll-reveal — elementen faden omhoog bij in beeld komen ─────────────
   .reveal start onzichtbaar; platform.js voegt .in toe (of meteen als JS/
   observer ontbreekt of bij prefers-reduced-motion). Content nooit onzichtbaar. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
    opacity: 1;
    transform: none;
}

/* ── Zwevende decoratievormen in hero / CTA ──────────────────────────────── */
@keyframes drijf {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-18px); }
}
.drijf       { animation: drijf 7s ease-in-out infinite; }
.drijf-traag { animation: drijf 11s ease-in-out infinite; }

/* ── Hover-lift voor klikbare kaarten ────────────────────────────────────── */
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18);
}

/* ── Zachte merkgradient-achtergrond (hero-/kop-panelen) ──────────────────── */
.hero-bg { background: linear-gradient(135deg, #eff6ff 0%, #fff7ed 55%, #fffbeb 100%); }

/* ── Beweging uit bij voorkeur voor minder beweging ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .drijf, .drijf-traag { animation: none; }
    .lift { transition: none; }
}