/* =============================================
   ZDA Huizen — Pagina animaties
   ============================================= */

/* ── Fade-in bij page load ── */
body {
    animation: fadeInPage 0.4s ease-in;
}
@keyframes fadeInPage {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Scroll-in animatie (via JS class) ── */
.zda-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.zda-reveal.zda-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Kaarten & content blokken ── */
.bg-white.border,
.card,
.stat-box,
.kpi {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bg-white.border:hover,
.card:hover,
.stat-box:hover,
.kpi:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.10);
    transform: translateY(-2px);
}

/* ── Navigatie links ── */
.nav-link {
    transition: color 0.2s ease !important;
}

/* ── Knoppen ── */
.btn-glass,
.btn-blue,
.btn-primary,
.dw-btn,
.btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}
.btn-glass:hover,
.btn-blue:hover,
.btn-primary:hover,
.dw-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* ── Sidebar menu items ── */
.zda-sidebar a {
    transition: background 0.15s ease, color 0.15s ease, border-left-color 0.15s ease, padding-left 0.15s ease !important;
}
.zda-sidebar a:hover {
    padding-left: 20px !important;
}

/* ── Afbeeldingen ── */
img {
    transition: transform 0.3s ease;
}
.fotoalbum-grid img:hover,
.photo-item img:hover {
    transform: scale(1.03);
}

/* ── Sectie titels ── */
.section-title {
    position: relative;
    overflow: hidden;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 3px;
    background: var(--primary, #FFCC00);
    transition: width 0.4s ease;
}
.section-title:hover::after {
    width: 100%;
}

/* ── Back-to-top knop ── */
.back-to-top {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.back-to-top:hover {
    transform: translateY(-3px) !important;
}

/* ── Health pijlers ── */
.health-pijler {
    transition: background 0.2s ease, padding-left 0.2s ease;
    border-radius: 6px;
    padding-left: 0;
}
.health-pijler:hover {
    background: #f8f9fa;
    padding-left: 8px;
}
.health-icon {
    transition: transform 0.2s ease;
}
.health-pijler:hover .health-icon {
    transform: scale(1.1);
}

/* ── Masthead tekst animatie ── */
.masthead-heading {
    animation: slideDown 0.7s ease both;
}
.masthead-subheading {
    animation: slideDown 0.7s ease 0.15s both;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Preekrooster & dagwijding widget ── */
#automatische-agenda .bg-white,
#dagwijding-widget .bg-white {
    transition: box-shadow 0.25s ease;
}
#automatische-agenda .bg-white:hover,
#dagwijding-widget .bg-white:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}