/* ============================================
   Envelope Teaser Attention Animation
   ============================================ */

@keyframes teaserWiggle {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-3px) rotate(-2deg) scale(1.02);
    }
    50% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    75% {
        transform: translateY(-3px) rotate(2deg) scale(1.02);
    }
}

.teaser-attention {
    animation: teaserWiggle 1.2s ease-in-out infinite;
}

/* ============================================
   Letter Appearance Animation
   ============================================ */

@keyframes letterAppear {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
}

.letter-visible {
    animation: letterAppear 0.6s ease-out forwards;
}

.letter.letter-visible {
    opacity: 1;
    transform: translateX(-50%);
    pointer-events: auto;
}