/* Opti Animations - Advanced Interactive Animations */

/* Loading Animation */
@keyframes optiLoadIn {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-10deg);
        filter: blur(10px);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1) rotate(5deg);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

/* Pulse Animation for Opti Brain */
@keyframes brainPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
    25% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.4));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(118, 75, 162, 0.4));
    }
    75% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.4));
    }
}

/* Enhanced Float Animation */
@keyframes enhancedFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    25% {
        transform: translateY(-15px) scale(1.01);
    }
    50% {
        transform: translateY(-25px) scale(1.02);
    }
    75% {
        transform: translateY(-15px) scale(1.01);
    }
}

/* Conversation Message Slide In */
@keyframes messageSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-30px) scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: translateX(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes messageSlideInRight {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: translateX(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Typing Animation Enhancement */
@keyframes typingDotEnhanced {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.6);
        background: rgba(255, 255, 255, 0.4);
    }
    30% {
        opacity: 1;
        transform: scale(1.3);
        background: rgba(255, 215, 0, 0.8);
    }
}

/* Flow Step Animations */
@keyframes flowStepEnter {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8) rotate(5deg);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-10px) scale(1.05) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* Processing Animation */
@keyframes processingThink {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1) rotate(-2deg);
        filter: brightness(1.1);
    }
    50% {
        transform: scale(1.2) rotate(0deg);
        filter: brightness(1.2);
    }
    75% {
        transform: scale(1.1) rotate(2deg);
        filter: brightness(1.1);
    }
}

/* Data Source Activation */
@keyframes sourceActivateEnhanced {
    0% {
        opacity: 0.3;
        transform: scale(0.7) translateY(20px);
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }
    30% {
        opacity: 0.6;
        transform: scale(0.9) translateY(10px);
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.2);
    }
    60% {
        opacity: 0.8;
        transform: scale(1.1) translateY(-5px);
        background: rgba(16, 185, 129, 0.15);
        border-color: rgba(16, 185, 129, 0.25);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.3);
    }
}

/* Hub Connection Lines */
@keyframes connectionPulse {
    0%, 100% {
        stroke: rgba(255, 215, 0, 0.3);
        stroke-width: 2;
    }
    50% {
        stroke: rgba(255, 215, 0, 0.6);
        stroke-width: 3;
    }
}

/* Satellite Orbit Animation */
@keyframes satelliteOrbit {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

/* Card Hover Glow */
@keyframes cardGlow {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 20px 40px rgba(255, 215, 0, 0.3);
    }
}

/* Timeline Item Reveal */
@keyframes timelineReveal {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: translateX(10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Architecture Layer Slide In */
@keyframes layerSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-100px) skewX(-5deg);
    }
    50% {
        opacity: 0.7;
        transform: translateX(10px) skewX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0deg);
    }
}

/* Status Item Check Animation */
@keyframes statusCheck {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }
    50% {
        opacity: 0.7;
        transform: translateX(5px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Interactive Hover Animations */
.opti-circle:hover .opti-brain {
    animation: brainPulse 1s ease-in-out;
}

.pathway-card:hover .pathway-icon {
    animation: enhancedFloat 2s ease-in-out infinite;
}

.category-card:hover .category-icon {
    animation: processingThink 0.8s ease-in-out;
}

.achievement-card:hover .achievement-metric {
    animation: brainPulse 0.6s ease-in-out;
}

.satellite:hover {
    animation: enhancedFloat 1.5s ease-in-out;
}

/* Scroll-triggered animations */
@keyframes scrollFadeUp {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Navigation Progress Animation */
@keyframes progressFill {
    0% {
        width: 0%;
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Opti Logo Animation */
@keyframes logoShine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.opti-logo {
    background-size: 200% auto;
    background-image: linear-gradient(135deg, #FFD700 0%, #D4A017 25%, #ffffff 50%, #D4A017 75%, #FFD700 100%);
    animation: logoShine 3s ease-in-out infinite;
}

/* Enhanced Message Animations */
.message {
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message.user {
    animation-name: messageSlideInRight;
}

.message.opti {
    animation-name: messageSlideIn;
}

/* Snapshot Demo Animations */
.demo-question .question-bubble {
    animation: optiLoadIn 1s ease-out;
}

.processing-visualization {
    animation: scrollFadeUp 0.8s ease-out 0.5s both;
}

.response-window {
    animation: scrollFadeUp 1s ease-out 1.2s both;
}

/* Enhanced Typing Indicator */
.typing-indicator.active .typing-dot {
    animation: typingDotEnhanced 1.5s ease-in-out infinite;
}

/* Interaction Trigger Animations */
.trait:hover {
    animation: cardGlow 0.6s ease-in-out;
}

.example-card:hover {
    animation: cardGlow 0.8s ease-in-out;
}

/* Staggered Animation Classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }

/* Enhanced Connection Lines */
.connection-line {
    animation: connectionPulse 2s ease-in-out infinite;
}

/* Smooth Reveal Animations */
@keyframes smoothReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Apply smooth reveal to major sections */
.section > .container {
    animation: smoothReveal 1s ease-out;
}

/* Interactive Progress Bar */
.nav-progress-bar {
    animation: progressFill 0.5s ease-out;
    background: linear-gradient(90deg, #FFD700 0%, #D4A017 50%, #10b981 100%);
    background-size: 200% 100%;
    animation: logoShine 2s linear infinite;
}

/* Button Hover Animations */
.nav-link:hover {
    animation: smoothReveal 0.3s ease-out;
}

/* Mobile-specific animations */
@media (max-width: 768px) {
    .animate-fade-up,
    .animate-float {
        animation-duration: 0.6s;
    }
    
    .delay-200 { animation-delay: 0.1s; }
    .delay-300 { animation-delay: 0.15s; }
    .delay-400 { animation-delay: 0.2s; }
    .delay-600 { animation-delay: 0.3s; }
    .delay-800 { animation-delay: 0.4s; }
    .delay-900 { animation-delay: 0.45s; }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-float,
    .opti-pulse,
    .typing-dot {
        animation: none;
    }
}

/* Performance optimizations */
.animate-fade-up,
.animate-float,
.message,
.flow-step,
.timeline-item,
.architecture-layer {
    will-change: transform, opacity;
}

.opti-brain,
.processing-brain,
.pathway-icon,
.category-icon {
    will-change: transform, filter;
}