/*
 * Hoe een advertentie in beeld komt.
 *
 * Een advertentie die er meteen staat wordt weggekeken; komt hij pas als iemand
 * aan het lezen is, dan valt hij op. Maar dan moet hij zich wel gedragen: de
 * tekst mag niet met een schok wegspringen, want dan klikt de lezer per ongeluk
 * op iets anders dan hij bedoelde.
 *
 * Vandaar dat elk effect de hoogte geleidelijk opbouwt in plaats van in één keer
 * ruimte op te eisen.
 *
 * Wie in zijn systeem heeft aangegeven minder beweging te willen zien, krijgt
 * alle effecten als een eenvoudige fade. Dat is geen extraatje: bewegende
 * schermen kunnen bij sommige mensen misselijkheid of duizeligheid veroorzaken.
 */

/*
 * Ook tijdens het openvouwen afknippen, niet alleen ervoor.
 *
 * Stond dit op :not(.reveal-klaar), dan verviel het precies op het moment dat de
 * animatie begon: de advertentie stond er dan meteen in volle hoogte overheen,
 * terwijl de ruimte er nog niet was. Je zag hem eerst over de tekst vallen en
 * daarna de tekst wegschuiven — twee bewegingen na elkaar in plaats van één.
 *
 * Het script haalt data-reveal weg als de animatie klaar is, zodat deze
 * begrenzing daarna niets meer in de weg zit.
 */
[data-reveal] {
    overflow: hidden;
}

/* ── Openvouwen: de pagina maakt ruimte, van boven naar beneden ──
 *
 * Geen vervorming: de hoogte groeit, de inhoud zelf wordt niet uitgerekt. Dat is
 * het verschil tussen "de pagina maakt ruimte" en "er wordt iets overheen
 * geplakt" — schaal je de inhoud mee, dan zie je hem vervormen en valt het
 * meteen op als iets vreemds.
 *
 * Snel, want dit is geen voorstelling. De inhoud komt van net boven zijn plek
 * naar beneden mee, zodat het lijkt of hij naar binnen valt in plaats van te
 * verschijnen.
 *
 * De bocht begint snel en landt zacht. Een gewone ease houdt aan het begin te
 * lang vast, waardoor het traag aanvoelt terwijl het even lang duurt.
 */
[data-reveal="expand"]:not(.reveal-klaar) {
    max-height: 0;
    opacity: 0;
}
[data-reveal="expand"]:not(.reveal-klaar) > * {
    transform: translateY(-10px);
}
[data-reveal="expand"].reveal-klaar {
    max-height: 1200px;
    opacity: 1;
    transition: max-height .42s cubic-bezier(.2, .9, .25, 1), opacity .2s ease-out;
}
[data-reveal="expand"].reveal-klaar > * {
    transform: translateY(0);
    transition: transform .46s cubic-bezier(.2, .9, .25, 1);
}

/* ── Tv aanzetten: een lijn die uitrekt en dan openklapt ── */
[data-reveal="tv"]:not(.reveal-klaar) {
    max-height: 0;
    opacity: 0;
    transform: scaleX(.02) scaleY(.01);
    transform-origin: center;
}
[data-reveal="tv"].reveal-klaar {
    max-height: 1200px;
    opacity: 1;
    transform: scaleX(1) scaleY(1);
    /*
     * De volgorde maakt het effect: eerst rekt de lijn horizontaal uit, pas
     * daarna klapt hij verticaal open. Andersom is het gewoon een zoom.
     */
    transition:
        max-height .5s ease .18s,
        opacity .12s ease,
        transform .5s cubic-bezier(.16, .84, .44, 1);
}
[data-reveal="tv"].reveal-klaar > * {
    animation: ad-tv-flits .5s ease-out;
}
@keyframes ad-tv-flits {
    0%   { filter: brightness(2.4) contrast(.4); }
    35%  { filter: brightness(1.6) contrast(.8); }
    100% { filter: none; }
}

/* ── Inschuiven: de ruimte is er al, alleen het beeld beweegt ── */
[data-reveal="slide"]:not(.reveal-klaar) {
    opacity: 0;
}
[data-reveal="slide"]:not(.reveal-klaar) > * {
    transform: translateX(18%);
}
[data-reveal="slide"].reveal-klaar {
    opacity: 1;
    transition: opacity .3s ease;
}
[data-reveal="slide"].reveal-klaar > * {
    transform: translateX(0);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* ── Alleen invagen ── */
[data-reveal="fade"]:not(.reveal-klaar) {
    opacity: 0;
}
[data-reveal="fade"].reveal-klaar {
    opacity: 1;
    transition: opacity .5s ease;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal]:not(.reveal-klaar) {
        max-height: none;
        transform: none;
        opacity: 0;
    }
    [data-reveal]:not(.reveal-klaar) > * {
        transform: none;
    }
    [data-reveal].reveal-klaar,
    [data-reveal].reveal-klaar > * {
        max-height: none;
        transform: none;
        opacity: 1;
        transition: opacity .3s ease;
        animation: none;
    }
}