/* ===== Animaties (progressive enhancement) ===== */

/* Reveal-on-scroll: alleen actief als JS draait (.anim-ready) */
.anim-ready .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
.anim-ready .reveal.in {
    opacity: 1;
    transform: none;
}
/* Gestagger binnen een grid */
.anim-ready .reveal.d1 { transition-delay: .08s; }
.anim-ready .reveal.d2 { transition-delay: .16s; }
.anim-ready .reveal.d3 { transition-delay: .24s; }

/* Hero-entree bij laden */
.hero h1, .hero .lead, .hero .hero-actions, .hero .eyebrow {
    animation: fadeUp .8s both;
}
.hero .eyebrow    { animation-delay: .05s; }
.hero h1          { animation-delay: .12s; }
.hero .lead       { animation-delay: .22s; }
.hero .hero-actions { animation-delay: .32s; }
.hero-visual { animation: fadeIn 1s .2s both; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Zacht zweven van het hero-icoon */
.hero-visual .placeholder-icon { animation: floaty 6s ease-in-out infinite; }

/* Micro-interacties */
.btn { transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn--primary:hover { box-shadow: 0 8px 20px rgba(46,135,102,.28); }
.card .icon { transition: transform .25s ease; }
.card:hover .icon { transform: scale(1.08) rotate(-3deg); }
.card .card-link svg, .btn svg { transition: transform .18s ease; }
.card:hover .card-link svg, .btn:hover svg { transform: translateX(3px); }
.nav a { position: relative; }
.nav a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
    background: var(--green); transition: right .25s ease;
}
.nav a:hover::after { right: 0; }
.nav a.active { color: var(--green-600); }
.nav a.active::after { right: 0; }

/* Tel-animatie klaar-stand (JS vult in) */
.stat .num { transition: color .3s ease; }

/* Respecteer voorkeuren */
@media (prefers-reduced-motion: reduce) {
    .anim-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero h1, .hero .lead, .hero .hero-actions, .hero .eyebrow, .hero-visual,
    .hero-visual .placeholder-icon { animation: none !important; }
    * { scroll-behavior: auto !important; }
}