/*
 * TeamMuse.ai Landing Page - Custom Styles
 * Contains custom animations and styles for the landing page
 */

/* Base Styles */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Animations */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.blinking-cursor {
    animation: blink 1s infinite;
}

@keyframes sequenceButtonHighlight {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    5% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
    15% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
    20% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes sequenceArrowSlide {
    0%, 20% { transform: translateX(0); opacity: 0.4; }
    25% { transform: translateX(-3px); opacity: 0.4; }
    35% { transform: translateX(4px); opacity: 1; }
    40% { transform: translateX(0); opacity: 0.4; }
    100% { transform: translateX(0); opacity: 0.4; }
}

@keyframes sequenceBoxGlow {
    0%, 40% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    45% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    55% { box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.3); }
    60% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes sequenceCheckScale {
    0%, 40% { transform: scale(1); }
    50% { transform: scale(1.2); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* Animation Classes */
.animate-sequence-button {
    animation: sequenceButtonHighlight 4s ease-in-out infinite;
}

.animate-sequence-arrow {
    animation: sequenceArrowSlide 4s ease-in-out infinite;
}

.animate-sequence-box {
    animation: sequenceBoxGlow 4s ease-in-out infinite;
}

.animate-sequence-check {
    animation: sequenceCheckScale 4s ease-in-out infinite;
}