/* Uitgaande paginaovergang
   ------------------------
   Tegenhanger van .sq-page-enter in style.css: twee paarse vlakken die
   INSCHUIVEN op het moment dat de bezoeker de pagina verlaat. Dit bestand
   wordt alleen ingeladen wanneer SQILLS_UITGAANDE_PAGINAOVERGANG in
   functions.php aan staat; staat de schakelaar uit, dan komt er geen enkele
   regel hiervan mee.

   Ruststand is scaleX(0) en visibility: hidden, zodat een afgebroken lading of
   een scriptloze browser nooit een paars scherm achterlaat. De animatie staat
   uitsluitend binnen prefers-reduced-motion: no-preference, net als de
   binnenkomsthelft.

   De volgorde is bewust het spiegelbeeld van de binnenkomst: die begint met
   --color-purple--2 in beeld, dus eindigt deze helft daarop. Vandaar dat
   purple-1 als eerste inschuift en purple-2 er 0,15s later overheen komt. */

.sq-page-leave {
    position: fixed;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    visibility: hidden;
}

.sq-page-leave__panel {
    position: absolute;
    inset: 0;
    display: block;
    transform: scaleX(0) translateZ(0);
    transform-origin: left center;
}

.sq-page-leave__panel--first {
    background: var(--color-purple--1);
}

.sq-page-leave__panel--second {
    background: var(--color-purple--2);
}

@media (prefers-reduced-motion: no-preference) {
    .sq-page-leave-actief .sq-page-leave {
        visibility: visible;
    }

    .sq-page-leave-actief .sq-page-leave__panel--first {
        animation: sq-page-leave-wipe 0.35s cubic-bezier(0.585, 0.1, 0.535, 1) forwards;
    }

    .sq-page-leave-actief .sq-page-leave__panel--second {
        animation: sq-page-leave-wipe 0.35s cubic-bezier(0.585, 0.1, 0.535, 1) 0.15s forwards;
    }
}

@keyframes sq-page-leave-wipe {
    from {
        transform: scaleX(0) translateZ(0);
    }

    to {
        transform: scaleX(1) translateZ(0);
    }
}