/* ============================================
   CLUBWAVE - transitions.css
   Pagina-overgangen voor de PWA
   Versie 1.0
   ============================================ */

/* ?? BASIS: alle pagina's gestapeld ?? */
.page {
    position: absolute;
    inset: 0;
    background: var(--cw-gray-light);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    pointer-events: none;
}

    /* Actieve pagina altijd zichtbaar */
    .page.active {
        visibility: visible;
        pointer-events: all;
    }

    /* ?? SLIDE (van rechts) ?? */
    /* Gebruik voor: navigatie, lijsten, oefeningen */
    .page.t-slide {
        visibility: visible;
        transform: translateX(100%);
        opacity: 0.6;
        transition: transform var(--t-duration) var(--t-ease), opacity var(--t-duration) var(--t-ease);
        will-change: transform;
    }

        .page.t-slide.active {
            transform: translateX(0);
            opacity: 1;
        }

        .page.t-slide.leaving {
            transform: translateX(-28%);
            opacity: 0.35;
        }

    /* ?? FADE ?? */
    /* Gebruik voor: home, dashboard, tabwissels */
    .page.t-fade {
        visibility: visible;
        opacity: 0;
        transition: opacity var(--t-duration) var(--t-ease);
    }

        .page.t-fade.active {
            opacity: 1;
        }

        .page.t-fade.leaving {
            opacity: 0;
        }

    /* ?? SCALE (zoom in) ?? */
    /* Gebruik voor: speler-detail, oefening-detail */
    .page.t-scale {
        visibility: visible;
        transform: scale(0.92);
        opacity: 0;
        transition: transform var(--t-duration) var(--t-ease), opacity var(--t-duration) var(--t-ease);
        will-change: transform;
    }

        .page.t-scale.active {
            transform: scale(1);
            opacity: 1;
        }

        .page.t-scale.leaving {
            transform: scale(1.05);
            opacity: 0;
        }

    /* ?? SLIDE UP (van onderaf) ?? */
    /* Gebruik voor: scorebord, bottom sheets, modals */
    .page.t-slideup {
        visibility: visible;
        transform: translateY(100%);
        opacity: 0.6;
        transition: transform var(--t-duration) var(--t-ease), opacity var(--t-duration) var(--t-ease);
        will-change: transform;
    }

        .page.t-slideup.active {
            transform: translateY(0);
            opacity: 1;
        }

        .page.t-slideup.leaving {
            transform: translateY(-15%);
            opacity: 0.3;
        }

/* ?? WIPE OVERLAY ?? */
/* Gebruik voor: speciale momenten, merkbeleving */
#cw-overlay {
    position: fixed;
    inset: 0;
    background: var(--cw-green);
    transform: translateX(-110%);
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.22s var(--t-ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

    #cw-overlay span {
        font-family: 'Passion One', sans-serif;
        color: rgba(255, 255, 255, 0.2);
        font-size: 48px;
        letter-spacing: 3px;
    }

/* ?? CSS VARIABELEN ?? */
/* Overschrijf in :root van je eigen stylesheet indien gewenst */
:root {
    --t-duration: 0.42s;
    --t-ease: cubic-bezier(0.4, 0, 0.2, 1);
}