/* ===========================================
   NATUURRIJK ANKEVEEN – biotoop.css
   De levende header. Alle beweging komt uit biotoop.js
   (Web Animations API, alleen transform/opacity).
   =========================================== */

:root {
    --bio-height: calc(var(--header-total) + 60px); /* ruimte onder het gras voor dieren */
}

/* Alle lagen delen één coördinatenstelsel: y = 0 is de bovenkant van de pagina,
   de graslijn (onderkant gras) ligt op y = var(--header-total). */
.bio-background, .bio-pond, .bio-grass, .bio-ground, .bio-garden, .bio-sky, .bio-front {
    position: fixed; top: 0; left: 0; right: 0;
    pointer-events: none;
}

.bio-background { height: var(--header-total); background: var(--bio-sky, #e8f1f6); z-index: 1000; }
nav.site-nav { background: var(--bio-sky, #e8f1f6); }
body.scene-oevers { --bio-sky: #dcebf3; }
/* Nacht (vleermuizen): donkerblauwe lucht, lichte menuteksten, gedimd gras */
body.scene-vleermuizen { --bio-sky: linear-gradient(180deg, #0f1a33 0%, #1d2d52 70%, #2b3d63 100%); }
body.scene-vleermuizen nav.site-nav .logo, body.scene-vleermuizen .nav-links a, body.scene-vleermuizen .nav-links button { color: #e6ecf7; }
body.scene-vleermuizen .nav-links a::after, body.scene-vleermuizen .nav-links button::after { background: #9db0cc; }
body.scene-vleermuizen .menu-btn { color: #e6ecf7; }
body.scene-vleermuizen .nav-links.open { background: #1d2d52; border-color: #2b3d63; }
body.scene-vleermuizen .bio-grass::after { filter: brightness(.6) saturate(.7); }
body.scene-vleermuizen .bio-flower { filter: brightness(.6) saturate(.7); }
.bio-pond       { height: var(--bio-height); z-index: 1005; overflow: hidden; }
.bio-grass      { height: var(--header-total); z-index: 1010; }
.bio-sky        { height: var(--bio-height); z-index: 1022; overflow: hidden; }
.bio-ground     { height: var(--bio-height); z-index: 1025; overflow: hidden; }
.bio-garden     { height: var(--bio-height); z-index: 1035; overflow: hidden; }
.bio-front      { height: var(--bio-height); z-index: 1040; overflow: hidden; }

/* Gras: één afbeelding, herhaald */
.bio-grass::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--grass-height);
    background: url('images/Gras-cropped.webp') repeat-x left bottom / auto var(--grass-height);
}

/* Basis voor alle sprites: absoluut, gepositioneerd via transform */
.bio-sprite {
    position: absolute; top: 0; left: 0;
    width: auto;
    will-change: transform, opacity;
    transform-origin: bottom center;
    backface-visibility: hidden;
}
.bio-sprite.center { transform-origin: center center; }

/* Wrapper voor dieren die zelf nog een eigen bewegingetje hebben (bob/flutter) */
.bio-wrap { position: absolute; top: 0; left: 0; will-change: transform; }
.bio-wrap > img { display: block; width: auto; }

/* Bloemen wiegen zachtjes: JS zet duur en vertraging per bloem */
.bio-flower.sway { animation: bioSway var(--sway-dur, 5s) ease-in-out var(--sway-delay, 0s) infinite alternate; }
@keyframes bioSway {
    from { transform: var(--pos) rotate(-2deg); }
    to   { transform: var(--pos) rotate(2.5deg); }
}

/* Roerdomp: twee beelden over elkaar, JS wisselt de zichtbare */
.bio-roerdomp img { transition: opacity .6s ease; }

@media (prefers-reduced-motion: reduce) {
    .bio-flower.sway { animation: none; transform: var(--pos); }
}

/* Sloot: vaste lichtblauwe strook onder het gras, waar eend en otter zwemmen (oevers) */
body.scene-oevers .bio-pond::before {
    content: ''; position: absolute; left: 0; right: 0;
    top: var(--header-total); height: 42px;
    background: linear-gradient(180deg, rgba(200, 226, 240, .95) 0%, rgba(212, 232, 242, .8) 60%, rgba(232, 244, 248, 0) 100%);
}
body.scene-oevers .page-header { background: linear-gradient(180deg, #e0eef6 0%, var(--cream) 120px); }

/* Lang gras dat opgroeit en gemaaid wordt (zeisbrigade) */
.bio-tallgrass {
    position: absolute; top: calc(var(--header-total) - var(--grass-height)); height: var(--grass-height);
    background: url('images/Gras-cropped.webp') repeat-x left bottom / auto var(--grass-height),
                url('images/Gras-cropped.webp') repeat-x 37px bottom / auto var(--grass-height);
    transform-origin: bottom center; will-change: transform;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}