/**
 * Global Consciousness Tree of Life Animations
 * Responsive sway and visual effects based on world chaos levels
 */

/* ========================================
   TREE SWAY ANIMATIONS
   ======================================== */

/* Gentle Sway - Peaceful World (chaos < 30%) */
@keyframes sway-gentle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    75% { transform: rotate(-1deg); }
}

.sway-gentle {
    animation: sway-gentle 4s ease-in-out infinite;
    transform-origin: bottom center;
}

/* Moderate Sway - Normal Activity (chaos 30-60%) */
@keyframes sway-moderate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

.sway-moderate {
    animation: sway-moderate 3s ease-in-out infinite;
    transform-origin: bottom center;
}

/* Hard Sway - Turbulent Times (chaos 60-80%) */
@keyframes sway-hard {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(4deg); }
    30% { transform: rotate(-3deg); }
    50% { transform: rotate(5deg); }
    70% { transform: rotate(-4deg); }
    90% { transform: rotate(3deg); }
}

.sway-hard {
    animation: sway-hard 2.5s ease-in-out infinite;
    transform-origin: bottom center;
}

/* Chaotic Sway - High Chaos (chaos > 80%) */
@keyframes sway-chaotic {
    0% { transform: rotate(0deg) scale(1); }
    5% { transform: rotate(2deg) scale(1.01); }
    10% { transform: rotate(-3deg) scale(0.99); }
    15% { transform: rotate(5deg) scale(1.02); }
    20% { transform: rotate(-2deg) scale(0.98); }
    25% { transform: rotate(4deg) scale(1.01); }
    30% { transform: rotate(-6deg) scale(0.99); }
    35% { transform: rotate(3deg) scale(1); }
    40% { transform: rotate(-4deg) scale(1.01); }
    50% { transform: rotate(6deg) scale(1.02); }
    60% { transform: rotate(-5deg) scale(0.99); }
    70% { transform: rotate(4deg) scale(1.01); }
    80% { transform: rotate(-3deg) scale(0.98); }
    90% { transform: rotate(2deg) scale(1); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes tremor {
    0%, 100% { transform: translateX(0) translateY(0); }
    10% { transform: translateX(-1px) translateY(1px); }
    20% { transform: translateX(1px) translateY(-1px); }
    30% { transform: translateX(-1px) translateY(-1px); }
    40% { transform: translateX(1px) translateY(1px); }
    50% { transform: translateX(-1px) translateY(1px); }
    60% { transform: translateX(1px) translateY(-1px); }
    70% { transform: translateX(-1px) translateY(-1px); }
    80% { transform: translateX(1px) translateY(1px); }
    90% { transform: translateX(-1px) translateY(0); }
}

.sway-chaotic {
    animation: 
        sway-chaotic 2s ease-in-out infinite,
        tremor 0.3s linear infinite;
    transform-origin: bottom center;
}

/* ========================================
   GLOBAL CONSCIOUSNESS INDICATOR BADGE
   ======================================== */

.global-consciousness-badge {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 600;
    z-index: 1000;
    transition: all 0.5s ease;
    cursor: help;
}

.global-consciousness-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.consciousness-emoji {
    font-size: 20px;
}

.consciousness-label {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Badge color states */
.state-green {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.8), rgba(56, 142, 60, 0.9));
    border: 2px solid #4caf50;
}

.state-yellow {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.8), rgba(251, 192, 45, 0.9));
    border: 2px solid #ffc107;
}

.state-orange {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.8), rgba(245, 124, 0, 0.9));
    border: 2px solid #ff9800;
}

.state-red {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.8), rgba(211, 47, 47, 0.9));
    border: 2px solid #f44336;
    animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3); 
    }
    50% { 
        box-shadow: 0 4px 25px rgba(244, 67, 54, 0.7); 
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .global-consciousness-badge {
        top: 10px;
        right: 10px;
        padding: 8px 15px;
        font-size: 12px;
    }
    
    .consciousness-emoji {
        font-size: 16px;
    }
}

/* ========================================
   ENERGY PARTICLES CHAOS RESPONSE
   ======================================== */

.energy-particle,
.cosmic-particle {
    transition: 
        background 3s ease-in-out,
        box-shadow 3s ease-in-out,
        animation-duration 3s ease-in-out;
}

/* ========================================
   BACKGROUND GRADIENT TRANSITIONS
   ======================================== */

body {
    transition: background 15s ease-in-out;
    will-change: background;
}

/* ========================================
   GLOW EFFECTS FOR HIGH CHAOS
   ======================================== */

.chaos-glow {
    animation: chaos-glow-pulse 1s ease-in-out infinite;
}

@keyframes chaos-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.9));
    }
}

/* ========================================
   PEACEFUL SERENITY GLOW
   ======================================== */

.peaceful-glow {
    animation: peaceful-glow-pulse 4s ease-in-out infinite;
}

@keyframes peaceful-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(144, 238, 144, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(144, 238, 144, 0.6));
    }
}