/* ===========================================
   NATUURRIJK ANKEVEEN - Biotoop Styles
   Volledige styling voor de levende header
   =========================================== */

/* ===== VARIABELEN ===== */
:root {
    --nav-height: 70px;
    --grass-height: 15px;
    --header-total: calc(var(--nav-height) + var(--grass-height));
    --header-bg: #f8f6f0;
}

/* ===== HEADER ACHTERGROND ===== */
.header-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-total);
    background-color: var(--header-bg);
    z-index: 1000;
    pointer-events: none;
}

/* ===== GRAS ===== */
.header-grass {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    height: var(--grass-height);
    z-index: 1010;
    pointer-events: none;
    overflow: hidden;
}

.garden-grass {
    position: absolute;
    bottom: 0;
    height: var(--grass-height);
    width: auto;
}

.garden-grass:nth-child(1) { left: 0; }
.garden-grass:nth-child(2) { left: 10%; }
.garden-grass:nth-child(3) { left: 20%; }
.garden-grass:nth-child(4) { left: 30%; }
.garden-grass:nth-child(5) { left: 40%; }
.garden-grass:nth-child(6) { left: 50%; }
.garden-grass:nth-child(7) { left: 60%; }
.garden-grass:nth-child(8) { left: 70%; }
.garden-grass:nth-child(9) { left: 80%; }
.garden-grass:nth-child(10) { left: 90%; }

/* ===== BLOEMEN CONTAINER ===== */
.header-garden {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--header-total);
    pointer-events: none;
    overflow: visible;
    z-index: 1035; /* BOVEN header-reeds (1030) zodat wandelaars VOOR riet lopen */
}

