/* Stripe Transition Animations */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.stripe-transition-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    overflow: hidden;
}

/* Estado padrão: altura 100vh (para ENTRADA) */
.stripe {
    flex: 1;
    height: 100vh;
    overflow: hidden;
    animation-fill-mode: forwards;
}

/* Modo de saída: todas as stripes começam com 0vh */
.stripe-transition-container.exit-mode .stripe {
    height: 0vh;
}

/* Cores do Reggae */
.stripe-left {
    background-color: #00a859;
}

.stripe-middle {
    background-color: #ffcc00;
}

.stripe-right {
    background-color: #d10000;
}

/* ============ ANIMAÇÕES DE ENTRADA ============ */
/* Entrada: stripes descem de cima, cobrem, e saem para baixo */

@keyframes slideInLeft {
    from {
        height: 100vh;
    }
    to {
        height: 0vh;
    }
}

@keyframes slideInMiddle {
    from {
        height: 100vh;
    }
    to {
        height: 0vh;
    }
}

@keyframes slideInRight {
    from {
        height: 100vh;
    }
    to {
        height: 0vh;
    }
}

.stripe-left.enter-left {
    animation: slideInLeft 0.6s ease-in-out 0s forwards;
}

.stripe-middle.enter-middle {
    animation: slideInMiddle 0.6s ease-in-out 1.2s forwards;
}

.stripe-right.enter-right {
    animation: slideInRight 0.6s ease-in-out 0.6s forwards;
}

/* ============ ANIMAÇÕES DE SAÍDA ============ */
/* Saída: stripes sobem de baixo para cobrir */

@keyframes slideOutLeft {
    from {
        height: 0vh;
    }
    to {
        height: 100vh;
    }
}

@keyframes slideOutMiddle {
    from {
        height: 0vh;
    }
    to {
        height: 100vh;
    }
}

@keyframes slideOutRight {
    from {
        height: 0vh;
    }
    to {
        height: 100vh;
    }
}

.stripe-left.exit-left {
    animation: slideOutLeft 0.6s ease-in 0s forwards;
}

.stripe-middle.exit-middle {
    animation: slideOutMiddle 0.6s ease-in 1.2s forwards;
}

.stripe-right.exit-right {
    animation: slideOutRight 0.6s ease-in 0.6s forwards;
}

/* ============ ESTADO CONGELADO (após animação terminar) ============ */
/* Mantém o transform após a animação */

.stripe-entered {
    height: 0 !important;
}

.stripe-exited {
    height: 100vh !important;
}