/* ============================================================================
   AIBeroepenzoeker.nl — Platform-brede stijl-foundation (2026)
   ============================================================================
   Bestand:  app/static/css/platform.css
   Versie:   1.0
   Datum:    2026-06-09

   Doel:
     Herbruikbare 2026-effecten die NIET als Tailwind-utility in de gepurgede
     build zitten (gradients, keyframe-animaties, scroll-reveal, hover-lift).
     Wordt platform-breed geladen via base.html, zodat elke pagina uit één bron
     put — consistent en zonder drift. Voorheen homepage-only (home/home.css).

     Pagina's gebruiken deze klassen als ze het effect willen; op pagina's die
     ze niet gebruiken voegen de regels niets toe (geen zichtbare wijziging).

   Toegankelijkheid (stijlgids §13):
     Alle beweging wordt uitgeschakeld bij prefers-reduced-motion.
   ============================================================================ */

/* ── Scroll-reveal — elementen faden omhoog bij in beeld komen ─────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .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 .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .18); }

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

/* ── Verbindende lijn onder de fase-tijdlijn (fase-kleuren, stijlgids §3.2) ── */
.tijdlijn-lijn { background: linear-gradient(90deg, #60a5fa, #fb923c, #4ade80, #a78bfa); }

/* ── Oranje accentbalk op uitgelichte beroepskaarten ───────────────────── */
/* Sluit visueel aan op de beroep_kaart-macro (stijlgids §6 / beroepen.css). */
.home-beroep { position: relative; overflow: hidden; }
.home-beroep::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #fb923c, #f97316);
}

/* ── 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; }
}