/* ===========================================================================
   Beweging

   Het uitgangspunt komt uit de naam zelf. In de Terms of Reference staat dat
   de X in het logo bestaat uit twee banen die naar elkaar toegroeien om te
   connecten. Die beweging is hier het terugkerende motief: onderdelen komen
   van links en van rechts binnen en ontmoeten elkaar in het midden.

   Alles beweegt met de curven en tijden uit app.css, alleen met transform en
   opacity, en respecteert de systeeminstelling voor minder beweging.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Binnenkomen bij het scrollen

   De begintoestand wordt door JavaScript gezet, niet door CSS. Zonder
   JavaScript blijft alles dus gewoon zichtbaar staan.
   --------------------------------------------------------------------------- */
.js-beweegt [data-kom-binnen] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--tijd-lang) var(--soepel),
        transform var(--tijd-lang) var(--soepel);
    transition-delay: var(--vertraging, 0ms);
    will-change: opacity, transform;
}

/* Van links en van rechts naar elkaar toe: het motief van de twee banen. */
.js-beweegt [data-kom-binnen="links"]  { transform: translate3d(-22px, 0, 0); }
.js-beweegt [data-kom-binnen="rechts"] { transform: translate3d(22px, 0, 0); }
.js-beweegt [data-kom-binnen="op"]     { transform: translate3d(0, 26px, 0); }
.js-beweegt [data-kom-binnen="schaal"] { transform: scale(.97); }

