/* Cinematic Projector Roll (Gate Slip) Transition */

:root {
    --roll-duration-out: 0.25s;
    --roll-duration-in: 0.4s;
    /* Slightly longer for the bounce */
}

/* Ensure global background is black to simulate the film gap */
html {
    background-color: #000;
}

/* Target the Main Container instead of Body to keep Header static */
.md-container.anim-active {
    overflow-y: hidden;
    width: 100%;
    /* Force GPU Layer */
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
    /* Ensure it has a background so the gap is visible behind it */
    background-color: var(--md-default-bg-color);
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------------- */
/* KEYFRAMES */
/* ------------------------------------------------------------------------- */

/* ROLL OUT (Slide Down / Film Slipping) */
@keyframes projector-roll-out {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(0, 110vh, 0);
        /* Exit Bottom */
    }
}

/* ROLL IN (Drop from Top with Bounce) */
@keyframes projector-roll-in-bounce {
    0% {
        transform: translate3d(0, -110vh, 0);
        /* Start Top */
    }

    60% {
        /* The Drop (Heavy) */
        transform: translate3d(0, 5vh, 0);
        /* Overshoot bottom */
    }

    80% {
        /* The Recoil */
        transform: translate3d(0, -2vh, 0);
        /* Bounce up */
    }

    100% {
        /* The Lock */
        transform: translate3d(0, 0, 0);
    }
}

/* ------------------------------------------------------------------------- */
/* CLASSES */
/* ------------------------------------------------------------------------- */

.md-container.anim-roll-out {
    animation: projector-roll-out var(--roll-duration-out) cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

.md-container.anim-roll-in {
    animation: projector-roll-in-bounce var(--roll-duration-in) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}