/* =========================================================
   The Koffiets duck — mascotte op de publieke site (V3).
   Regels: 1 à 3 eendjes per pagina, elk met een reden op die plek; nooit over tekst of knoppen;
   altijd decoratief (aria-hidden, pointer-events: none). Kopjes (duck--head) zijn open aan de onderkant:
   hun onderrand staat altijd op een lijn of rand, zodat ze erover gluren.
   Eén beweging: een klein hupje (volledige eend) of knikje (kopje) wanneer de eend in beeld komt,
   vanuit een zichtbare rusttoestand (ducks.js zet .is-in). Geen beweging bij prefers-reduced-motion.
   Macro: templates/public/_duck.twig. Enkel V3-tokens (brand.css).
   ====================================================== */

.duck {
    position: absolute;
    z-index: 1;
    display: block;
    width: calc(var(--duck-w, 96px) * var(--duck-scale, 1));
    line-height: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: 50% 100%;
}
.duck > img { display: block; width: 100%; height: auto; }
.duck--inline { position: relative; z-index: auto; }

@media (max-width: 1024px) { .duck { --duck-scale: .85; } }
@media (max-width: 640px)  { .duck { --duck-scale: .7; } }

/* ---------- Beweging (één signatuur) ---------- */
@keyframes duck-hop {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    30% { translate: 0 -8px; rotate: -3deg; }
    55% { translate: 0 0; rotate: 2deg; }
    75% { translate: 0 0; rotate: -1deg; }
}
@keyframes duck-nod {
    0%, 100% { rotate: 0deg; }
    30% { rotate: -7deg; }
    60% { rotate: 4deg; }
    80% { rotate: -1deg; }
}
.duck.is-in { animation: duck-hop 720ms var(--k-ease) both; }
.duck--head.is-in { animation-name: duck-nod; }
@media (prefers-reduced-motion: reduce) {
    .duck.is-in { animation: none; }
}

/* ---------- Footer: eend wandelt over de bovenrand (kopjes gluren erover op statuspagina's) ---------- */
.site-footer { position: relative; }
.duck--footer {
    bottom: 100%;
    right: calc(max(var(--k-gutter), (100% - var(--k-container)) / 2) + var(--k-8));
}
/* Op gsm loopt de laatste sectie tot tegen de footer: daar zou de eend links bedekken. */
@media (max-width: 640px) {
    .duck--footer { display: none; }
    /* Gluurkopjes (404, bedanktpagina's) blijven wel: klein en rechts, ze steken amper boven de footerlijn uit. */
    .duck--head.duck--footer { display: block; --duck-scale: .7; right: var(--k-gutter); }
}

/* ---------- Home: hero — de eend rijdt met de bakfiets het beeld binnen ---------- */
.duck--ride { left: -5%; bottom: 6%; }
@media (max-width: 860px) { .duck--ride { --duck-scale: .6; left: -6%; bottom: 4%; } }
@media (max-width: 640px) { .duck--ride { --duck-scale: .5; } }

/* ---------- Beeldkaart (abonnement-hero, teaser): eend zit/gluurt vanaf de onderrand van het vlak ---------- */
.duck--card-left { left: 6%; bottom: 0; }
.duck--card-right { right: 9%; bottom: 0; }

/* ---------- Shop: shopping-eend staat op de onderrand van het roze kopvlak ---------- */
.shop-filter { position: relative; }
.duck--shop { right: 0; bottom: calc(-1 * var(--k-6)); }
/* Onder 1024 px lopen de filterchips over twee rijen tot tegen de rechterrand: dan zou de eend er een bedekken. */
@media (max-width: 1023px) { .duck--shop { display: none; } }

/* ---------- Productpagina: leveringseend onder het beeld, op weg naar je deur ---------- */
.duck--pdp { top: 100%; right: var(--k-2); margin-top: var(--k-3); }
@media (max-width: 767px) { .duck--pdp { display: none; } }

/* ---------- Abonnement: lezende eend bij de vragen ---------- */
.sb-faq__grid { position: relative; }
.duck--faq { left: var(--k-gutter); top: calc(var(--k-6) + var(--k-5)); }
@media (max-width: 899px) { .duck--faq { display: none; } }

/* ---------- Koffiefiets: verkenner op de lijn onder de kop; moe kopje boven een rustdag ---------- */
.bk-head { position: relative; }
.duck--bike-head { right: var(--k-gutter); bottom: 0; }
@media (max-width: 640px) { .duck--bike-head { --duck-scale: .55; } }
.bk-state { position: relative; }
.duck--rest { right: 0; bottom: 100%; }

/* ---------- Events: "Let's go!" bij het formulier; verliefd kopje in de bedankstaat ---------- */
.duck--events { margin-top: var(--k-4); }
@media (max-width: 860px) { .duck--events { --duck-scale: .6; margin-top: 0; align-self: flex-end; } }
.ev-done { position: relative; }
.duck--done { right: var(--k-5); bottom: 0; }

/* ---------- Lege staten: kopje gluurt over een korte lijn ---------- */
.duck--ledge {
    width: calc(var(--duck-w, 96px) * var(--duck-scale, 1) + 2 * var(--k-2));
    padding-inline: var(--k-2);
    border-bottom: 1px solid var(--k-line);
    margin-bottom: var(--k-1);
}

/* ---------- Over ons: de eend van alle kanten ---------- */
.duck-trio { display: grid; justify-items: start; gap: var(--k-1); margin-top: var(--k-3); }
.duck-trio__row { display: flex; align-items: flex-end; gap: var(--k-2); }
.duck-trio__cap { margin: 0; color: var(--k-muted); font-size: 14px; line-height: 22px; }
@media (min-width: 1100px) {
    .page-intro__inner { position: relative; }
    .duck-trio { position: absolute; right: var(--k-gutter); bottom: 0; margin: 0; justify-items: center; }
}