/* ============================================
   SCREEN TRANSITIONS
   ============================================ */

/* Base screen styling - only add transitions to existing active state */
.screen {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.screen.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Slide from right */
.screen.slide-right {
    transform: translateX(100%);
}

.screen.slide-right.active {
    transform: translateX(0);
}

/* Slide from left */
.screen.slide-left {
    transform: translateX(-100%);
}

.screen.slide-left.active {
    transform: translateX(0);
}

/* Fade transition */
.screen.fade {
    transform: translateX(0);
    opacity: 0;
}

.screen.fade.active {
    opacity: 1;
}

/* Scale transition */
.screen.scale {
    transform: scale(0.95);
    opacity: 0;
}

.screen.scale.active {
    transform: scale(1);
    opacity: 1;
}

/* Slide up for modals/bottom sheets */
.screen.slide-up {
    transform: translateY(100%);
}

.screen.slide-up.active {
    transform: translateY(0);
}

/* Slide down for dismissals */
.screen.slide-down {
    transform: translateY(-100%);
}

.screen.slide-down.active {
    transform: translateY(0);
}

/* Flip transition */
.screen.flip {
    transform: perspective(1000px) rotateY(-90deg);
}

.screen.flip.active {
    transform: perspective(1000px) rotateY(0deg);
}

/* Transition container */
.screen-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Screen-specific transitions */
.auth-screen {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-screen {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.write-screen {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-screen {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation classes for dynamic transitions */
.transition-enter {
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.transition-exit {
    animation: slideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.transition-enter-reverse {
    animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.transition-exit-reverse {
    animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Keyframe animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scaleOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Loading overlay for transitions */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transition-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .screen,
    .transition-enter,
    .transition-exit,
    .transition-enter-reverse,
    .transition-exit-reverse {
        transition: none;
        animation: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
}