/* =========================================================================
   5u5hi — app.css
   Designsysteem "Encre" (dark) · type-pairing C (Bricolage + Hanken)
   Mobile-first. Per breakpoint een eigen compositie (niet uitrekken).
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    /* Kleur — Encre */
    --ink:       #0E0E10;
    --ink-2:     #15151A;
    --ink-3:     #1D1D24;
    --paper:     #F4F1EA;
    --paper-dim: rgba(244, 241, 234, .60);
    --paper-faint: rgba(244, 241, 234, .12);
    --accent:    #FF3B14;            /* wordt inline overschreven uit settings */
    --accent-ink:#0E0E10;

    /* Type */
    --display: 'Bricolage Grotesque', system-ui, sans-serif;
    --body:    'Hanken Grotesk', system-ui, sans-serif;

    /* Fluid modulaire schaal (≈1.25 mobiel → 1.333 desktop) */
    --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
    --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.5vw,  1.60rem);
    --step-2:  clamp(1.56rem, 1.38rem + 0.9vw,  2.40rem);
    --step-3:  clamp(1.95rem, 1.62rem + 1.6vw,  3.60rem);
    --step-4:  clamp(2.44rem, 1.85rem + 2.9vw,  5.40rem);
    --step-5:  clamp(3.05rem, 1.95rem + 5.5vw,  8.50rem);
    --step-6:  clamp(3.50rem, 1.20rem + 11vw,  12.0rem);

    /* Ruimte */
    --gap:   clamp(0.9rem, 0.6rem + 1.4vw, 1.6rem);
    --pad:   clamp(1.1rem, 0.6rem + 2.6vw, 3.2rem);
    --bleed: clamp(1.1rem, 0.6rem + 2.6vw, 4.0rem);
    --maxw:  1780px;                                              /* gecentreerde contentband op brede schermen */
    --gutter: max(var(--bleed), calc((100% - var(--maxw)) / 2));  /* zijmarge: --bleed, of breder om de band te centreren */

    --radius: 2px;
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --dur:    0.5s;
}

/* ---------- 1b. Dag-thema "Lumière" — licht mosterd-grijs ----------
   Eén kleurensysteem, twee stemmingen. De semantische tokens --ink (drager)
   en --paper (inkt) wisselen van wáárde, niet van rol: zo erft elke regel het
   juiste contrast zonder verdere aanpassing. Mosterd-grijs = warme, ontzadigde
   oker; de roundel-rode accent blijft staan en knalt op het lichte papier. */
:root[data-theme="light"] {
    --ink:        #E4DECB;          /* drager: licht mosterd-grijs            */
    --ink-2:      #DCD5BD;          /* iets dieper oppervlak (tegels, velden) */
    --ink-3:      #D2C9AC;          /* hover / actiefste laag                 */
    --paper:      #211F18;          /* warme inkt-tekst                       */
    --paper-dim:  rgba(33, 31, 24, .62);
    --paper-faint:rgba(33, 31, 24, .16);
    --accent-ink: #F7F3E9;          /* lichte tekst op de rode CTA            */
    color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Zachte overgang bij het wisselen van thema (sla over bij reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    body, .site-head, .filters, .chip, .media__doc,
    .field input, .field textarea, .tile__media, .case__shot {
        transition-property: background-color, border-color, color;
        transition-duration: .45s;
        transition-timing-function: var(--ease);
    }
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-size: var(--step-0);
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
    overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.skip-link {
    position: fixed; top: -100px; left: var(--pad); z-index: 1000;
    background: var(--accent); color: var(--accent-ink);
    padding: .6em 1em; transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--pad); }

/* ---------- 3. Typografie ---------- */
h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.015em;
    font-feature-settings: "ss01", "kern", "liga";
}
/* Kinetische basis: gewicht/optische maat schuift soepel (JS + hover) */
[data-kinetic] {
    font-family: var(--display);
    font-variation-settings: "wght" 600, "opsz" 40;
    transition: font-variation-settings var(--dur) var(--ease);
    will-change: font-variation-settings;
}
a:hover > [data-kinetic],
[data-kinetic]:hover {
    font-variation-settings: "wght" 760, "opsz" 96;
}

