/* ==================== ANIMATION SYSTEM ==================== */

/* Nav controls for animations */
.nav-controls {
    display: flex;
    gap: 0.5rem;
    margin-right: 1rem;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-btn.active {
    background: #ff6788;
    color: #000;
}

.nav-btn.active:hover {
    background: #ff5577;
}

.nav-btn i {
    font-size: 0.875rem;
}

/* Tab transition animations */
.slide-in-left {
    animation: slideInFromLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-right {
    animation: slideInFromRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-out-left {
    animation: slideOutToLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-out-right {
    animation: slideOutToRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

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

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes blurOut {
    from {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
    to {
        opacity: 0;
        filter: blur(10px);
        transform: scale(0.95);
    }
}

/* Fade animation classes */
body.animations-fade .animate-in {
    animation: fadeInUp 0.4s ease forwards;
}

body.animations-fade .modal.active {
    animation: fadeIn 0.3s ease;
}

body.animations-fade .modal-content {
    animation: fadeInDown 0.3s ease;
}

body.animations-fade .embed-wrapper {
    animation: fadeInUp 0.4s ease;
}

body.animations-fade .collapsible-section .section-content {
    animation: fadeIn 0.3s ease;
}

body.animations-fade .toast {
    animation: slideIn 0.3s ease;
}

body.animations-fade .btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

body.animations-fade .section-content:not(.collapsed) {
    animation: fadeIn 0.3s ease;
}

body.animations-fade .button-row,
body.animations-fade .field-item {
    animation: fadeInUp 0.3s ease;
}

/* Closing animations for fade */
body.animations-fade .modal.closing {
    animation: fadeOut 0.3s ease forwards;
}

body.animations-fade .modal.closing .modal-content {
    animation: fadeOutDown 0.3s ease forwards;
}

/* Section transitions for fade */
body.animations-fade .editor-section {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.animations-fade .editor-section:not(.active) {
    opacity: 0;
    pointer-events: none;
}

body.animations-fade .editor-section.active {
    animation: fadeInUp 0.4s ease;
}

body.animations-fade .send-content {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.animations-fade .send-content.hidden {
    opacity: 0;
    pointer-events: none;
}

body.animations-fade .send-content.active {
    animation: fadeInUp 0.4s ease;
}

/* Blur animation classes */
body.animations-blur .animate-in {
    animation: blurIn 0.5s ease forwards;
}

body.animations-blur .modal.active {
    animation: blurIn 0.4s ease;
}

body.animations-blur .modal-content {
    animation: blurIn 0.4s ease 0.1s backwards;
}

body.animations-blur .embed-wrapper {
    animation: blurIn 0.5s ease;
}

body.animations-blur .collapsible-section .section-content {
    animation: blurIn 0.3s ease;
}

body.animations-blur .toast {
    animation: blurIn 0.4s ease;
}

body.animations-blur .btn:active {
    transform: scale(0.92);
    filter: blur(1px);
    transition: all 0.1s ease;
}

body.animations-blur .section-content:not(.collapsed) {
    animation: blurIn 0.3s ease;
}

body.animations-blur .button-row,
body.animations-blur .field-item {
    animation: blurIn 0.4s ease;
}

/* Closing animations for blur */
body.animations-blur .modal.closing {
    animation: blurOut 0.4s ease forwards;
}

body.animations-blur .modal.closing .modal-content {
    animation: blurOut 0.4s ease forwards;
}

/* Section transitions for blur */
body.animations-blur .editor-section {
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

body.animations-blur .editor-section:not(.active) {
    opacity: 0;
    pointer-events: none;
}

body.animations-blur .editor-section.active {
    animation: blurIn 0.5s ease;
}

body.animations-blur .send-content {
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

body.animations-blur .send-content.hidden {
    opacity: 0;
    pointer-events: none;
}

body.animations-blur .send-content.active {
    animation: blurIn 0.5s ease;
}

/* Smooth transitions for all interactive elements */
body.animations-fade *,
body.animations-blur * {
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

/* Disable animations when turned off */
body.animations-off * {
    animation: none !important;
    transition: none !important;
}

body.animations-off .animate-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}