/* ============================================================
   beweging.css — de bewegingslaag.

   Apart van stijl.css omdat die is uitgemeten en werkt; wat hier staat is toegevoegd
   ná de omzetting naar WordPress en moet los te beoordelen en los terug te draaien zijn.

   Uitgangspunt: beweging moet iets dóén. Ze wijst waar je moet kijken, ze maakt duidelijk
   dat iets aanklikbaar is, of ze geeft een lange pagina ritme. Beweging die alleen
   opvalt omdat ze beweegt haalt de aandacht juist wég van het eten.

   Alles hieronder staat uit voor wie in zijn systeem heeft aangegeven minder beweging te
   willen. Dat is geen extraatje: voor mensen met evenwichtsklachten is schuivende inhoud
   misselijkmakend.
   ============================================================ */

/* ---------- 1. gelaagd binnenkomen ----------
   De reveal uit de demo laat een hele sectie in één keer opkomen. Bij een rij van drie
   kaarten oogt dat als één blok dat verspringt — je ziet dat er iets gebeurt, maar niet
   wát.

   VALKUIL (11-08 gemeten): ik probeerde dit eerst vanuit JavaScript met een --vertraag
   per kind. Dat deed niets, want de rij ís zelf het reveal-element; de kaarten erbinnen
   dragen die klasse niet. Nu doet CSS het: de rij zelf komt niet meer op, zijn kinderen
   wel, één voor één. Dat leest zoals je een menukaart leest — van boven naar beneden,
   niet als een dia die omklapt. */
.kaarten.reveal,.kaartpanelen.reveal,.drieluik.reveal,
.reviews.reveal,.kabinet.reveal,.wijnen.reveal,.feiten__in.reveal{
  opacity:1;transform:none}
