@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

@keyframes form-expand {
    0%, 17% {
        height: 0;
        opacity: 0;
        margin-top: 0;
    }

    22%, 57% {
        height: 100px;
        opacity: 1;
        margin-top: 12px;
    }

    62%, 100% {
        height: 0;
        opacity: 0;
        margin-top: 0;
    }
}

@keyframes typing {
    0%, 22% {
        content: '';
    }
    22.5% {
        content: '•';
    }
    23% {
        content: '••';
    }
    23.5% {
        content: '•••';
    }
    24% {
        content: '••••';
    }
    24.5% {
        content: '•••••';
    }
    25% {
        content: '••••••';
    }
    25.5% {
        content: '•••••••';
    }
    26% {
        content: '••••••••';
    }
    26.5% {
        content: '•••••••••';
    }
    27% {
        content: '••••••••••';
    }
    27.5% {
        content: '•••••••••••';
    }
    28% {
        content: '••••••••••••';
    }
    28.5% {
        content: '•••••••••••••';
    }
    29%, 56% {
        content: '••••••••••••••';
    }
    56%, 100% {
        content: '••••••••••••••';
    }
}

@keyframes hide-btn {
    0%, 17% {
        visibility: visible;
        opacity: 1;
    }

    17.1%, 100% {
        visibility: hidden;
        opacity: 0;
    }
}

@keyframes show-active {
    0%, 62% {
        visibility: hidden;
        opacity: 0;
    }

    63%, 100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes scroll-up-code {
    0%, 20% {
        transform: translateY(0);
    }

    25%, 45% {
        transform: translateY(-1.7em);
    }

    50%, 70% {
        transform: translateY(-3.4em);
    }

    75%, 95% {
        transform: translateY(-5.1em);
    }

    100% {
        transform: translateY(-6.8em);
    }
}

@keyframes swap-iso-1 {
    0%, 45% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    50%, 85% {
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    90%, 100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes swap-iso-2 {
    0%, 45% {
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    50%, 85% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    90%, 100% {
        transform: translate(-50%, -50%);
        opacity: 0;
    }
}

@keyframes pause-code-1 {
    0%, 45% {
        animation-play-state: running;
    }

    50%, 100% {
        animation-play-state: paused;
    }
}

@keyframes pause-noah-2 {
    0%, 45% {
        animation-play-state: paused;
    }

    50%, 100% {
        animation-play-state: running;
    }
}

@keyframes form-expand-delayed {
    0%, 49.9% {
        height: 0;
        opacity: 0;
        margin-top: 0;
    }
    50%, 60% {
        height: 0;
        opacity: 0;
        margin-top: 0;
    }
    62%, 75% {
        height: 100px;
        opacity: 1;
        margin-top: 12px;
    }
    77%, 100% {
        height: 0;
        opacity: 0;
        margin-top: 0;
    }
}

@keyframes hide-btn-delayed {
    0%, 49.9% {
        visibility: hidden;
        opacity: 0;
    }
    50%, 60% {
        visibility: visible;
        opacity: 1;
    }
    60.1%, 100% {
        visibility: hidden;
        opacity: 0;
    }
}

@keyframes show-active-delayed {
    0%, 49.9% {
        visibility: hidden;
        opacity: 0;
    }
    50%, 77% {
        visibility: hidden;
        opacity: 0;
    }
    78%, 100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes typing-delayed {
    0%, 62% {
        content: '';
    }
    62.5% {
        content: '•';
    }
    63% {
        content: '••';
    }
    63.5% {
        content: '•••';
    }
    64% {
        content: '••••';
    }
    64.5% {
        content: '•••••';
    }
    65% {
        content: '••••••';
    }
    65.5% {
        content: '•••••••';
    }
    66% {
        content: '••••••••';
    }
    66.5% {
        content: '•••••••••';
    }
    67% {
        content: '••••••••••';
    }
    67.5% {
        content: '•••••••••••';
    }
    68% {
        content: '••••••••••••';
    }
    68.5% {
        content: '•••••••••••••';
    }
    69%, 77% {
        content: '••••••••••••••';
    }
    77%, 100% {
        content: '••••••••••••••';
    }
}

@keyframes scroll-up {
    0%, 15% {
        transform: translateY(0);
    }

    20%, 35% {
        transform: translateY(-1.2em);
    }

    40%, 55% {
        transform: translateY(-2.4em);
    }

    60%, 75% {
        transform: translateY(-3.6em);
    }

    80%, 95% {
        transform: translateY(-4.8em);
    }

    100% {
        transform: translateY(-6.0em);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Animation States */
.swap-item-1 {
    animation: swap-iso-1 20s infinite;
}

.swap-item-2 {
    animation: swap-iso-2 20s infinite;
}

/* Pause child animations when parent is faded out */
.swap-item-1 .noah-row .connection-form {
    animation: form-expand 8s infinite, pause-code-1 20s infinite;
}

.swap-item-1 .noah-row .connect-btn {
    animation: hide-btn 8s infinite, pause-code-1 20s infinite;
}

.swap-item-1 .noah-row .status-badge.active {
    animation: show-active 8s infinite, pause-code-1 20s infinite;
}

.swap-item-1 .code-carousel-track {
    animation: scroll-up-code 8s infinite cubic-bezier(0.4, 0, 0.2, 1), pause-code-1 20s infinite;
}

.swap-item-2 .noah-row .connection-form {
    animation: form-expand-delayed 20s infinite;
}

.swap-item-2 .noah-row .connect-btn {
    animation: hide-btn-delayed 20s infinite;
}

.swap-item-2 .noah-row .status-badge.active {
    animation: show-active-delayed 20s infinite;
}

.swap-item-2 .code-carousel-track {
    animation: scroll-up-code 8s infinite cubic-bezier(0.4, 0, 0.2, 1), pause-noah-2 20s infinite;
}