/* Element Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Hide elements during slide transition (before active class is added) 
   This prevents the "see info then animate" issue. 
*/
.story-slide.slide-enter-next .big-emoji,
.story-slide.slide-enter-next .slide-title,
.story-slide.slide-enter-next .slide-title-big,
.story-slide.slide-enter-next .stat-box,
.story-slide.slide-enter-next .token-list,
.story-slide.slide-enter-next .token-image-large,
.story-slide.slide-enter-next .description,
.story-slide.slide-enter-next .summary-grid,
.story-slide.slide-enter-next .nav-btn-text,
.story-slide.slide-enter-prev .big-emoji,
.story-slide.slide-enter-prev .slide-title,
.story-slide.slide-enter-prev .slide-title-big,
.story-slide.slide-enter-prev .stat-box,
.story-slide.slide-enter-prev .token-list,
.story-slide.slide-enter-prev .token-image-large,
.story-slide.slide-enter-prev .description,
.story-slide.slide-enter-prev .summary-grid,
.story-slide.slide-enter-prev .nav-btn-text {
    opacity: 0;
}

/* Staggered Animations - Start immediately when active class is applied */
.story-slide.active .big-emoji {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s backwards, float 6s infinite ease-in-out 0.5s;
}

.story-slide.active .slide-title, 
.story-slide.active .slide-title-big {
    animation: fadeInUp 0.5s ease-out 0.1s backwards;
}

.story-slide.active .stat-box,
.story-slide.active .token-list {
    animation: fadeInUp 0.5s ease-out 0.2s backwards;
}

.story-slide.active .token-image-large {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards, pulse-glow 3s infinite 0.6s;
}

.story-slide.active .description {
    animation: fadeInUp 0.5s ease-out 0.3s backwards;
}

.story-slide.active .summary-grid {
    animation: fadeInUp 0.5s ease-out 0.2s backwards;
}

.story-slide.active .nav-btn-text {
    animation: fadeInUp 0.5s ease-out 0.4s backwards;
}

/* Negative Profit Styling */
.negative-profit {
    color: #ff4b4b !important;
    text-shadow: 0 2px 10px rgba(255, 75, 75, 0.3) !important;
}

.positive-profit {
    color: #1ed760 !important;
    text-shadow: 0 2px 10px rgba(30, 215, 96, 0.3) !important;
}