/* Enhanced Sentiment Column Transitions
 * Smooth animations and visual effects for sentiment updates
 * Designed to work with the randomized transition system
 */

/* Base transition styles for sentiment tags */
.sentiment-tag {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: unset !important;
}

/* Transition pulse effect for active updates */
.sentiment-tag.transition-pulse {
    animation: sentimentPulse 0.8s ease-out;
}

@keyframes sentimentPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    25% {
        transform: scale(1.02);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Enhanced sentiment cell hover effects during transitions */
.sentiment-cell[data-transition-enabled="true"] .sentiment-tag:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-out;
}

/* DISABLED: Old gradient-based color transitions - conflicts with opacity-based system */
/*
.sentiment-score-0, .sentiment-score-5 {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, rgba(185, 28, 28, 0.4) 100%);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-10, .sentiment-score-15 {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.4) 0%, rgba(239, 68, 68, 0.4) 100%);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-20, .sentiment-score-25 {
    background: linear-gradient(135deg, rgba(252, 165, 165, 0.4) 0%, rgba(248, 113, 113, 0.4) 100%);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-30, .sentiment-score-35 {
    background: linear-gradient(135deg, rgba(254, 202, 202, 0.4) 0%, rgba(252, 165, 165, 0.4) 100%);
    color: #fecaca;
    border-color: rgba(254, 202, 202, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-40, .sentiment-score-45 {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.4) 0%, rgba(100, 116, 139, 0.4) 100%);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-50, .sentiment-score-55 {
    background: linear-gradient(135deg, rgba(171, 187, 210, 0.4) 0%, rgba(148, 163, 184, 0.4) 100%);
    color: #64748b;
    border-color: rgba(171, 187, 210, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-60, .sentiment-score-65 {
    background: linear-gradient(135deg, rgba(191, 205, 231, 0.4) 0%, rgba(171, 187, 210, 0.4) 100%);
    color: #475569;
    border-color: rgba(191, 205, 231, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-70, .sentiment-score-75 {
    background: linear-gradient(135deg, rgba(134, 239, 172, 0.4) 0%, rgba(74, 222, 128, 0.4) 100%);
    color: #16a34a;
    border-color: rgba(134, 239, 172, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-80, .sentiment-score-85 {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.4) 0%, rgba(34, 197, 94, 0.4) 100%);
    color: #15803d;
    border-color: rgba(74, 222, 128, 0.5);
    transition: all 0.6s ease-in-out;
}

.sentiment-score-90, .sentiment-score-95 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(16, 185, 129, 0.4) 100%);
    color: #059669;
    border-color: rgba(34, 197, 94, 0.5);
    transition: all 0.6s ease-in-out;
    animation: highSentimentGlow 3s ease-in-out infinite;
}
*/

/* Special animation for very high sentiment scores */
@keyframes highSentimentGlow {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5), 0 0 12px rgba(16, 185, 129, 0.2);
    }
}

/* Transition states for smooth updates */
.sentiment-tag.updating {
    opacity: 0.8;
    transform: scale(0.98);
    transition: all 0.4s ease-out;
}

.sentiment-tag.updating-complete {
    opacity: 1;
    transform: scale(1.02);
    transition: all 0.4s ease-in;
}

/* Loading shimmer effect for pending transitions */
.sentiment-tag.transition-pending {
    background: linear-gradient(90deg, 
        rgba(229, 231, 235, 0.4) 25%, 
        rgba(243, 244, 246, 0.6) 50%, 
        rgba(229, 231, 235, 0.4) 75%);
    background-size: 200% 100%;
    animation: shimmerTransition 2s infinite;
    color: transparent;
}

.sentiment-tag.transition-pending .sentiment-label,
.sentiment-tag.transition-pending .sentiment-score {
    color: transparent;
    background: linear-gradient(90deg, 
        rgba(156, 163, 175, 0.8) 25%, 
        rgba(209, 213, 219, 0.9) 50%, 
        rgba(156, 163, 175, 0.8) 75%);
    background-size: 200% 100%;
    animation: shimmerTransition 2s infinite;
    background-clip: text;
    -webkit-background-clip: text;
}

@keyframes shimmerTransition {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Smooth morphing between sentiment levels */
.sentiment-tag.morphing {
    transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s ease-out;
}

/* Enhanced focus states for accessibility */
.sentiment-cell:focus-within .sentiment-tag {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
    transition: outline 0.2s ease-out;
}

/* Progress indicator for transition cycles */
.sentiment-transition-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(59, 130, 246, 0.8) 0%, 
        rgba(16, 185, 129, 0.8) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
    z-index: 9999;
}

.sentiment-transition-progress.active {
    animation: transitionProgress 9.5s linear;
}

