/* Beweging. Apart van site.css, want dit is één samenhangend onderwerp: hoe de site zich gedraagt terwijl je hem gebruikt. Zie DESIGN.md §5. Drie regels waar niets van afwijkt: 1. Niets beweegt zonder aanleiding. Elke beweging hangt aan scrollen, wijzen of klikken — nooit aan een klok. 2. Beweging draagt nooit inhoud. Zet je dit hele bestand uit, dan staat er exact dezelfde pagina, alleen stil. 3. prefers-reduced-motion zet alles uit. Niet afzwakken: uit. */ /* ── overgang tussen pagina's ── Eén regel, en de site voelt als een app in plaats van als losse pagina's. Native in de browser: geen router, geen framework, geen enkele kilobyte JavaScript. Browsers die het niet kennen laden gewoon zoals altijd. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-weg 220ms var(--ease-uit) both; } ::view-transition-new(root) { animation: vt-aan 320ms var(--ease-uit) both; } @keyframes vt-weg { to { opacity: 0; transform: translateY(-8px); } } @keyframes vt-aan { from { opacity: 0; transform: translateY(12px); } } /* De balk en de voet horen niet mee te bewegen: die staan op elke pagina. Door ze een eigen naam te geven blijven ze staan terwijl de inhoud wisselt, precies zoals bij een app met een vaste navigatie. */ .site-nav { view-transition-name: balk; } .site-voet { view-transition-name: voet; } ::view-transition-group(balk), ::view-transition-group(voet) { animation-duration: 0s; } /* ── onthullen bij het scrollen ── Waar de browser scroll-gestuurde animaties kent gebeurt dit volledig in de opmaak: dat loopt buiten de hoofddraad en hapert dus niet, ook niet op een telefoon die het al druk heeft. Kent hij het niet, dan doet site.js het met een waarnemer. De klasse .css-scroll op zegt welke van de twee. */ @supports (animation-timeline: view()) { .css-scroll .onthul { opacity: 0; transform: translateY(18px); animation: opkomen linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; } /* Al in beeld bij het laden: meteen tonen, niet eerst wegduwen. */ .css-scroll .onthul.zichtbaar { opacity: 1; transform: none; animation: none; } } @keyframes opkomen { to { opacity: 1; transform: none; } } /* ── koppen die regel per regel opkomen ── Het script deelt een kop op in regels en geeft elke regel een eigen masker. Zonder script blijft het één gewone kop. */ .regels { display: block; } .regel-masker { display: block; overflow: hidden; } .regel { display: block; transform: translateY(105%); transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 85ms); } .regels.zichtbaar .regel { transform: none; } /* ── de cijfers tellen op ── Veertig jaar streekkennis is het argument van dit bedrijf. Een getal dat optelt terwijl je het leest laat dat landen; een stilstaand getal scrol je voorbij. */ .cijfer-waarde { font-variant-numeric: tabular-nums; } /* ── wagenbanden: van grijs naar kleur ── De band komt grijs binnen en krijgt zijn kleur terwijl hij door beeld schuift. Dat is een filmische ingreep die bij auto's hoort en die niets kost: één filter, gestuurd door de scrollpositie. */ @supports (animation-timeline: view()) { .css-scroll .auto-band img { animation: ontgrijzen linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; } } /* Niet naar vol grijs mét meer contrast: deze foto's zijn al donker, en dan valt de band dicht tot een zwart vlak met tekst erop. Iets grijzer en iets donkerder is genoeg om het verschil te voelen. */ @keyframes ontgrijzen { from { filter: grayscale(0.88) brightness(0.88); } to { filter: grayscale(0) brightness(1); } } /* Zonder scroll-gestuurde animaties: kleur bij het naderen met de muis. */ @supports not (animation-timeline: view()) { .auto-band img { filter: grayscale(0.75); transition: filter 600ms var(--ease-uit); } .auto-band:hover img { filter: grayscale(0); } } /* De magnetische knop stond hier en is weg. Een knop die naar de cursor toe schuift beweegt het doelwit terwijl je erop mikt. Wat ervoor in de plaats komt is wat een knop hoort te doen: twee eigenschappen rustig veranderen. */ /* ── kaarten met een licht dat de muis volgt ── Geen glaseffect en geen schaduw: alleen een zachte lichtplek op het vlak zelf, zodat de kaart onder je cursor even oplicht. */ .tour-kaart { position: relative; } .tour-kaart::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 260ms var(--ease-uit); background: radial-gradient(320px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.07), transparent 62%); } .tour-kaart:hover::before, .tour-kaart:focus-visible::before { opacity: 1; } .tour-kaart .tour-beeld img { transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } .tour-kaart:hover .tour-beeld img { transform: scale(1.035); } /* ── de aanloop ── De kop komt regel per regel op, daarna de tekst en de knop. Eén beweging van boven naar beneden, zoals je hem ook leest. Daarna neemt het scrollen het over: de kaart groeit tot volbeeld en de tekst schuift opzij. Dat staat in site.css, want het zijn eigenschappen die het script per pixel bijstelt en geen overgangen. */ .aanloop .hero-tekst > *:not(.regels) { opacity: 0; transform: translateY(14px); transition: opacity 640ms var(--ease-uit), transform 640ms var(--ease-uit); } .aanloop.klaar .hero-tekst > *:not(.regels) { opacity: 1; transform: none; } .aanloop.klaar .hero-tekst > *:nth-child(2) { transition-delay: 220ms; } /* De kaart mag niet met een overgang meelopen: het script zet zijn schaal per beeldje, en een overgang erbovenop laat hem achterlopen op de scrollpositie. Dat voelt als traagheid, niet als soepelheid. */ .aanloop-aan .aanloop-kaart { transition: none; will-change: transform; } /* De scroll-aanwijzing onderaan de hero is weg. Niemand hoeft geleerd te worden dat een pagina verder gaat, en een streepje dat eeuwig op en neer pulseert is beweging zonder aanleiding — precies wat regel 1 verbiedt. */ /* ── alles uit ── Wie beweging heeft uitgezet, krijgt geen beweging. Niet minder, geen. */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .css-scroll .onthul, .css-scroll .auto-band img { animation: none; opacity: 1; transform: none; filter: none; } .regel { transform: none; transition: none; } .aanloop .hero-tekst > *:not(.regels) { opacity: 1; transform: none; transition: none; } .tour-kaart .tour-beeld img, .tour-kaart:hover .tour-beeld img { transform: none; transition: none; } .auto-band img { filter: none; } }