/* CSS Animation Variables */
:root {
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* Global Transitions */
body {
    transition: font-family var(--transition-slow);
}

.editor {
    transition: font-family var(--transition-slow);
}

/* Button Animations */
.btn, .menu-btn, .settings-btn, .new-file-btn, .export-option-btn, 
.option-btn, .close-btn, .close-sidebar-btn, .recent-file-btn {
    transition: all var(--transition-base);
}

.btn.primary:hover:not(:disabled), .new-file-btn:hover {
    opacity: 0.9;
}

.btn-danger:hover:not(:disabled) {
    opacity: 0.9;
}

/* Preview Content Animations */
.preview .footnote-backref, .preview .footnote-ref {
    transition: color var(--transition-base);
}

.preview .footnote-backref:hover, .preview .footnote-ref:hover {
    opacity: 0.8;
}

.footnote-highlight {
    transition: background-color var(--transition-slow) !important;
}

/* Details/Summary Animations */
.preview details {
    transition: box-shadow var(--transition-base);
}

.preview details summary {
    transition: background-color var(--transition-base);
}

.preview details summary::before {
    transition: transform var(--transition-base);
}

.preview details[open] summary::before {
    transform: rotate(90deg);
}

/* Sidebar Animations */
.sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-overlay {
    opacity: 0;
    transition: all var(--transition-slow);
}

.sidebar-overlay.active {
    opacity: 1;
}

.close-sidebar-btn {
    transition: all var(--transition-base);
}

.settings-btn {
    transition: all var(--transition-base);
}

.recent-file-item {
    transition: all var(--transition-base);
}

.recent-file-actions {
    opacity: 0;
    transition: opacity var(--transition-base);
}

.recent-file-item:hover .recent-file-actions {
    opacity: 1;
}

.recent-file-btn {
    transition: all var(--transition-base);
}

/* Modal Animations */
.modal {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.modal.show {
    opacity: 1;
}

.modal-panel {
    transform: scale(0.9);
    transition: transform var(--transition-slow);
}

.modal.show .modal-panel {
    transform: scale(1);
}

.close-btn {
    transition: all var(--transition-base);
}

/* Export Options Animations */
.export-option-btn {
    transition: all var(--transition-base);
}

.export-option-btn:hover {
    transform: translateY(-1px);
}

/* Toast Animations */
.toast {
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-slow);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Non-loading Overlay Transitions */
.initial-loading-overlay {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.initial-loading-overlay.hide {
    opacity: 0;
}

.language-loading-overlay {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.language-loading-overlay.show {
    opacity: 1;
}

/* Toolbar Animations */
.desktop-toolbar {
    transition: all var(--transition-slow);
}

.mobile-toolbar {
    transition: all var(--transition-slow);
}

.toolbar-btn {
    transition: background var(--transition-base);
}

.mobile-toolbar-btn {
    transition: background var(--transition-base);
}

/* Settings Tab Animations */
.tab-btn {
    transition: color var(--transition-slow);
}

.tab-slider {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-content-slider {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle Switch Animations */
.toggle-switch {
    transition: background var(--transition-slow);
}

.toggle-slider {
    transition: transform var(--transition-slow);
}

.toggle-slider.active {
    transform: translateX(20px);
}

/* Mobile Responsive Transform Fixes */
@media (max-width: 768px) {
    .header {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}

/* Prevent content overlap during animation */
.tab-content-container {
    position: relative;
    overflow: hidden;
}

/* Safari specific animation fixes */
@supports (-webkit-touch-callout: none) {
    .tab-btn {
        will-change: transform;
        transform: translateZ(0);
    }
    
    .tab-btn i {
        transform: translateZ(0);
    }
    
    .tab-nav {
        transform: translateZ(0);
    }
    
    .tab-content {
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}