/* ---------- 4. Layout / header ---------- */
.site-head {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gap);
    padding: clamp(.7rem, .4rem + 1vw, 1.2rem) var(--gutter);
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--paper-faint);
}
.brand { display: inline-flex; align-items: center; gap: .55em; }
.brand__mark {
    font-family: var(--display);
    font-size: var(--step-1);
    font-variation-settings: "wght" 700, "opsz" 28;
    letter-spacing: -0.02em;
}
/* Piranha-merk rechts naast het woordmerk — het zwart bijna even hoog als "5u5hi"
   (≈ de kapitaalhoogte van het woordmerk op --step-1).
   Zwart op het mosterd-grijze dag-thema; wit op het donkere nacht-thema
   (de monochrome zwarte art wordt geïnverteerd naar wit). */
.brand__logo { width: auto; height: calc(var(--step-1) * 0.72); flex: none; }
:root[data-theme="dark"] .brand__logo { filter: invert(1); }
.site-nav { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.site-nav__link {
    font-size: var(--step--1);
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--paper-dim);
    transition: color .3s var(--ease);
}
.site-nav__link:hover { color: var(--paper); }
.site-nav__link--cta {
    color: var(--paper);
    border: 1px solid var(--paper-faint);
    padding: .5em .9em; border-radius: 100px;
}
.site-nav__link--cta:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.lang { display: flex; gap: .15rem; align-items: center; }
.lang__opt {
    font-size: var(--step--1); padding: .25em .45em;
    color: var(--paper-dim); letter-spacing: .05em;
    transition: color .25s var(--ease);
}
.lang__opt.is-active { color: var(--accent); }
.lang__opt:hover { color: var(--paper); }

