/* Fade in cloud */
#loading_svg #svg_cloud {
    visibility: visible;
    opacity: 0;
    animation: fadeInCloud 1.2s ease-in-out forwards;
    animation-delay: 0.5s;
}

@keyframes fadeInCloud {
    to {
        opacity: 1;
    }
}

/* iCloud letters slide in from left */
#loading_svg #svg_letter_i,
#loading_svg #svg_letter_c,
#loading_svg #svg_letter_l,
#loading_svg #svg_letter_o,
#loading_svg #svg_letter_u,
#loading_svg #svg_letter_d {
    visibility: visible;
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInRight 0.2s ease forwards;
}

#loading_svg #svg_letter_i { animation-delay: 1.0s; }
#loading_svg #svg_letter_c { animation-delay: 1.2s; }
#loading_svg #svg_letter_l { animation-delay: 1.4s; }
#loading_svg #svg_letter_o { animation-delay: 1.6s; }
#loading_svg #svg_letter_u { animation-delay: 1.8s; }
#loading_svg #svg_letter_d { animation-delay: 2.0s; }

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* KIDS letters: all fade in at once, no animation delay, JS-controlled */
#loading_svg #svg_letter_kids_k,
#loading_svg #svg_letter_kids_i,
#loading_svg #svg_letter_kids_d,
#loading_svg #svg_letter_kids_s {
    visibility: visible;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* Ball: fade in then bounce forever */
#loading_svg #svg_ball {
    visibility: visible;
    opacity: 0;
    animation:
        fadeIn 0.6s ease forwards 3.8s,
        bounce 1.2s ease-in-out infinite 4.3s;
    transform-origin: center;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}