.js-beweegt [data-kom-binnen].is-binnen {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ---------------------------------------------------------------------------
   2. Openingsbeeld van de homepagina

   Eén keer per bezoek, in volgorde: label, kop, tekst, knoppen, collage.
   Een reeks die bij elkaar hoort leest beter dan losse effecten.
   --------------------------------------------------------------------------- */
@keyframes komOp {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes komZijwaarts {
    from { opacity: 0; transform: translate3d(28px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

.js-beweegt .held__label,
.js-beweegt .held h1,
.js-beweegt .held__tekst,
.js-beweegt .held__knoppen,
.js-beweegt .cijfers {
    animation: komOp var(--tijd-lang) var(--soepel) backwards;
}

.js-beweegt .held__label    { animation-delay:  60ms; }
.js-beweegt .held h1        { animation-delay: 140ms; }
.js-beweegt .held__tekst    { animation-delay: 260ms; }
.js-beweegt .held__knoppen  { animation-delay: 360ms; }
.js-beweegt .cijfers        { animation-delay: 520ms; }

.js-beweegt .held__collage {
    animation: komZijwaarts 680ms var(--soepel) 200ms backwards;
}

/* De tegels van de collage komen als een waaier binnen. */
.js-beweegt .held__collage img {
    animation: komOp 620ms var(--soepel) backwards;
}
.js-beweegt .held__collage img:nth-child(1) { animation-delay: 300ms; }
.js-beweegt .held__collage img:nth-child(2) { animation-delay: 360ms; }
.js-beweegt .held__collage img:nth-child(3) { animation-delay: 420ms; }
.js-beweegt .held__collage img:nth-child(4) { animation-delay: 480ms; }
.js-beweegt .held__collage img:nth-child(5) { animation-delay: 540ms; }
.js-beweegt .held__collage img:nth-child(6) { animation-delay: 600ms; }

/* ---------------------------------------------------------------------------
   3. Het kruispunt: twee banen die elkaar raken

   Het scheidingsteken tussen secties. De twee lijnen groeien vanaf de randen
   naar het midden en ontmoeten elkaar bij de ruit.
   --------------------------------------------------------------------------- */
.kruising {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte-4);
    margin-block: var(--ruimte-7);
}

.kruising::before,
.kruising::after {
    content: '';
    height: 1px;
    flex: 1;
    max-width: 180px;
    background: linear-gradient(to right, transparent, var(--lijn-sterk));
    transform-origin: right center;
}
.kruising::after {
    background: linear-gradient(to left, transparent, var(--lijn-sterk));
    transform-origin: left center;
}

.kruising__ruit {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background: var(--goud);
    transform: rotate(45deg);
}

.sectie--inkt .kruising::before { background: linear-gradient(to right, transparent, rgba(255, 255, 255, .28)); }
.sectie--inkt .kruising::after  { background: linear-gradient(to left, transparent, rgba(255, 255, 255, .28)); }

/* De lijnen groeien naar elkaar toe zodra het teken in beeld komt. */
.js-beweegt .kruising::before,
.js-beweegt .kruising::after {
    transform: scaleX(0);
    transition: transform 700ms var(--soepel);
}
.js-beweegt .kruising__ruit {
    opacity: 0;
    transform: rotate(45deg) scale(.4);
    transition:
        opacity 300ms var(--soepel) 480ms,
        transform 460ms var(--soepel) 420ms;
}

.js-beweegt .kruising.is-binnen::before,
.js-beweegt .kruising.is-binnen::after { transform: scaleX(1); }
.js-beweegt .kruising.is-binnen .kruising__ruit {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

/* ---------------------------------------------------------------------------
   4. Kleine interacties
   --------------------------------------------------------------------------- */

/* Foto's ademen licht mee onder de aanwijzer. Alleen op de beeldkaders,
   nooit op tekst die iemand aan het lezen is. */
.kaart__beeld img,
.fotomuur img {
    transition: transform 620ms var(--soepel);
}

@media (hover: hover) and (pointer: fine) {
    a.kaart:hover .kaart__beeld img,
    .fotomuur a:hover img { transform: scale(1.045); }
}

/* De onderstreping van een link in lopende tekst groeit vanaf links. */
.tekstblok a {
    text-decoration: none;
    background-image: linear-gradient(var(--goud), var(--goud));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    padding-bottom: 1px;
    transition: background-size var(--tijd-mid) var(--soepel), color var(--tijd-kort) var(--soepel-kort);
}

@media (hover: hover) and (pointer: fine) {
    .tekstblok a:hover { background-size: 100% 100%; color: var(--inkt); }
}

/* Labels en categorietegels lichten rustig op. */
.categorietegel__icoon { transition: transform var(--tijd-mid) var(--soepel), background-color var(--tijd-kort) var(--soepel-kort); }

@media (hover: hover) and (pointer: fine) {
    .categorietegel:hover .categorietegel__icoon {
        transform: scale(1.08) rotate(-4deg);
        background: #dbeafe;
    }
}

/* De letterbalk van de gids reageert direct, want daar klikt men vaak. */
.letterbalk a { transition: background-color var(--tijd-tik) var(--soepel-kort), color var(--tijd-tik) var(--soepel-kort); }

/* ---------------------------------------------------------------------------
   5. Voortgang van een artikel

   Een dunne gouden lijn die meeloopt met het scrollen. Waar de browser
   scrollgestuurde animaties ondersteunt gebeurt dit zonder JavaScript.
   --------------------------------------------------------------------------- */
.leesbalk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--goud);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 120;
    pointer-events: none;
}

@supports (animation-timeline: scroll()) {
    .leesbalk {
        animation: leesVoortgang linear;
        animation-timeline: scroll(root block);
    }

    @keyframes leesVoortgang {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

/* Browsers zonder die ondersteuning krijgen geen balk in plaats van een
   balk die met JavaScript op elke scrollstap wordt bijgewerkt. */
@supports not (animation-timeline: scroll()) {
    .leesbalk { display: none; }
}

/* ---------------------------------------------------------------------------
   6. Minder beweging

   Wie in het besturingssysteem heeft aangegeven minder beweging te willen,
   krijgt geen verplaatsingen meer te zien. Het rustig opkomen van de tekst
   blijft, omdat dat helpt te zien dat er iets nieuws in beeld komt.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js-beweegt [data-kom-binnen] {
        transform: none !important;
        transition: opacity 260ms var(--soepel);
    }

    .js-beweegt .held__label,
    .js-beweegt .held h1,
    .js-beweegt .held__tekst,
    .js-beweegt .held__knoppen,
    .js-beweegt .cijfers,
    .js-beweegt .held__collage,
    .js-beweegt .held__collage img {
        animation: none;
        opacity: 1;
    }

    .js-beweegt .kruising::before,
    .js-beweegt .kruising::after { transform: scaleX(1); transition: none; }
    .js-beweegt .kruising__ruit { opacity: 1; transform: rotate(45deg); transition: none; }

    .kaart__beeld img, .fotomuur img { transition: none; }
    a.kaart:hover .kaart__beeld img, .fotomuur a:hover img { transform: none; }

    .leesbalk { display: none; }
}