/* Dag/nacht-wissel — toont het symbool van de bestemming (zon overdag → maan) */
.theme-toggle {
    display: inline-grid; place-items: center;
    width: 2.1em; height: 2.1em; border-radius: 100px;
    color: var(--paper-dim);
    border: 1px solid var(--paper-faint);
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle:hover { color: var(--paper); border-color: var(--paper-dim); }
.theme-toggle__ico { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__ico--sun  { display: none; }
.theme-toggle__ico--moon { display: block; }
:root[data-theme="light"] .theme-toggle__ico--sun  { display: block; }
:root[data-theme="light"] .theme-toggle__ico--moon { display: none; }

/* ---------- 5. Hero (redactioneel + kinetisch) ---------- */
.home { padding: 0 var(--gutter) var(--bleed); }
.case, .notfound { padding: 0 var(--bleed) var(--bleed); }
.hero {
    padding: clamp(2.4rem, 7vh, 6.5rem) 0 clamp(2rem, 5vh, 4.5rem);
}
.hero__index {
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--paper-dim);
    max-width: 40ch;
    margin-bottom: clamp(1.4rem, 4vh, 3rem);
    padding-left: .15em;
}
.hero__type {
    --kin: 0;                              /* scroll-voortgang 0→1 (door JS gezet) */
    font-size: var(--step-6);
    line-height: 0.82;
    letter-spacing: -0.038em;
    display: grid;
}
.hero__word {
    display: block;
    font-optical-sizing: auto;             /* opsz volgt automatisch de grootte */
    /* gewicht = basis per regel + scroll-impuls (kinetiek met functie) */
    font-weight: calc(var(--wbase, 380) + var(--kin) * 200);
    transition: font-weight .45s var(--ease);
}
.hero__word:nth-child(1) { --wbase: 300; }
.hero__word:nth-child(2) { --wbase: 560; }      /* accentregel zwaarder */
.hero__word:nth-child(3) { --wbase: 300; }
.hero__word:nth-child(4) { --wbase: 560; }      /* Web = accentregel zwaarder */
.hero__word--accent { color: var(--accent); margin-left: clamp(0px, 4vw, 1.2em); }
/* Eerste regel + piranha-merk ernaast */
.hero__word--brand { display: inline-flex; align-items: baseline; gap: clamp(.4rem, 1.4vw, 1rem); }
.hero__mark { width: auto; height: .72em; flex: 0 0 auto; align-self: center;   /* nooit hoger dan het woord */
    transform: translate(50px, 6px);                  /* fijn-positie: 50px naar rechts, 6px omlaag */
    filter: brightness(0); }                          /* dag: donker, volgt de tekst */
:root[data-theme="dark"] .hero__mark { filter: brightness(0) invert(1); }   /* nacht: wit */
.hero__lead {
    margin-top: clamp(1.2rem, 3vw, 2.4rem);
    max-width: 32ch;
    font-size: var(--step-1);
    line-height: 1.38;
    color: var(--paper-dim);
}

/* ---------- 6. Filterbalk ---------- */
.filters {
    position: sticky; top: calc(2.8rem + 1vw); z-index: 50;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem;
    padding: 1rem 0; margin-bottom: var(--gap);
    background: linear-gradient(var(--ink) 65%, transparent);
}
.filters__label {
    font-size: var(--step--1); text-transform: uppercase;
    letter-spacing: .12em; color: var(--paper-dim);
}
.filters__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    font-size: var(--step--1);
    padding: .45em .9em; border-radius: 100px;
    border: 1px solid var(--paper-faint); color: var(--paper-dim);
    transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.chip:hover { color: var(--paper); border-color: var(--paper-dim); }
.chip.is-active { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- 7. Grid (gebroken, redactioneel) ---------- */
.grid {
    display: grid;
    grid-template-columns: 1fr;          /* mobiel: 1 kolom */
    gap: calc(var(--gap) * 1.6) var(--gap);
}
.tile { min-width: 0; }
.tile.is-hidden { display: none; }
.tile__link { display: block; }

.tile__media {
    overflow: hidden; border-radius: var(--radius);
    background: var(--ink-2);
}
.media { position: relative; }
.media__el { width: 100%; object-fit: cover; }

/* PDF/document-kaart (geen previewbeeld beschikbaar) */
.media__doc {
    display: flex; align-items: center; gap: .8rem;
    padding: 1.1rem 1.2rem; min-height: 5.5rem;
    background: var(--ink-2); border: 1px solid var(--paper-faint);
    border-radius: var(--radius); color: var(--paper);
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.media__doc:hover { border-color: var(--accent); background: var(--ink-3); }
.media__doc-ico { width: 1.6em; height: 1.6em; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.media__doc-name { font-family: var(--display); font-variation-settings: "wght" 520; font-size: var(--step-0); }
.media__doc-ext { margin-left: auto; font-size: var(--step--1); letter-spacing: .08em; color: var(--paper-dim); }
.tile__media .media__el {
    transition: transform 0.7s var(--ease), filter .5s var(--ease);
    filter: saturate(.92);
}
.tile__link:hover .media__el { transform: scale(1.04); filter: saturate(1.05); }

.tile__info { padding: .85rem .2rem 0; }
.tile__title { font-size: var(--step-2); font-variation-settings: "wght" 560, "opsz" 48; }
.tile__meta { font-size: var(--step--1); color: var(--paper-dim); margin-top: .25rem; }
.tile__meta .dot { margin: 0 .4em; }
.tile__tags {
    display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin-top: .5rem;
}
.tile__tags li {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--paper-dim); border: 1px solid var(--paper-faint);
    padding: .25em .6em; border-radius: 100px;
}
.grid__empty { padding: 3rem 0; color: var(--paper-dim); font-size: var(--step-1); }

/* ---------- 8. Contact ---------- */
.contact {
    margin-top: clamp(4rem, 12vh, 10rem);
    padding-top: clamp(2rem, 6vh, 5rem);
    border-top: 1px solid var(--paper-faint);
    display: grid; gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 1100px;
}
.contact__title { font-size: var(--step-4); }
.contact__lead { color: var(--paper-dim); font-size: var(--step-1); max-width: 40ch; margin-top: .6rem; }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--paper-dim); }
.field input, .field textarea {
    font: inherit; color: var(--paper);
    background: var(--ink-2); border: 1px solid var(--paper-faint);
    border-radius: var(--radius); padding: .8em .9em;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); background: var(--ink-3); outline: none; }
