/* Ensure basic animated-letter styles are here */
.animated-letter {
    opacity: 0;
    transform: translateY(20px) rotate(-10deg);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Only applies to .show */
    display: inline-block;
    transform-origin: center bottom; /* Quan trọng để xoay quanh chân chữ */
}

/* Hiệu ứng khi chữ cái xuất hiện (trượt lên và thẳng lại) */
.animated-letter.show {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* CẢI TIẾN: Hiệu ứng lượn sóng (bao gồm chuyển động ngang rõ hơn) */
@keyframes wave {
    0% { transform: translateX(0) translateY(0) rotate(0deg); } /* Bắt đầu từ vị trí gốc */
    25% { transform: translateX(-5px) translateY(-8px) rotate(3deg); } /* Lên cao hơn, nghiêng nhẹ trái và dịch trái */
    50% { transform: translateX(0) translateY(0) rotate(0deg); } /* Về vị trí gốc */
    75% { transform: translateX(5px) translateY(8px) rotate(-3deg); } /* Xuống thấp hơn, nghiêng nhẹ phải và dịch phải */
    100% { transform: translateX(0) translateY(0) rotate(0deg); } /* Kết thúc tại vị trí gốc */
}

/* Áp dụng hiệu ứng lượn sóng */
.animated-letter.wave-effect {
    animation: wave 1.5s ease-in-out forwards; /* Tăng duration lên 1.5s để sóng mượt và rõ hơn */
}

/* CẢI TIẾN: "Go into logo" - trôi về hướng logo và biến mất */
@keyframes go-into-logo {
    0% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
    50% {
        /* Trôi về hướng góc trên bên trái, thu nhỏ dần và xoay nhẹ */
        opacity: 0.8;
        transform: translateX(-20vw) translateY(-5vh) scale(0.6) rotate(10deg);
    }
    100% {
        opacity: 0; /* Biến mất hoàn toàn */
        /* Đến điểm gần logo (ngoài màn hình để cảm giác "đi vào") */
        /* Cần ĐIỀU CHỈNH các giá trị vw/vh này để phù hợp với vị trí LOGO THỰC TẾ của bạn */
        transform: translateX(-60vw) translateY(-20vh) scale(0.01) rotate(-90deg);
    }
}
.animated-letter.go-into-logo-effect {
    animation: go-into-logo 1.2s ease-in forwards; /* Duration cho hoạt ảnh này */
}

/* CẢI TIẾN: "Reverse into SACHTONY" - Xuất hiện từ vị trí logo và đảo ngược về SACHTONY (có sóng nhẹ) */
@keyframes reverse-into-sachtony {
    0% {
        opacity: 0;
        /* Bắt đầu từ chính xác điểm kết thúc của 'go-into-logo', không xoay */
        transform: translateX(-60vw) translateY(-20vh) scale(0.01) rotate(0deg);
    }
    5% { /* Rất nhanh xuất hiện và lớn lên một chút, bắt đầu di chuyển ra khỏi logo */
        opacity: 1; /* Hiển thị ngay lập tức */
        transform: translateX(-40vw) translateY(-10vh) scale(0.2) rotate(15deg); /* Dịch chuyển ra, lớn lên, nghiêng */
    }
    40% { /* Điểm giữa của đường về, có nhún/sóng nhẹ */
        opacity: 1;
        transform: translateX(-5vw) translateY(-5px) scale(0.9) rotate(-5deg); /* Dịch nhẹ, nhún nhẹ */
    }
    70% { /* Một điểm sóng khác */
        opacity: 1;
        transform: translateX(5vw) translateY(5px) scale(1.05) rotate(5deg); /* Dịch nhẹ, nhún nhẹ ngược lại */
    }
    100% {
        /* Kết thúc ở vị trí ban đầu, ổn định */
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}
.animated-letter.reverse-into-sachtony-effect {
    animation: reverse-into-sachtony 2.0s ease-out forwards; /* Tăng duration lên 2.0s để sóng mượt và rõ hơn */
}

/* Cleanup styles to ensure no lingering transforms/opacities from previous animations */
.animated-letter.reset-state {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    transition: none; /* Không có transition cho reset tức thì */
}

* Cụ thể hóa màu cho từng cặp chữ cái SA và CH */
.letter-sa { color: #FFD700; } /* Vàng ánh kim */
.letter-ch { color: #FF6347; } /* Tomato */
.letter-to { color: #2E8B57; } /* SeaGreen */
.letter-ny { color: #48D1CC; } /* MediumTurquoise */