.kaarten.reveal>*,.kaartpanelen.reveal>*,.drieluik.reveal>*,
.reviews.reveal>*,.kabinet.reveal>*,.wijnen.reveal>*,.feiten__in.reveal>*{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.kaarten.reveal.in>*,.kaartpanelen.reveal.in>*,.drieluik.reveal.in>*,
.reviews.reveal.in>*,.kabinet.reveal.in>*,.wijnen.reveal.in>*,.feiten__in.reveal.in>*{
  opacity:1;transform:none}
/* zes stappen is genoeg; daarna wordt wachten irritant en gaat het vakjes tellen lijken */
.reveal.in>:nth-child(1){transition-delay:0ms}
.reveal.in>:nth-child(2){transition-delay:80ms}
.reveal.in>:nth-child(3){transition-delay:160ms}
.reveal.in>:nth-child(4){transition-delay:240ms}
.reveal.in>:nth-child(5){transition-delay:320ms}
.reveal.in>:nth-child(n+6){transition-delay:400ms}

/* Zonder JavaScript staat alles gewoon zichtbaar — beweging mag nooit de voorwaarde
   zijn om iets te kunnen lezen. */
html:not(.js) .reveal>*{opacity:1;transform:none}

/* ---------- 2. de kop krimpt zodra je scrolt ----------
   De kop is plakkerig en houdt op een lange pagina veel ruimte bezet. Zodra je weg bent
   van de bovenkant mag hij compacter, met een randje schaduw zodat hij van de inhoud
   loskomt. */
.top{transition:box-shadow .3s ease,background-color .3s ease}
.top__in{transition:padding .3s ease,min-height .3s ease}
.top--gescrold{box-shadow:0 6px 24px -18px rgba(43,33,29,.65);background:rgba(247,239,228,.97)}
.top--gescrold .top__in{padding:.42rem 0;min-height:52px}
/* VERWIJDERD (11-08 gemeten): hier stond dat het logo bij het scrollen naar 60px ging.
   Dat deed twee dingen fout tegelijk. De balk werd er gróter van (68 -> 74px) terwijl
   deze regels hem juist compacter horen te maken, en 60px uit een bestand van 80px is
   op een scherm met dubbele pixeldichtheid zichtbaar zacht. */

/* ---------- 3. beeld dat leeft bij aanwijzen ----------
   Alleen op kaarten en panelen: dat zijn de plekken waar je erop kúnt klikken. Een foto
   die beweegt zonder dat er iets achter zit, belooft iets wat er niet is.

   VALKUIL (11-08 gemeten): hier stond eerst ook `.duo__beeld{overflow:hidden}` erbij.
   Daar hangt met opzet een kaartje búiten de foto (`.duo__kaartje`, bottom:-.9rem) —
   dat werd daardoor doormidden geknipt. Alleen kaders die hun inhoud al binnenhouden
   mogen hier mee: .kaart heeft zelf al overflow:hidden, en bij .kaartpaneel__beeld
   staat alles wat eroverheen ligt binnen de randen. */
.kaartpaneel__beeld{overflow:hidden}
.kaart img,.kaartpaneel__beeld img{
  transition:transform .55s cubic-bezier(.2,.6,.2,1);will-change:transform}
.kaart:hover img,.kaart:focus-within img,
.kaartpaneel:hover .kaartpaneel__beeld img,.kaartpaneel:focus-within .kaartpaneel__beeld img{
  transform:scale(1.045)}
/* het merkteken in de hoek is geen sfeerfoto en hoort stil te blijven staan */
.kaartpaneel:hover .kaartpaneel__beeld img.kaartpaneel__merk{transform:none}

/* ---------- 4. knoppen die antwoord geven ----------
   Een knop moet voelen alsof hij ingedrukt wordt. Klein en kort: 60 milliseconden is
   genoeg om het te merken en te kort om op te wachten. */
.knop{transition:transform .16s cubic-bezier(.2,.6,.2,1),background-color .18s ease,
  border-color .18s ease,color .18s ease,box-shadow .18s ease}
.knop:hover{transform:translateY(-1px)}
.knop:active{transform:translateY(1px);transition-duration:.06s}

/* ---------- 5. links in de navigatie ----------
   Een streepje dat vanuit het midden opengroeit — dat leest als "hier ben je bijna"
   zonder dat de tekst zelf verspringt. */
.nav a:not(.knop){position:relative}
.nav a:not(.knop)::after{
  content:'';position:absolute;left:50%;right:50%;bottom:-.28rem;height:2px;
  background:var(--koper);border-radius:2px;
  transition:left .24s cubic-bezier(.2,.6,.2,1),right .24s cubic-bezier(.2,.6,.2,1);
}
.nav a:not(.knop):hover::after,
.nav a:not(.knop):focus-visible::after{left:0;right:0}

/* ---------- 6. de likeurenvakjes ----------
   Twaalf gelijke vakjes zijn saai om langs te gaan. Een lichte lift bij aanwijzen maakt
   er iets van om doorheen te dwalen — en dat is precies wat dat kabinet is. */
.likeur{transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.likeur:hover{transform:translateY(-2px);background:rgba(247,239,228,.13);
  border-color:rgba(226,207,184,.4)}

/* ---------- 7. zichtbare focus ----------
   Wie met het toetsenbord door de site loopt, moet altijd kunnen zien waar hij is.
   Standaard is die ring vaak nauwelijks te onderscheiden op een perzikkleurige grond. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--koper);outline-offset:3px;border-radius:4px}

/* ---------- 8. zacht scrollen naar een anker ----------
   De menukaart heeft een rij categorieknoppen. Springen voelt daar als een nieuwe
   pagina; glijden laat zien dat je binnen dezelfde kaart blijft. */
html{scroll-behavior:smooth}

/* ---------- respecteer de systeemvoorkeur ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none!important;transition-delay:0ms!important;opacity:1!important;transform:none!important}
  .top,.top__in,.top .merk img,.knop,.likeur,
  .kaart img,.kaartpaneel__beeld img,
  .nav a:not(.knop)::after{transition:none!important}
  .knop:hover,.knop:active,.likeur:hover{transform:none}
  .kaart:hover img,.kaartpaneel:hover .kaartpaneel__beeld img{transform:none}
  /* de ademende gloed en de pulserende pil uit stijl.css horen hier ook stil te staan */
  .hero__gloed,.vandaag:not([data-dicht]){animation:none!important}
}