.field textarea { resize: vertical; min-height: 7em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.contact__mailto { color: var(--paper-dim); text-decoration: underline; text-underline-offset: 4px; font-size: var(--step--1); }
.contact__mailto:hover { color: var(--paper); }
.contact__msg { grid-column: 1 / -1; min-height: 1.4em; font-size: var(--step-0); }
.contact__msg.is-ok { color: var(--accent); }
.contact__msg.is-err { color: #ff8a6b; }

.btn {
    display: inline-flex; align-items: center; gap: .6em;
    font-family: var(--display); font-variation-settings: "wght" 600;
    font-size: var(--step-0); padding: .8em 1.6em; border-radius: 100px;
}
.btn--cta { background: var(--accent); color: var(--accent-ink); transition: transform .3s var(--ease), filter .3s var(--ease); }
.btn--cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn__check { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.5; }
.btn__check path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.btn.is-sent .btn__check path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease) .05s; }
.btn.is-sending { opacity: .7; pointer-events: none; }

/* ---------- 9. Case ---------- */
.case { padding-top: 0; }
.case__back {
    position: sticky; top: clamp(4rem, 8vw, 6rem); z-index: 40; float: left;
    font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em;
    color: var(--paper-dim); padding: .4em 0;
}
.case__back:hover { color: var(--paper); }
.case__cover {
    margin: 0 calc(-1 * var(--bleed)) clamp(1.5rem, 4vw, 3rem);
    max-height: 92vh; overflow: hidden;
}
.case__cover .media__el { width: 100%; max-height: 92vh; object-fit: cover; }
.case__hero {
    position: absolute; left: var(--bleed); right: var(--bleed); bottom: clamp(1rem, 4vw, 2.5rem);
    background: linear-gradient(transparent, rgba(14,14,16,.0));
}
.case__title { font-size: var(--step-5); color: var(--paper); text-shadow: 0 2px 40px rgba(0,0,0,.5); }

.case__intro {
    display: grid; gap: 1.5rem;
    grid-template-columns: 1fr; max-width: 1400px;
    margin: 0 auto clamp(2rem, 6vw, 5rem); padding-top: 1rem;
}
.case__meta { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.case__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--paper-dim); }
.case__meta dd { font-size: var(--step-0); margin-top: .2rem; }
.case__meta-disc dd { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--paper-faint); padding: .25em .6em; border-radius: 100px; color: var(--paper-dim); }
.case__caption { font-size: var(--step-2); line-height: 1.3; max-width: 24ch; font-family: var(--display); font-variation-settings: "wght" 380, "opsz" 60; }

.case__gallery { display: grid; gap: var(--gap); max-width: 1500px; margin: 0 auto; }
.case__shot { border-radius: var(--radius); overflow: hidden; background: var(--ink-2); }
.case__shotcap { font-size: var(--step--1); color: var(--paper-dim); padding: .6rem .2rem 0; }

.case__nav {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: clamp(3rem, 8vw, 6rem); padding-top: 2rem;
    border-top: 1px solid var(--paper-faint);
}
.case__nav-link { display: grid; gap: .3rem; }
.case__nav-link--next { text-align: right; margin-left: auto; }
.case__nav-link small { font-size: var(--step--1); color: var(--paper-dim); text-transform: uppercase; letter-spacing: .08em; }
.case__nav-link span { font-size: var(--step-2); }

/* ---------- 10. Footer / 404 ---------- */
.site-foot {
    margin-top: clamp(4rem, 10vh, 9rem);
    padding: var(--bleed) var(--gutter); border-top: 1px solid var(--paper-faint);
    display: grid; gap: 1.5rem;
}
.site-foot__row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.site-foot__brandwrap { display: inline-flex; align-items: center; gap: .5em; font-size: var(--step-4); }
.site-foot__brand { font-family: var(--display); font-size: var(--step-4); font-variation-settings: "wght" 700, "opsz" 80; }
.brand-fish { width: auto; height: .7em; flex: 0 0 auto;   /* mee-schalend met de merknaam */
    filter: brightness(0); }                                /* dag: donker */
