/* =====================================================
   shared.css — Gedeelde animaties & effecten
   Eén bron voor CSS die voorheen per pagina werd herhaald.
   Geladen via header.php op elke pagina.
   ===================================================== */

/* ---- Hero achtergrond-gradient ---- */
.hero-gradient {
    background: radial-gradient(ellipse at 20% 50%, rgba(0, 123, 255, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
}
[data-theme="dark"] .hero-gradient {
    background: radial-gradient(ellipse at 20% 50%, rgba(59, 158, 255, 0.1) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
}

/* ---- Scroll-onthul animaties (gebruikt door visual-effects.js) ---- */
.scroll-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

.stack-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.stack-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Spinner-keyframe (o.a. weather-widget in header) ---- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}