@layer animation {
    @keyframes blink { 50% { opacity: 0; } }

    /* Wordmark reveal */
    .line {
        opacity: 0;
        transform: translateY(60px);
        animation: reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .line--vibe  { animation-delay: 0s; }
    .line--hyper { animation-delay: 0.15s; }
    .line--media { animation-delay: 0.3s; }

    .rule {
        animation: expand 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
    }

    .tagline {
        opacity: 0;
        animation: fade-dim 1s ease 0.9s forwards;
    }

    /* Activity dot pulses */
    .ed-title::before {
        animation: pulse-dot 2s ease-in-out infinite;
    }

    /* Prompt border breathes */
    .ed-prompt::before {
        animation: prompt-breathe 3s ease-in-out infinite;
    }

    /* Stack layers animate in within browser */
    .browser-content .layer {
        opacity: 0;
        transform: translateY(20px);
        animation: layer-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .browser-content .layer-html   { animation-delay: 0.3s; }
    .browser-content .layer-http   { animation-delay: 0.5s; }
    .browser-content .layer-server { animation-delay: 0.7s; }

    .browser-content .pipe {
        opacity: 0;
        animation: pipe-fade 0.6s ease forwards;
    }
    .browser-content .pipe:nth-of-type(2) { animation-delay: 0.4s; }
    .browser-content .pipe:nth-of-type(4) { animation-delay: 0.6s; }

    .browser-content .annotation {
        opacity: 0;
        animation: pipe-fade 1s ease 0.9s forwards;
    }

    /* Keyframes */
    @keyframes reveal         { to { opacity: 1; transform: translateY(0); } }
    @keyframes expand         { to { width: 100px; } }
    @keyframes fade-dim       { to { opacity: 0.4; } }
    @keyframes fade-full      { to { opacity: 1; } }
    @keyframes fade-out       { to { opacity: 0; position: absolute; visibility: hidden; } }
    @keyframes piece-in       { to { opacity: 1; transform: translateY(0); } }
    @keyframes colorize       { to { filter: grayscale(0); } }
    @keyframes layer-in       { to { opacity: 1; transform: translateY(0); } }
    @keyframes pipe-fade      { to { opacity: 0.2; } }

    @keyframes pulse-dot {
        0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
        50%      { opacity: 0.7; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0); }
    }

    @keyframes prompt-breathe {
        0%, 100% { opacity: 0.15; }
        50%      { opacity: 0.6; }
    }
}