:root[data-theme="dark"] .brand-fish { filter: brightness(0) invert(1); }   /* nacht: wit */
.site-foot__social { display: flex; gap: 1.2rem; }
.site-foot__social a { color: var(--paper-dim); } .site-foot__social a:hover { color: var(--accent); }
.site-foot__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: var(--step--1); color: var(--paper-dim); }

.notfound { display: grid; place-items: center; gap: 2rem; min-height: 60vh; text-align: center; }
.notfound__code { font-family: var(--display); font-size: var(--step-6); font-variation-settings: "wght" 760, "opsz" 96; color: var(--accent); }

/* ---------- 11. Reveal-animatie ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 12. Tablet ---------- */
@media (min-width: 700px) {
    .grid { grid-template-columns: repeat(6, 1fr); }
    .tile--xl { grid-column: span 6; }
    .tile--lg { grid-column: span 4; }
    .tile--md { grid-column: span 3; }
    .tile--sm { grid-column: span 3; }
    .case__intro { grid-template-columns: 1.2fr 1fr; align-items: start; }
}

/* ---------- 13. Laptop / desktop: COMPOSITIE ---------- */
@media (min-width: 1100px) {
    /* Hero asymmetrisch over 12 kolommen */
    .hero {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--gap);
        align-items: end;
        padding-top: clamp(3rem, 9vh, 8rem);
    }
    .hero__index { grid-column: 1 / 7;  grid-row: 1; align-self: start; margin-bottom: clamp(2rem, 5vh, 4rem); }
    .hero__type  { grid-column: 1 / 11; grid-row: 2; }
    .hero__lead  { grid-column: 8 / 13; grid-row: 3; justify-self: end; max-width: 34ch; margin-top: clamp(1.6rem, 3vw, 3rem); }

    /* Gebroken redactioneel grid — bewuste plaatsing per positie (cyclus van 6) */
    .grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-flow: row dense;
        gap: clamp(2.2rem, 5vw, 5rem) var(--gap);
        align-items: start;
    }
    .tile { grid-column: auto / span 6; }                       /* veilige basis */
    .grid > .tile:nth-child(6n+1) { grid-column: 1 / span 7; }  /* feature, links groot */
    .grid > .tile:nth-child(6n+2) { grid-column: 9 / span 4; margin-top: clamp(3rem, 8vw, 7rem); }
    .grid > .tile:nth-child(6n+3) { grid-column: 2 / span 5; }
    .grid > .tile:nth-child(6n+4) { grid-column: 8 / span 5; margin-top: clamp(2rem, 5vw, 4.5rem); }
    .grid > .tile:nth-child(6n+5) { grid-column: 1 / span 4; margin-top: clamp(1rem, 3vw, 2.5rem); }
    .grid > .tile:nth-child(6n+6) { grid-column: 7 / span 6; }

    .grid > .tile:nth-child(6n+1) .tile__title { font-size: var(--step-3); }

    .tile__info { padding: 1.1rem .2rem 0; max-width: 92%; }
    /* Titel-onderlijn die meegroeit bij hover (subtiele, doelgerichte feedback) */
    .tile__title { position: relative; display: inline; background-image: linear-gradient(var(--accent), var(--accent));
        background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
        transition: background-size .5s var(--ease); padding-bottom: .06em; }
    .tile__link:hover .tile__title { background-size: 100% 2px; }
}

@media (min-width: 1500px) {
    .home, .case { padding-left: clamp(4rem, 5vw, 7rem); padding-right: clamp(4rem, 5vw, 7rem); }
}

/* ---------- 14. Mobiel: contact 1 kolom ---------- */
@media (max-width: 640px) {
    .contact__form { grid-template-columns: 1fr; }
    .site-nav__link--cta { padding: .45em .8em; }
}

/* ---------- 15b. Vloeiende overzicht↔case-overgang (MPA View Transitions) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation-duration: .35s; }
    ::view-transition-new(root) { animation-duration: .35s; }
}

/* ---------- 15. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    [data-kinetic] { transition: none; }
}