/* ===== BLOEMEN ===== */
.garden-flower {
    position: absolute;
    bottom: 3px; /* Hoger zodat ze niet onder gras uitsteken */
    height: auto;
    opacity: 0;
    transform-origin: bottom center;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.garden-flower.size-xs { height: 25px; }
.garden-flower.size-sm { height: 35px; }
.garden-flower.size-md { height: 50px; }
.garden-flower.size-lg { height: 65px; }

/* Gelelis (gele bloemen) - onderkant afknippen zodat wortelkluit niet zichtbaar is */
.garden-flower.lower {
    bottom: 0px;
    clip-path: inset(0 0 15% 0);
}

.garden-flower.blooming {
    animation: bloomFlower 2.5s ease-out forwards;
}

.garden-flower.blooming.mirrored {
    animation: bloomFlowerMirrored 2.5s ease-out forwards;
}

.garden-flower.wilting {
    animation: wiltFlower 1.5s ease-in forwards;
}

@keyframes bloomFlower {
    0% { opacity: 0; transform: scale(0.2) translateY(15px); }
    40% { opacity: 0.6; }
    70% { transform: scale(1.05) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bloomFlowerMirrored {
    0% { opacity: 0; transform: scaleX(-1) scale(0.2) translateY(15px); }
    40% { opacity: 0.6; }
    70% { transform: scaleX(-1) scale(1.05) translateY(-2px); }
    100% { opacity: 1; transform: scaleX(-1) scale(1) translateY(0); }
}

@keyframes wiltFlower {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5) translateY(10px); }
}

/* ===== LISDODDES BIJ VIJVER ===== */
/* Lager geplaatst en over het gras gelayerd */
.garden-lisdodde {
    position: absolute;
    bottom: -12px; /* Lager, voeten in het gras */
    height: auto;
    opacity: 0;
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 1; /* Boven vijver in garden container */
}

.garden-lisdodde.size-sm { height: 40px; }
.garden-lisdodde.size-md { height: 55px; }
.garden-lisdodde.size-lg { height: 70px; }

.garden-lisdodde.blooming {
    animation: bloomFlower 2.5s ease-out forwards;
}

.garden-lisdodde.mirrored.blooming {
    animation: bloomFlowerMirrored 2.5s ease-out forwards;
}

/* ===== VIJVER CONTAINER ===== */
/* Vijver komt ACHTER het gras */
.header-pond {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    overflow: visible;
    z-index: 1005; /* ONDER gras (1010) */
}

.garden-pond {
    position: absolute;
    width: auto;
    opacity: 0;
    transform-origin: top center;
    transition: opacity 2s ease-out;
}

/* Poel 1 - getekend, originele grootte */
.garden-pond.poel1 {
    height: 28px;
    left: 76%;
    top: 12px;
    transform: translateX(-50%);
    animation: fadeInPond 2s ease-out forwards;
}

/* Poel 2 - met lelies en lavendel */
.garden-pond.poel2 {
    height: 85px;
    left: 76%;
    top: -25px;
    transform: translateX(-50%);
}

/* Poel 3 - realistisch met spiegeling */
.garden-pond.poel3 {
    height: 115px;
    left: 76%;
    top: -35px;
    transform: translateX(-50%);
}

/* Fade in animatie voor eerste verschijnen */
.garden-pond.fade-in {
    animation: fadeInPond 2s ease-out forwards;
}

@keyframes fadeInPond {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ===== ROERDOMP ===== */
.garden-roerdomp {
    position: absolute;
    bottom: 8px;
    left: 72%; /* Tussen de twee lisdoddes */
    height: 55px;
    width: auto;
    opacity: 0;
    z-index: -1; /* Achter de vijver */
    animation: roerdompRise 3s ease-out forwards;
    transition: transform 0.8s ease-in-out; /* Smooth flip */
}

/* Roerdomp met af en toe een beweging */
.garden-roerdomp.moving {
    animation: roerdompRise 3s ease-out forwards, roerdompTwitch 15s ease-in-out 4s infinite;
}

/* Gespiegelde roerdomp */
.garden-roerdomp.mirrored {
    transform: scaleX(-1);
}

.garden-roerdomp.mirrored.moving {
    animation: roerdompRiseMirrored 3s ease-out forwards, roerdompTwitchMirrored 15s ease-in-out 4s infinite;
}

@keyframes roerdompRise {
    0% { opacity: 0; transform: translateY(20px); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes roerdompRiseMirrored {
    0% { opacity: 0; transform: scaleX(-1) translateY(20px); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: scaleX(-1) translateY(0); }
}

/* Subtiele beweging - kop even draaien, dan weer stilstaan */
@keyframes roerdompTwitch {
    0% { transform: rotate(0deg); }
    2% { transform: rotate(-3deg); }
    4% { transform: rotate(2deg); }
    6% { transform: rotate(-1deg); }
    8% { transform: rotate(0deg); }
    /* Lang stilstaan */
    100% { transform: rotate(0deg); }
}

@keyframes roerdompTwitchMirrored {
    0% { transform: scaleX(-1) rotate(0deg); }
    2% { transform: scaleX(-1) rotate(3deg); }
    4% { transform: scaleX(-1) rotate(-2deg); }
    6% { transform: scaleX(-1) rotate(1deg); }
    8% { transform: scaleX(-1) rotate(0deg); }
    100% { transform: scaleX(-1) rotate(0deg); }
}

/* ===== OTTER ===== */
/* De GIF toont otter die naar RECHTS rent */
/* Otter beweegt van RECHTS naar LINKS over de hele breedte */
.swimming-otter {
    position: absolute;
    top: -18px;
    height: 35px;
    width: auto;
    z-index: 5;
    animation: otterMove 20s linear forwards;
}

/* Beweging van rechts naar links over hele scherm */
@keyframes otterMove {
    from { left: 100%; }
    to { left: -100px; }
}

/* Otter voor oevers biotoop - komt van links en verdwijnt bij vijver */
.swimming-otter.otter-to-pond {
    transform: scaleX(-1);
    animation: otterToPond 12s ease-out forwards;
}

@keyframes otterToPond {
    0% { 
        left: -80px; 
        opacity: 1;
    }
    70% { 
        left: 62%; 
        opacity: 1;
    }
    85% {
        left: 68%;
        opacity: 0.7;
    }
    100% { 
        left: 72%; 
        opacity: 0;
    }
}

/* ===== SLOBEEND ===== */
.swimming-slobeend {
    position: fixed;
    top: calc(var(--nav-height) + 25px);
    height: 40px;
    width: auto;
    z-index: 5; /* Boven page-header achtergrond, onder tekst */
    pointer-events: none;
}

/* Van vijver naar links */
.swimming-slobeend.slobeend-to-left {
    animation: slobeendToLeft 40s linear forwards;
}

/* Van links terug naar vijver (gespiegeld) */
.swimming-slobeend.slobeend-to-right {
    transform: scaleX(-1);
    animation: slobeendToRight 40s linear forwards;
}

@keyframes slobeendToLeft {
    0% {
        left: 72%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: -100px;
        opacity: 0;
    }
}

@keyframes slobeendToRight {
    0% {
        left: -100px;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 72%;
        opacity: 0;
    }
}

/* ===== GROND DIEREN CONTAINER ===== */
.header-animals-ground {
    position: fixed;
    top: var(--nav-height); /* Start onder de nav */
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    overflow: visible;
    z-index: 1025; /* BOVEN nav (1020) - egel loopt VOOR de nav */
}

/* ===== ZEIS ===== */
.ground-scythe {
    position: absolute;
    height: 110px;
    width: auto;
    top: -65px;
    transform: rotate(-75deg);
    transform-origin: center center;
    opacity: 0;
    transition: opacity 1.5s ease;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
    z-index: 99;
}

.ground-scythe.visible {
    opacity: 1;
}

.ground-scythe.removed {
    opacity: 0;
}

.ground-scythe.ground-scythe-2 {
    transform: none;
    top: -75px;
}

@media (max-width: 768px) {
    .ground-scythe {
        height: 90px;
        top: -55px;
    }
}

/* ===== MAAISEL ===== */
.ground-maaisel {
    position: absolute;
    height: 70px;
    width: auto;
    top: -40px;
    opacity: 0;
    transition: opacity 1.5s ease;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
}

.ground-maaisel.visible {
    opacity: 1;
}

.ground-maaisel.removed {
    opacity: 0;
}

/* Maaisel2 = vers groen, ligt onderop */
.ground-maaisel.maaisel-2 {
    z-index: 100;
    height: 65px;
}

/* Maaisel = gedroogd hooi, ligt bovenop */
.ground-maaisel.maaisel-1 {
    z-index: 101;
    height: 56px;
    top: -35px;
}

@media (max-width: 768px) {
    .ground-maaisel {
        height: 55px;
        top: -30px;
    }
    .ground-maaisel.maaisel-2 {
        height: 50px;
    }
    .ground-maaisel.maaisel-1 {
        height: 44px;
        top: -25px;
    }
}

/* ===== VLIEGENDE DIEREN CONTAINER ===== */
.header-animals-flying {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + 30px);
    pointer-events: none;
    overflow: visible;
    z-index: 1022; /* Boven nav (1020), onder header-garden (1025) */
}

/* ===== EGEL ===== */
.walking-hedgehog {
    position: absolute;
    top: -15px; /* Steekt omhoog vanaf graslijn, maar niet in nav */
    height: 30px;
    width: auto;
}

.walking-hedgehog.walk-right {
    animation: hedgehogWalkRight 45s linear forwards;
}

.walking-hedgehog.walk-left {
    animation: hedgehogWalkLeft 45s linear forwards;
}

@keyframes hedgehogWalkRight {
    0% { left: -60px; transform: scaleX(-1); }
    /* Lopen */
    12% { left: 18%; transform: scaleX(-1); }
    /* Stop 1 - snuffelen */
    13% { left: 18%; transform: scaleX(-1) rotate(-8deg); }
    14% { left: 18%; transform: scaleX(-1) rotate(5deg); }
    15% { left: 18%; transform: scaleX(-1) rotate(-4deg); }
    16% { left: 18%; transform: scaleX(-1) rotate(0deg); }
    /* Verder lopen */
    35% { left: 50%; transform: scaleX(-1); }
    /* Stop 2 - snuffelen */
    36% { left: 50%; transform: scaleX(-1) rotate(-8deg); }
    37% { left: 50%; transform: scaleX(-1) rotate(5deg); }
    38% { left: 50%; transform: scaleX(-1) rotate(0deg); }
    /* Verder lopen */
    60% { left: 85%; transform: scaleX(-1); }
    /* Stop 3 - snuffelen */
    61% { left: 85%; transform: scaleX(-1) rotate(-6deg); }
    62% { left: 85%; transform: scaleX(-1) rotate(4deg); }
    63% { left: 85%; transform: scaleX(-1) rotate(0deg); }
    /* Uit beeld */
    80% { left: calc(100% + 60px); transform: scaleX(-1); }
    100% { left: calc(100% + 60px); transform: scaleX(-1); }
}

@keyframes hedgehogWalkLeft {
    0% { left: calc(100% + 60px); transform: scaleX(1); }
    /* Lopen */
    15% { left: 80%; transform: scaleX(1); }
    /* Stop 1 */
    16% { left: 80%; transform: scaleX(1) rotate(-8deg); }
    17% { left: 80%; transform: scaleX(1) rotate(5deg); }
    18% { left: 80%; transform: scaleX(1) rotate(0deg); }
    /* Verder */
    40% { left: 45%; transform: scaleX(1); }
    /* Stop 2 */
    41% { left: 45%; transform: scaleX(1) rotate(-6deg); }
    42% { left: 45%; transform: scaleX(1) rotate(4deg); }
    43% { left: 45%; transform: scaleX(1) rotate(0deg); }
    /* Verder */
    70% { left: 10%; transform: scaleX(1); }
    /* Stop 3 */
    71% { left: 10%; transform: scaleX(1) rotate(-8deg); }
    72% { left: 10%; transform: scaleX(1) rotate(5deg); }
    73% { left: 10%; transform: scaleX(1) rotate(0deg); }
    /* Uit beeld */
    90% { left: -60px; transform: scaleX(1); }
    100% { left: -60px; transform: scaleX(1); }
}

/* Egel graaft zich in en verdwijnt in het gras */
.walking-hedgehog.burrow {
    animation: hedgehogBurrow 20s ease-in-out forwards;
}

@keyframes hedgehogBurrow {
    0% { left: -60px; top: -15px; transform: scaleX(-1); clip-path: inset(0 0 0 0); }
    25% { left: 30%; top: -15px; transform: scaleX(-1); clip-path: inset(0 0 0 0); }
    /* Snuffelen */
    27% { left: 30%; top: -15px; transform: scaleX(-1) rotate(-8deg); clip-path: inset(0 0 0 0); }
    29% { left: 30%; top: -15px; transform: scaleX(-1) rotate(5deg); clip-path: inset(0 0 0 0); }
    31% { left: 30%; top: -15px; transform: scaleX(-1) rotate(0deg); clip-path: inset(0 0 0 0); }
    /* Beginnen met graven - clip van onderaf */
    40% { left: 32%; top: -15px; transform: scaleX(-1) rotate(10deg); clip-path: inset(0 0 0 0); }
    50% { left: 33%; top: -12px; transform: scaleX(-1) rotate(15deg); clip-path: inset(0 0 10% 0); }
    60% { left: 34%; top: -10px; transform: scaleX(-1) rotate(18deg); clip-path: inset(0 0 30% 0); }
    70% { left: 34%; top: -8px; transform: scaleX(-1) rotate(20deg); clip-path: inset(0 0 55% 0); }
    80% { left: 35%; top: -6px; transform: scaleX(-1) rotate(22deg); clip-path: inset(0 0 80% 0); }
    90% { left: 35%; top: -5px; transform: scaleX(-1) rotate(22deg); clip-path: inset(0 0 95% 0); }
    100% { left: 35%; top: -5px; transform: scaleX(-1) rotate(22deg); clip-path: inset(0 0 100% 0); }
}

/* ===== RUPS ===== */
.crawling-caterpillar {
    position: absolute;
    top: -2px; /* Kruipt net boven het gras */
    height: 18px;
    width: auto;
}

/* Rups kruipt normaal - LANGZAMER */
.crawling-caterpillar.crawl-normal {
    animation: caterpillarCrawl 90s linear forwards;
}

/* Rups verdwijnt in het gras */
.crawling-caterpillar.crawl-burrow {
    animation: caterpillarBurrow 50s ease-in-out forwards;
}

@keyframes caterpillarCrawl {
    0% { left: calc(100% + 40px); }
    10% { left: 85%; }
    12% { left: 85%; }
    30% { left: 55%; }
    33% { left: 55%; }
    55% { left: 30%; }
    58% { left: 30%; }
    80% { left: 5%; }
    82% { left: 5%; }
    95% { left: -40px; }
    100% { left: -40px; }
}

@keyframes caterpillarBurrow {
    0% { left: calc(100% + 40px); top: -10px; clip-path: inset(0 0 0 0); }
    25% { left: 65%; top: -10px; clip-path: inset(0 0 0 0); }
    27% { left: 65%; top: -10px; clip-path: inset(0 0 0 0); }
    45% { left: 50%; top: -10px; clip-path: inset(0 0 0 0); }
    /* Beginnen met ingraven - clip van onderaf */
    50% { left: 50%; top: -8px; clip-path: inset(0 0 0 0); }
    55% { left: 50%; top: -6px; clip-path: inset(0 0 15% 0); }
    60% { left: 50%; top: -4px; clip-path: inset(0 0 35% 0); }
    65% { left: 50%; top: -2px; clip-path: inset(0 0 55% 0); }
    70% { left: 50%; top: 0px; clip-path: inset(0 0 75% 0); }
    75% { left: 50%; top: 2px; clip-path: inset(0 0 90% 0); }
    80% { left: 50%; top: 3px; clip-path: inset(0 0 100% 0); }
    100% { left: 50%; top: 3px; clip-path: inset(0 0 100% 0); }
}

/* ===== LIEVEHEERSBEESTJE ===== */
.crawling-ladybug {
    position: absolute;
    top: -8px;
    height: 15px;
    width: auto;
    animation: ladybugCrawl 15s linear forwards;
}

@keyframes ladybugCrawl {
    0% { left: -30px; transform: scaleX(-1); }
    15% { left: 15%; transform: scaleX(-1); }
    17% { left: 15%; transform: scaleX(-1) rotate(-10deg); }
    19% { left: 15%; transform: scaleX(-1) rotate(0deg); }
    40% { left: 40%; transform: scaleX(-1); }
    42% { left: 40%; transform: scaleX(-1) rotate(8deg); }
    44% { left: 40%; transform: scaleX(-1) rotate(0deg); }
    70% { left: 70%; transform: scaleX(-1); }
    100% { left: calc(100% + 30px); transform: scaleX(-1); }
}

/* ===== VLINDER ===== */
.flying-butterfly {
    position: absolute;
    height: 25px;
    width: auto;
}

/* Oranje vlinder - sneller, zigzag */
.flying-butterfly.flutter-right {
    animation: butterflyFlutterRight 18s ease-in-out forwards;
}

.flying-butterfly.flutter-left {
    animation: butterflyFlutterLeft 18s ease-in-out forwards;
}

/* Blauwe vlinder - stopt 2x om te rusten op bloem/letter */
.flying-butterfly.flutter-right-smooth {
    animation: butterflyRestingRight 28s ease-in-out forwards;
}

.flying-butterfly.flutter-left-smooth {
    animation: butterflyRestingLeft 28s ease-in-out forwards;
}

/* Snelle vliegpaden over hele breedte */
.flying-butterfly.flight-path-1 {
    animation: butterflyPath1 12s ease-in-out forwards;
}

.flying-butterfly.flight-path-2 {
    animation: butterflyPath2 14s ease-in-out forwards;
}

@keyframes butterflyPath1 {
    0% { left: -40px; top: 50px; transform: rotate(10deg); }
    15% { left: 15%; top: 25px; transform: rotate(-15deg); }
    30% { left: 35%; top: 55px; transform: rotate(20deg); }
    45% { left: 55%; top: 20px; transform: rotate(-10deg); }
    60% { left: 70%; top: 45px; transform: rotate(15deg); }
    75% { left: 85%; top: 30px; transform: rotate(-20deg); }
    100% { left: calc(100% + 40px); top: 40px; transform: rotate(10deg); }
}

@keyframes butterflyPath2 {
    0% { left: calc(100% + 40px); top: 35px; transform: scaleX(-1) rotate(-10deg); }
    15% { left: 85%; top: 55px; transform: scaleX(-1) rotate(15deg); }
    30% { left: 65%; top: 25px; transform: scaleX(-1) rotate(-20deg); }
    45% { left: 45%; top: 50px; transform: scaleX(-1) rotate(10deg); }
    60% { left: 30%; top: 20px; transform: scaleX(-1) rotate(-15deg); }
    75% { left: 15%; top: 45px; transform: scaleX(-1) rotate(20deg); }
    100% { left: -40px; top: 35px; transform: scaleX(-1) rotate(-10deg); }
}

@keyframes butterflyFlutterRight {
    0% { left: -40px; top: 60px; transform: rotate(15deg); }
    10% { left: 10%; top: 35px; transform: rotate(-10deg); }
    20% { left: 22%; top: 55px; transform: rotate(20deg); }
    30% { left: 35%; top: 25px; transform: rotate(-15deg); }
    40% { left: 48%; top: 50px; transform: rotate(10deg); }
    50% { left: 58%; top: 30px; transform: rotate(-20deg); }
    60% { left: 70%; top: 55px; transform: rotate(15deg); }
    70% { left: 80%; top: 35px; transform: rotate(-10deg); }
    80% { left: 90%; top: 50px; transform: rotate(20deg); }
    90% { left: 98%; top: 25px; transform: rotate(-15deg); }
    100% { left: calc(100% + 40px); top: 45px; transform: rotate(10deg); }
}

@keyframes butterflyFlutterLeft {
    0% { left: calc(100% + 40px); top: 50px; transform: scaleX(-1) rotate(15deg); }
    10% { left: 90%; top: 30px; transform: scaleX(-1) rotate(-10deg); }
    20% { left: 78%; top: 55px; transform: scaleX(-1) rotate(20deg); }
    30% { left: 65%; top: 25px; transform: scaleX(-1) rotate(-15deg); }
    40% { left: 52%; top: 50px; transform: scaleX(-1) rotate(10deg); }
    50% { left: 40%; top: 35px; transform: scaleX(-1) rotate(-20deg); }
    60% { left: 28%; top: 55px; transform: scaleX(-1) rotate(15deg); }
    70% { left: 18%; top: 30px; transform: scaleX(-1) rotate(-10deg); }
    80% { left: 8%; top: 50px; transform: scaleX(-1) rotate(20deg); }
    90% { left: -2%; top: 25px; transform: scaleX(-1) rotate(-15deg); }
    100% { left: -50px; top: 40px; transform: scaleX(-1) rotate(10deg); }
}

/* Blauwe vlinder stopt 2x - rust op bloem, fladdert, gaat verder */
@keyframes butterflyRestingRight {
    0% { left: -40px; top: 30px; transform: rotate(10deg); }
    12% { left: 18%; top: 58px; transform: rotate(-5deg); }
    /* Stop 1: rust op bloem */
    15% { left: 22%; top: 62px; transform: rotate(0deg); }
    16% { left: 22%; top: 62px; transform: rotate(5deg); }
    17% { left: 22%; top: 61px; transform: rotate(-3deg); }
    18% { left: 22%; top: 62px; transform: rotate(4deg); }
    19% { left: 22%; top: 61px; transform: rotate(-2deg); }
    22% { left: 22%; top: 62px; transform: rotate(0deg); }
    /* Verder vliegen */
    35% { left: 45%; top: 35px; transform: rotate(-8deg); }
    48% { left: 58%; top: 55px; transform: rotate(5deg); }
    /* Stop 2: rust op bloem */
    52% { left: 62%; top: 60px; transform: rotate(0deg); }
    53% { left: 62%; top: 60px; transform: rotate(-4deg); }
    54% { left: 62%; top: 59px; transform: rotate(5deg); }
    55% { left: 62%; top: 60px; transform: rotate(-3deg); }
    56% { left: 62%; top: 59px; transform: rotate(4deg); }
    60% { left: 62%; top: 60px; transform: rotate(0deg); }
    /* Verder en weg */
    75% { left: 82%; top: 40px; transform: rotate(-10deg); }
    90% { left: 95%; top: 20px; transform: rotate(-15deg); }
    100% { left: calc(100% + 50px); top: -20px; transform: rotate(-20deg); }
}

@keyframes butterflyRestingLeft {
    0% { left: calc(100% + 40px); top: 25px; transform: scaleX(-1) rotate(10deg); }
    12% { left: 78%; top: 55px; transform: scaleX(-1) rotate(-5deg); }
    /* Stop 1 */
    15% { left: 75%; top: 60px; transform: scaleX(-1) rotate(0deg); }
    16% { left: 75%; top: 60px; transform: scaleX(-1) rotate(-5deg); }
    17% { left: 75%; top: 59px; transform: scaleX(-1) rotate(3deg); }
    18% { left: 75%; top: 60px; transform: scaleX(-1) rotate(-4deg); }
    19% { left: 75%; top: 59px; transform: scaleX(-1) rotate(2deg); }
    22% { left: 75%; top: 60px; transform: scaleX(-1) rotate(0deg); }
    /* Verder */
    35% { left: 52%; top: 35px; transform: scaleX(-1) rotate(8deg); }
    48% { left: 38%; top: 55px; transform: scaleX(-1) rotate(-5deg); }
    /* Stop 2 */
    52% { left: 35%; top: 60px; transform: scaleX(-1) rotate(0deg); }
    53% { left: 35%; top: 60px; transform: scaleX(-1) rotate(4deg); }
    54% { left: 35%; top: 59px; transform: scaleX(-1) rotate(-5deg); }
    55% { left: 35%; top: 60px; transform: scaleX(-1) rotate(3deg); }
    56% { left: 35%; top: 59px; transform: scaleX(-1) rotate(-4deg); }
    60% { left: 35%; top: 60px; transform: scaleX(-1) rotate(0deg); }
    /* Verder en omhoog weg */
    75% { left: 15%; top: 35px; transform: scaleX(-1) rotate(10deg); }
    90% { left: 2%; top: 10px; transform: scaleX(-1) rotate(20deg); }
    100% { left: -50px; top: -30px; transform: scaleX(-1) rotate(25deg); }
}

/* ===== LIEVEHEERSBEESTJE ===== */
.flying-ladybug {
    position: absolute;
    bottom: 10px;
    height: 18px;
    width: auto;
    animation: ladybugFlyAway 8s ease-in forwards;
}

@keyframes ladybugFlyAway {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    20% { transform: translateY(-5px) rotate(-5deg); }
    40% { transform: translateY(-20px) rotate(-15deg); opacity: 1; }
    60% { transform: translateY(-40px) rotate(-25deg); }
    80% { transform: translateY(-70px) rotate(-35deg); opacity: 0.5; }
    100% { transform: translateY(-120px) rotate(-45deg); opacity: 0; }
}

/* ===== DANSENDE VLINDERS BIJ VIJVER ===== */
.pond-butterfly {
    position: absolute;
    height: 18px; /* Kleiner gemaakt */
    width: auto;
    z-index: 60;
    opacity: 0;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
}

.pond-butterfly.mirrored {
    transform: scaleX(-1);
}

.pond-butterfly.flying-right {
    transform: scaleX(1);
}

.pond-butterfly.flying-left {
    transform: scaleX(-1);
}

.pond-butterfly.mirrored.flying-right {
    transform: scaleX(-1);
}

.pond-butterfly.mirrored.flying-left {
    transform: scaleX(1);
}

/* ===== LADYBUG BIJ VIJVER ===== */
.pond-ladybug {
    position: absolute;
    bottom: 10px;
    height: 18px;
    width: auto;
    z-index: 55;
    animation: pondLadybugFly 8s ease-in-out forwards;
}

@keyframes pondLadybugFly {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    15% { transform: translateY(-8px) rotate(-8deg); }
    30% { transform: translateY(-25px) rotate(-5deg); opacity: 1; }
    50% { transform: translateY(-45px) rotate(-15deg); }
    70% { transform: translateY(-35px) rotate(-10deg); opacity: 0.8; }
    85% { transform: translateY(-60px) rotate(-20deg); opacity: 0.5; }
    100% { transform: translateY(-90px) rotate(-30deg); opacity: 0; }
}

/* ===== IJSVOGEL ===== */
/* GIF kijkt naar LINKS */
/* Komt van rechts, bidt boven vijver, duikt, vliegt gespiegeld terug naar rechts */
.flying-kingfisher {
    position: fixed;
    height: 45px;
    width: auto;
    z-index: 1040; /* Boven garden (1035) zodat ie voor roerdomp vliegt */
    animation: kingfisherDive 5s ease-in-out forwards;
    pointer-events: none;
}

@keyframes kingfisherDive {
    /* Komt van rechtsboven - NIET gespiegeld (kijkt naar links = vooruit) */
    0% { 
        left: calc(100% + 50px); 
        top: 0px; 
        transform: scaleX(1) rotate(-20deg); 
        opacity: 1;
    }
    /* Arriveert boven vijver */
    25% { 
        left: 72%; 
        top: 55px; 
        transform: scaleX(1) rotate(0deg); 
    }
    /* Bidt (hangt stil) */
    40% { 
        left: 72%; 
        top: 58px; 
        transform: scaleX(1) rotate(5deg); 
    }
    /* Duikt! */
    50% { 
        left: 72%; 
        top: 85px; 
        transform: scaleX(1) rotate(70deg); 
    }
    /* Plons */
    55% { 
        left: 72%; 
        top: 90px; 
        transform: scaleX(1) rotate(45deg); 
    }
    /* Komt omhoog - NU GESPIEGELD (kijkt naar rechts = vooruit terug) */
    65% { 
        left: 72%; 
        top: 75px; 
        transform: scaleX(-1) rotate(20deg); 
    }
    /* Vliegt terug naar rechtsboven */
    100% { 
        left: calc(100% + 50px); 
        top: 0px; 
        transform: scaleX(-1) rotate(-20deg); 
        opacity: 1;
    }
}

/* Laptop/desktop: ijsvogel duikt dieper */
@media (min-width: 768px) {
    @keyframes kingfisherDive {
        0% { 
            left: calc(100% + 50px); 
            top: 0px; 
            transform: scaleX(1) rotate(-20deg); 
            opacity: 1;
        }
        25% { 
            left: 72%; 
            top: 60px; 
            transform: scaleX(1) rotate(0deg); 
        }
        40% { 
            left: 72%; 
            top: 65px; 
            transform: scaleX(1) rotate(5deg); 
        }
        50% { 
            left: 72%; 
            top: 60px; 
            transform: scaleX(1) rotate(70deg); 
        }
        55% { 
            left: 72%; 
            top: 68px; 
            transform: scaleX(1) rotate(45deg); 
        }
        65% { 
            left: 72%; 
            top: 45px; 
            transform: scaleX(-1) rotate(20deg); 
        }
        100% { 
            left: calc(100% + 50px); 
            top: -50px; 
            transform: scaleX(-1) rotate(-20deg); 
            opacity: 1;
        }
    }
}

/* ===== ZEEAREND ===== */
/* Vliegt heel hoog en klein in de verte, van rechts naar links */
/* Afbeelding kijkt naar links = geen spiegeling nodig */
.flying-eagle {
    position: absolute;
    height: 20px; /* Klein in de verte */
    width: auto;
    z-index: 100;
    opacity: 0.75;
    animation: eagleFly 18s linear forwards;
}

@keyframes eagleFly {
    0% { 
        left: calc(100% + 30px); 
        top: 35px; /* Start lager */
    }
    100% { 
        left: 5%; /* Verdwijnt boven "Natuurrijk Ankeveen" links */
        top: -30px; /* Stijgt uit beeld */
    }
}

/* ===== GANZEN ===== */
/* Enkele gans - kijkt naar links, vliegt naar links */
.flying-goose {
    position: absolute;
    height: 28px;
    width: auto;
    z-index: 50;
    opacity: 0.85;
    animation: gooseFlyLeft 10s linear forwards;
}

@keyframes gooseFlyLeft {
    0% { 
        left: calc(100% + 40px); 
        top: 25px;
    }
    100% { 
        left: -60px;
        top: 15px; /* Licht stijgend */
    }
}

/* Groep ganzen - vliegen naar rechts */
.flying-geese {
    position: absolute;
    height: 22px;
    width: auto;
    z-index: 50;
    opacity: 0.8;
    animation: geeseFlyRight 14s linear forwards;
}

@keyframes geeseFlyRight {
    0% { 
        left: -80px; 
        top: 20px;
    }
    100% { 
        left: calc(100% + 80px);
        top: 10px; /* Licht stijgend */
    }
}

/* ===== ZWALUW ===== */
.flying-swallow {
    position: absolute;
    height: 28px;
    width: auto;
}

/* Swallow path animations voor biotopen */
.flying-swallow.swallow-path-1 {
    animation: swallowPath1 8s linear forwards;
}

.flying-swallow.swallow-path-2 {
    animation: swallowPath2 10s linear forwards;
}

.flying-swallow.swallow-path-3 {
    animation: swallowPath3 7s linear forwards;
}

@keyframes swallowPath1 {
    0%   { left: -80px; top: 20px; transform: scaleX(1); }
    20%  { left: 15%;   top: 50px; transform: scaleX(1); }
    40%  { left: 35%;   top: 35px; transform: scaleX(1); }
    60%  { left: 60%;   top: 55px; transform: scaleX(1); }
    80%  { left: 85%;   top: 25px; transform: scaleX(1); }
    100% { left: calc(100% + 80px); top: 40px; transform: scaleX(1); }
}

@keyframes swallowPath2 {
    0%   { left: calc(100% + 80px); top: 45px; transform: scaleX(-1); }
    25%  { left: 75%;   top: 20px; transform: scaleX(-1); }
    50%  { left: 45%;   top: 55px; transform: scaleX(-1); }
    75%  { left: 20%;   top: 30px; transform: scaleX(-1); }
    100% { left: -80px; top: 50px; transform: scaleX(-1); }
}

@keyframes swallowPath3 {
    0%   { left: -80px; top: 55px; transform: scaleX(1); }
    30%  { left: 25%;   top: 25px; transform: scaleX(1); }
    50%  { left: 50%;   top: 45px; transform: scaleX(1); }
    70%  { left: 75%;   top: 20px; transform: scaleX(1); }
    100% { left: calc(100% + 80px); top: 35px; transform: scaleX(1); }
}

/* Naar RECHTS vliegend - NIET gespiegeld (vogel kijkt al naar rechts) */
.flying-swallow.fly-right-normal {
    animation: flyRight 6s linear forwards;
}

/* Naar RECHTS vliegend - WEL gespiegeld (vogel kijkt naar links) */
.flying-swallow.fly-right-mirrored {
    animation: flyRightMirrored 6s linear forwards;
}

/* Naar LINKS vliegend - NIET gespiegeld (vogel kijkt al naar links) */
.flying-swallow.fly-left-normal {
    animation: flyLeft 6s linear forwards;
}

/* Naar LINKS vliegend - WEL gespiegeld (vogel kijkt naar rechts) */
.flying-swallow.fly-left-mirrored {
    animation: flyLeftMirrored 6s linear forwards;
}

/* ===== VLUCHTPADEN - Mooie langgerekte U-baan, constante snelheid ===== */

/* Naar RECHTS - normaal */
@keyframes flyRight {
    0%   { left: -100px; top: 15px; transform: scaleX(1); }
    15%  { left: 10%;    top: 45px; transform: scaleX(1); }
    35%  { left: 30%;    top: 60px; transform: scaleX(1); }
    50%  { left: 50%;    top: 55px; transform: scaleX(1); }
    65%  { left: 70%;    top: 45px; transform: scaleX(1); }
    85%  { left: 90%;    top: 20px; transform: scaleX(1); }
    100% { left: calc(100% + 100px); top: 10px; transform: scaleX(1); }
}

/* Naar RECHTS - gespiegeld */
@keyframes flyRightMirrored {
    0%   { left: -100px; top: 15px; transform: scaleX(-1); }
    15%  { left: 10%;    top: 45px; transform: scaleX(-1); }
    35%  { left: 30%;    top: 60px; transform: scaleX(-1); }
    50%  { left: 50%;    top: 55px; transform: scaleX(-1); }
    65%  { left: 70%;    top: 45px; transform: scaleX(-1); }
    85%  { left: 90%;    top: 20px; transform: scaleX(-1); }
    100% { left: calc(100% + 100px); top: 10px; transform: scaleX(-1); }
}

/* Naar LINKS - normaal */
@keyframes flyLeft {
    0%   { left: calc(100% + 100px); top: 10px; transform: scaleX(1); }
    15%  { left: 90%;    top: 35px; transform: scaleX(1); }
    35%  { left: 70%;    top: 55px; transform: scaleX(1); }
    50%  { left: 50%;    top: 60px; transform: scaleX(1); }
    65%  { left: 30%;    top: 50px; transform: scaleX(1); }
    85%  { left: 10%;    top: 25px; transform: scaleX(1); }
    100% { left: -100px; top: 15px; transform: scaleX(1); }
}

/* Naar LINKS - gespiegeld */
@keyframes flyLeftMirrored {
    0%   { left: calc(100% + 100px); top: 10px; transform: scaleX(-1); }
    15%  { left: 90%;    top: 35px; transform: scaleX(-1); }
    35%  { left: 70%;    top: 55px; transform: scaleX(-1); }
    50%  { left: 50%;    top: 60px; transform: scaleX(-1); }
    65%  { left: 30%;    top: 50px; transform: scaleX(-1); }
    85%  { left: 10%;    top: 25px; transform: scaleX(-1); }
    100% { left: -100px; top: 15px; transform: scaleX(-1); }
}

/* ===== ZWALUW VARIATIES - vliegt boven uit beeld ===== */

/* Naar rechts, omhoog uit beeld - normaal */
.flying-swallow.fly-right-up-normal {
    animation: flyRightUp 5s linear forwards;
}

/* Naar rechts, omhoog uit beeld - gespiegeld */
.flying-swallow.fly-right-up-mirrored {
    animation: flyRightUpMirrored 5s linear forwards;
}

/* Naar links, omhoog uit beeld - normaal */
.flying-swallow.fly-left-up-normal {
    animation: flyLeftUp 5s linear forwards;
}

/* Naar links, omhoog uit beeld - gespiegeld */
.flying-swallow.fly-left-up-mirrored {
    animation: flyLeftUpMirrored 5s linear forwards;
}

@keyframes flyRightUp {
    0%   { left: -100px; top: 50px; transform: scaleX(1); }
    25%  { left: 20%;    top: 60px; transform: scaleX(1); }
    50%  { left: 45%;    top: 40px; transform: scaleX(1); }
    75%  { left: 70%;    top: 15px; transform: scaleX(1); }
    100% { left: 90%;    top: -50px; transform: scaleX(1); }
}

@keyframes flyRightUpMirrored {
    0%   { left: -100px; top: 50px; transform: scaleX(-1); }
    25%  { left: 20%;    top: 60px; transform: scaleX(-1); }
    50%  { left: 45%;    top: 40px; transform: scaleX(-1); }
    75%  { left: 70%;    top: 15px; transform: scaleX(-1); }
    100% { left: 90%;    top: -50px; transform: scaleX(-1); }
}

@keyframes flyLeftUp {
    0%   { left: calc(100% + 100px); top: 55px; transform: scaleX(1); }
    25%  { left: 75%;    top: 60px; transform: scaleX(1); }
    50%  { left: 50%;    top: 40px; transform: scaleX(1); }
    75%  { left: 25%;    top: 10px; transform: scaleX(1); }
    100% { left: 10%;    top: -50px; transform: scaleX(1); }
}

@keyframes flyLeftUpMirrored {
    0%   { left: calc(100% + 100px); top: 55px; transform: scaleX(-1); }
    25%  { left: 75%;    top: 60px; transform: scaleX(-1); }
    50%  { left: 50%;    top: 40px; transform: scaleX(-1); }
    75%  { left: 25%;    top: 10px; transform: scaleX(-1); }
    100% { left: 10%;    top: -50px; transform: scaleX(-1); }
}

/* ===== ZWALUWTIL ===== */
.zwaluwtil {
    position: absolute;
    bottom: 3px;
    width: auto;
    opacity: 0;
    transition: opacity 1.5s ease;
    transform: translateX(-50%);
    z-index: 50;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}

.zwaluwtil.visible {
    opacity: 1;
}

/* ===== HUISZWALUWNESTJES ===== */
.swallow-nest {
    position: absolute;
    top: 0;
    width: auto;
    transform: translateX(-50%);
    z-index: 60;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));
    animation: nestAppear 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes nestAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Zwaluwen die om de til cirkelen */
.flying-swallow.til-circle {
    transform-origin: center center;
}

.flying-swallow.til-circle.circle-cw {
    animation: swallowCircleCW 5s ease-in-out forwards;
}

.flying-swallow.til-circle.circle-ccw {
    animation: swallowCircleCCW 5s ease-in-out forwards;
}

/* Met de klok mee om de til */
@keyframes swallowCircleCW {
    0%   { 
        transform: translate(-80px, -20px) scaleX(1); 
        opacity: 0;
    }
    10%  { 
        transform: translate(-60px, -15px) scaleX(1); 
        opacity: 1;
    }
    25%  { 
        transform: translate(-25px, -45px) scaleX(1); 
    }
    40%  { 
        transform: translate(20px, -35px) scaleX(-1); 
    }
    55%  { 
        transform: translate(40px, -5px) scaleX(-1); 
    }
    70%  { 
        transform: translate(15px, 15px) scaleX(-1); 
    }
    85%  { 
        transform: translate(-35px, 0px) scaleX(1); 
    }
    100% { 
        transform: translate(-100px, -15px) scaleX(1); 
        opacity: 0;
    }
}

/* Tegen de klok in om de til */
@keyframes swallowCircleCCW {
    0%   { 
        transform: translate(80px, -20px) scaleX(-1); 
        opacity: 0;
    }
    10%  { 
        transform: translate(60px, -15px) scaleX(-1); 
        opacity: 1;
    }
    25%  { 
        transform: translate(25px, -45px) scaleX(-1); 
    }
    40%  { 
        transform: translate(-20px, -35px) scaleX(1); 
    }
    55%  { 
        transform: translate(-40px, -5px) scaleX(1); 
    }
    70%  { 
        transform: translate(-15px, 15px) scaleX(1); 
    }
    85%  { 
        transform: translate(35px, 0px) scaleX(-1); 
    }
    100% { 
        transform: translate(100px, -15px) scaleX(-1); 
        opacity: 0;
    }
}

/* Responsive zwaluwtil */
@media (max-width: 767px) {
    .zwaluwtil {
        height: 60px !important;
    }
    .swallow-nest {
        height: 30px !important;
    }
}

/* ===== RESPONSIVE ===== */
/* ===== RIETKRAAG BERGSE PAD ===== */
.header-reeds {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--header-total);
    pointer-events: none;
    overflow: visible;
    z-index: 1030;
}

.reed-clump {
    position: absolute;
    bottom: 3px;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 1.2s ease;
    transform: translateX(-50%);
    z-index: 120; /* Vogels vliegen erachter */
}

.reed-clump.visible {
    opacity: 1;
}

.reed-clump.cutting {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reed-plant {
    width: auto;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.15));
}

