/* Hero Particles Animation */
.hero-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 40% 70%, white, transparent),
        radial-gradient(1px 1px at 90% 40%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent);
    background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px;
    animation: float 20s infinite linear;
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0px); }
    33% { transform: translateY(-10px) translateX(10px); }
    66% { transform: translateY(5px) translateX(-5px); }
    100% { transform: translateY(0px) translateX(0px); }
}

/* Mascot Card Animations */
.mascot-card {
    animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px) rotateY(0deg); }
    50% { transform: translateY(-10px) rotateY(5deg); }
}

.avatar-ring {
    animation: rotate 8s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.status-indicator.active {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.health-fill {
    animation: fillBar 2s ease-out;
}

@keyframes fillBar {
    from { width: 0%; }
    to { width: 85%; }
}

.dot.active {
    animation: dotPulse 1.5s infinite;
}

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

/* Feature Preview Animations */
.avatar-sphere {
    animation: sphereFloat 3s ease-in-out infinite;
}

.mood-indicator {
    animation: indicatorPulse 2s infinite;
}

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

@keyframes indicatorPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.chart-bar {
    animation: barGrow 1s ease-out;
}

@keyframes barGrow {
    from { height: 0; }
    to { height: var(--height, 60%); }
}

.map-point {
    animation: mapPulse 2s infinite;
}

.geofence {
    animation: geofenceRotate 4s linear infinite;
}

@keyframes mapPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
    50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}

@keyframes geofenceRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.notification-dot {
    animation: notificationBlink 1.5s infinite;
}

@keyframes notificationBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.progress-fill {
    animation: progressFill 2s ease-out;
}

@keyframes progressFill {
    from { background: conic-gradient(var(--primary-color) 0%, transparent 0%); }
    to { background: conic-gradient(var(--primary-color) 75%, transparent 75%); }
}

.cloud-icon {
    animation: cloudFloat 3s ease-in-out infinite;
}

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

.sync-dot {
    animation: syncAnimation 1.5s infinite;
}

.sync-dot:nth-child(2) {
    animation-delay: 0.3s;
}

.sync-dot:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes syncAnimation {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

/* Avatar Demo Animations */
.avatar-model {
    animation: avatarFloat 3s ease-in-out infinite;
}

@keyframes avatarFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.emotion-indicator {
    animation: emotionBounce 1s ease-out;
}

@keyframes emotionBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* New: Avatar emotion-specific animations */
@keyframes excitedJiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Particle Animation for Hero Background */
@keyframes particleFloat {
    0% { transform: translateY(100vh) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(var(--random-x, 0px)); opacity: 0; }
}

/* Ripple Effect Animation */
@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}