@keyframes transitionProgress {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* Staggered animation delays for natural feeling updates */
.sentiment-cell:nth-child(1) .sentiment-tag { animation-delay: 0s; }
.sentiment-cell:nth-child(2) .sentiment-tag { animation-delay: 0.1s; }
.sentiment-cell:nth-child(3) .sentiment-tag { animation-delay: 0.2s; }
.sentiment-cell:nth-child(4) .sentiment-tag { animation-delay: 0.3s; }
.sentiment-cell:nth-child(5) .sentiment-tag { animation-delay: 0.4s; }
.sentiment-cell:nth-child(6) .sentiment-tag { animation-delay: 0.5s; }
.sentiment-cell:nth-child(7) .sentiment-tag { animation-delay: 0.6s; }
.sentiment-cell:nth-child(8) .sentiment-tag { animation-delay: 0.7s; }
.sentiment-cell:nth-child(9) .sentiment-tag { animation-delay: 0.8s; }
.sentiment-cell:nth-child(10) .sentiment-tag { animation-delay: 0.9s; }

/* Success state for completed transitions */
.sentiment-tag.transition-success {
    animation: transitionSuccess 1s ease-out;
}

@keyframes transitionSuccess {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.03);
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Error state for failed transitions */
.sentiment-tag.transition-error {
    animation: transitionError 1s ease-out;
}

@keyframes transitionError {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.98);
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(0.96);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .sentiment-tag,
    .sentiment-tag.transition-pulse,
    .sentiment-tag.updating,
    .sentiment-tag.updating-complete,
    .sentiment-tag.morphing {
        animation: none !important;
        transition: none !important;
    }
    
    .sentiment-transition-progress {
        display: none;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .sentiment-tag {
        border-width: 2px;
        font-weight: 700;
    }
    
    /* DISABLED: High contrast overrides - conflicts with opacity-based system */
    /*
    .sentiment-score-0, .sentiment-score-5,
    .sentiment-score-10, .sentiment-score-15,
    .sentiment-score-20, .sentiment-score-25,
    .sentiment-score-30, .sentiment-score-35 {
        background: rgba(239, 68, 68, 0.8) !important;
        color: white !important;
        border-color: #dc2626 !important;
    }
    
    .sentiment-score-60, .sentiment-score-65 {
        background: rgba(100, 116, 139, 0.8) !important;
        color: white !important;
        border-color: #475569 !important;
    }
    
    .sentiment-score-70, .sentiment-score-75,
    .sentiment-score-80, .sentiment-score-85,
    .sentiment-score-90, .sentiment-score-95 {
        background: rgba(34, 197, 94, 0.8) !important;
        color: white !important;
        border-color: #059669 !important;
    }
    */
}

/* Dark theme enhancements */
@media (prefers-color-scheme: dark) {
    .sentiment-tag.transition-pulse {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }
    
    .sentiment-transition-progress {
        background: linear-gradient(90deg, 
            rgba(99, 102, 241, 0.9) 0%, 
            rgba(34, 197, 94, 0.9) 100%);
    }
    
    .sentiment-tag.transition-pending .sentiment-label,
    .sentiment-tag.transition-pending .sentiment-score {
        background: linear-gradient(90deg, 
            rgba(75, 85, 99, 0.8) 25%, 
            rgba(156, 163, 175, 0.9) 50%, 
            rgba(75, 85, 99, 0.8) 75%);
    }
}

/* Mobile optimizations for transitions */
@media (max-width: 768px) {
    .sentiment-tag.transition-pulse {
        animation-duration: 0.6s; /* Faster on mobile */
    }
    
    .sentiment-tag:hover {
        transform: none; /* Disable hover on mobile */
    }
    
    .sentiment-transition-progress {
        height: 3px; /* Thicker progress bar on mobile */
    }
}

/* Print styles - disable animations for print */
@media print {
    .sentiment-tag,
    .sentiment-tag.transition-pulse,
    .sentiment-transition-progress {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Loading state for entire sentiment column during initialization */
.sentiment-column-loading .sentiment-tag {
    background: linear-gradient(90deg, 
        rgba(229, 231, 235, 0.4) 25%, 
        rgba(243, 244, 246, 0.6) 50%, 
        rgba(229, 231, 235, 0.4) 75%) !important;
    background-size: 200% 100%;
    animation: shimmerTransition 1.5s infinite;
    color: transparent !important;
}

/* Transition coordination between sentiment and other columns */
.crypto-table-row.updating .sentiment-tag,
.crypto-table-row.updating .price-cell,
.crypto-table-row.updating .volatility-tag {
    animation: coordinatedUpdate 0.8s ease-out;
}

@keyframes coordinatedUpdate {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Performance optimizations */
.sentiment-tag {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Smooth scrolling considerations during transitions */
.sentiment-table-container.transitioning {
    scroll-behavior: smooth;
}

/* Enhanced accessibility for screen readers */
.sentiment-tag[aria-live="polite"] {
    /* Screen reader announcements for sentiment changes */
}

.sentiment-transition-status {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Custom properties for theming */
:root {
    --sentiment-transition-duration: 0.8s;
    --sentiment-pulse-color: rgba(255, 255, 255, 0.4);
    --sentiment-success-color: rgba(34, 197, 94, 0.3);
    --sentiment-error-color: rgba(239, 68, 68, 0.4);
    --sentiment-progress-gradient: linear-gradient(90deg, rgba(59, 130, 246, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%);
}