/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-in.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.slide-in {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.slide-in.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.scale-in.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* Fun bounce animation for hero text */
.bounce-in {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bounce-in.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes subtle-bounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1);
    }
}

.bounce-in.animate-in.continuous-bounce {
    animation: subtle-bounce 0.5s ease-in-out infinite;
    animation-delay: 1s;
    /* Start after entry animations complete */
}

@keyframes wavy-shake {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translateY(-3px) rotate(0.7deg);
    }

    50% {
        transform: translateY(0px) rotate(0);
    }

    75% {
        transform: translateY(3px) rotate(-0.7deg);
    }
}

.fade-in.animate-in.wavy-shake {
    animation: wavy-shake 2s ease-in-out infinite;
    animation-delay: 1.5s;
    /* Start after entry animations complete */
}

.form-message {
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    font-weight: 500;
}

.form-message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

body:not(.loaded) {
    opacity: 0;
}

body.loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Animation Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* Typewriter Effect */
.typewriter-effect {
    visibility: hidden;
    /* Hidden until JS starts typing */
}

.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: currentColor;
    margin-left: 5px;
    vertical-align: text-bottom;
    animation: blink 0.8s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.wait-for-typing {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.wait-for-typing.typing-done {
    opacity: 1;
}