/* ────────────────────────────────────────────────────────────── Zachte paginaovergangen (cross-document view transitions). Eén klik = geen harde witte flits meer: de oude pagina lost op en de nieuwe vervaagt zacht van onder naar boven in beeld. Puur CSS, geen JS. Progressieve verbetering: browsers die dit niet kennen navigeren gewoon zoals vroeger — er breekt niets. Werkt alleen tussen pagina's die dit bestand allebei laden (zelfde origin). Eén plek om aan te draaien; wil je het ergens niet, laat dan simpelweg de naar dit bestand weg op die pagina. ────────────────────────────────────────────────────────────── */ @view-transition { navigation: auto; } @keyframes mw-vt-out { from { opacity: 1; } to { opacity: 0; } } /* Zachte onthulling: de nieuwe pagina vervaagt ín én wordt tegelijk van onder naar boven onthuld. Doordat de opacity meeloopt, is er geen harde veeglijn — alleen een subtiele opwaartse beweging. Korte reisafstand (35%) houdt het ingetogen. */ @keyframes mw-vt-in { from { opacity: 0; clip-path: inset(35% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* De uitgaande pagina vervaagt iets sneller dan de nieuwe binnenkomt, zodat er geen grijze "dubbeldruk" ontstaat. */ ::view-transition-old(root) { animation: mw-vt-out 0.20s ease both; } ::view-transition-new(root) { animation: mw-vt-in 0.34s ease both; } /* ── De donkere bovenbalk "morpht" mee ──────────────────────────── Op de landing is de balk hoog (kopje koffie + grote merknaam), op de subpagina's slank (merknaam + kruimelpad). Door beide dezelfde view-transition-name te geven, tilt de browser de balk uit de gewone cross-fade en animeert hij de ene vorm vloeiend naar de andere: de zwarte balk blijft staan en verandert alleen van hoogte, terwijl de inhoud eronder wisselt. Beide balken zijn #1d1d1b, dus geen kleursprong. Precies één element per pagina draagt deze naam (.mw-header op de landing, .mw-top op de subpagina's), dus de naam blijft uniek. */ .mw-header, .mw-top { view-transition-name: mw-topbar; } ::view-transition-group(mw-topbar) { animation-duration: 0.34s; animation-timing-function: ease; } /* ── Aankomen op een donkere bestemming ─────────────────────────── De animatie wordt bepaald door de pagina waar je naartoe gaat. De subpagina's zijn licht → de opwaartse onthulling past daar. De landing is donker (achtergrondfoto); een donkere pagina die van onderen omhoog schuift over een lichte oogt zwaar. Daarom krijgt een pagina met data-vt="dark" een rustige dissolve (alleen vervagen) i.p.v. de onthulling. Zet dit attribuut op van elke donkere bestemming. */ :root[data-vt="dark"]::view-transition-new(root) { animation: mw-vt-dissolve 0.34s ease both; } @keyframes mw-vt-dissolve { from { opacity: 0; } to { opacity: 1; } } /* Respecteer de systeemvoorkeur "minder beweging": dan geen animatie, maar wél de directe wissel (geen flits). */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }