/* --- TRANSITION ANIMATIONS --- */
.anim-fade-out { animation: fadeOut 0.5s ease-in-out forwards; }
.anim-fade-in { animation: fadeIn 0.5s ease-in-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.anim-slide-in { animation: slideIn 0.5s ease-out forwards; }
.anim-slide-out { animation: slideOut 0.5s ease-out forwards; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.anim-zoom-in { animation: zoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-zoom-out { animation: zoomOut 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes zoomIn { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } }

/* --- 3D CUBE --- */
.anim-cube-out {
    transform-origin: 100% 50%;
    animation: cubeRotateOut 0.8s ease-in-out forwards;
}
.anim-cube-in {
    transform-origin: 0% 50%;
    animation: cubeRotateIn 0.8s ease-in-out forwards;
}
@keyframes cubeRotateOut {
    0% { transform: rotateY(0deg); opacity: 1; }
    100% { transform: rotateY(-90deg); opacity: 0; }
}
@keyframes cubeRotateIn {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}

/* --- IRIS (Spotlight) --- */
.anim-iris-in {
    animation: irisIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    z-index: 10;
}
@keyframes irisIn {
    from { clip-path: circle(0% at 50% 50%); }
    to { clip-path: circle(150% at 50% 50%); }
}

/* --- BLUR --- */
.anim-blur-in { animation: blurIn 0.6s ease-out forwards; }
.anim-blur-out { animation: blurOut 0.6s ease-out forwards; }
@keyframes blurIn {
    from { filter: blur(20px); opacity: 0; }
    to { filter: blur(0); opacity: 1; }
}
@keyframes blurOut {
    from { filter: blur(0); opacity: 1; }
    to { filter: blur(20px); opacity: 0; }
}

/* --- WIPE --- */
.anim-wipe-in {
    animation: wipeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 10;
}
@keyframes wipeIn {
    from { clip-path: polygon(-50% 0, -50% 0, -50% 100%, -50% 100%); }
    to { clip-path: polygon(-50% 0, 150% 0, 150% 100%, -50% 100%); }
}

/* --- PUSH UP --- */
.anim-push-in-up { animation: pushInUp 0.5s ease-out forwards; }
.anim-push-out-up { animation: pushOutUp 0.5s ease-out forwards; }
@keyframes pushInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes pushOutUp {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}


/* --- HELPERS --- */
.slide-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Move your existing layout styles here too if you want */
.navbar-custom {
    @apply bg-neutral text-neutral-content;
}
.otp-input {
    @apply input input-bordered w-12 h-14 text-center text-2xl font-bold;
}
.otp-input:focus {
    @apply border-primary ring-2 ring-primary/20;
}