/* Bomen */
.garden-tree {
    position: absolute;
    bottom: 3px;
    width: auto;
    opacity: 0;
    transition: opacity 1.5s ease;
    transform: translateX(-50%);
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
    z-index: 130; /* Vogels vliegen erachter, bomen voor riet */
}

.garden-tree.visible {
    opacity: 1;
}

.garden-tree.cutting {
    opacity: 0;
    transform: translateX(-50%) translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ===== MARIA BEELDJE ===== */
.maria-statue {
    position: absolute;
    bottom: 8px; /* Iets omhoog zodat er gras onder zichtbaar is */
    width: auto;
    transform: translateX(-50%);
    z-index: 115; /* VOOR Lisdodde (110), ACHTER riet (120), VOOR wandelaars (100) */
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

/* ===== BANKJE ===== */
.bankje {
    position: absolute;
    bottom: 5px;
    width: auto;
    transform: translateX(-50%);
    z-index: 115; /* Zelfde layer als Maria */
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

/* ===== WANDELAARS ===== */
.walking-person {
    position: absolute;
    bottom: -5px; /* Voeten in het gras */
    height: 60px;
    z-index: 118; /* VOOR Maria (115), zodat ze Maria bedekken bij passeren */
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
    opacity: 0;
    transition: left 20s linear, opacity 0.5s;
}

/* Responsive rietkraag */
@media (max-width: 767px) {
    .reed-clump .reed-plant {
        height: 50px !important;
    }
    .garden-tree {
        height: 100px !important;
    }
    .walking-person {
        height: 40px !important;
        bottom: -3px;
    }
    .maria-statue {
        height: 35px !important;
        bottom: 5px !important;
    }
    .bankje {
        height: 25px !important;
        bottom: 3px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .reed-clump .reed-plant {
        height: 65px !important;
    }
    .garden-tree {
        height: 120px !important;
    }
    .walking-person {
        height: 50px !important;
    }
    .maria-statue {
        height: 45px !important;
        bottom: 6px !important;
    }
    .bankje {
        height: 32px !important;
        bottom: 4px !important;
    }
}

@media (max-width: 767px) {
    :root {
        --nav-height: 60px;
        --grass-height: 12px;
    }
    .garden-flower.size-xs { height: 18px; }
    .garden-flower.size-sm { height: 25px; }
    .garden-flower.size-md { height: 35px; }
    .garden-flower.size-lg { height: 45px; }
    .walking-hedgehog { height: 22px; top: -12px; }
    .crawling-caterpillar { height: 12px; top: -1px; }
    .crawling-ladybug { height: 10px; top: -5px; }
    .flying-butterfly { height: 18px; }
    .flying-swallow { height: 20px; }
    .garden-roerdomp { height: 40px; }
    .swimming-otter { height: 25px; top: -15px; }
    .swimming-slobeend { height: 30px; top: calc(var(--nav-height) + 15px); }
    .garden-lisdodde.size-sm { height: 30px; }
    .garden-lisdodde.size-md { height: 40px; }
    .garden-lisdodde.size-lg { height: 50px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --nav-height: 65px;
        --grass-height: 14px;
    }
    .garden-flower.size-xs { height: 22px; }
    .garden-flower.size-sm { height: 30px; }
    .garden-flower.size-md { height: 42px; }
    .garden-flower.size-lg { height: 55px; }
    .walking-hedgehog { height: 26px; top: -14px; }
    .crawling-caterpillar { height: 15px; top: -2px; }
    .crawling-ladybug { height: 12px; top: -6px; }
    .garden-roerdomp { height: 48px; }
    .swimming-otter { height: 30px; top: -16px; }
    .garden-lisdodde.size-sm { height: 35px; }
    .garden-lisdodde.size-md { height: 48px; }
    .garden-lisdodde.size-lg { height: 60px; }
}

@media (min-width: 1200px) {
    :root {
        --nav-height: 75px;
        --grass-height: 18px;
    }
    .garden-flower.size-xs { height: 30px; }
    .garden-flower.size-sm { height: 40px; }
    .garden-flower.size-md { height: 55px; }
    .garden-flower.size-lg { height: 75px; }
    .walking-hedgehog { height: 35px; top: -18px; }
    .crawling-caterpillar { height: 20px; top: -3px; }
    .crawling-ladybug { height: 18px; top: -10px; }
    .flying-butterfly { height: 30px; }
    .flying-swallow { height: 32px; }
    .garden-roerdomp { height: 65px; }
    .swimming-otter { height: 40px; top: -20px; }
    .garden-lisdodde.size-sm { height: 45px; }
    .garden-lisdodde.size-md { height: 60px; }
    .garden-lisdodde.size-lg { height: 75px; }
}