/**
 * Animations CSS
 * Centralized scroll reveal and transition animations
 * @package StatusInTrade
 */

/* ==========================================================================
   Base Reveal Animations
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Directional Reveals
   ========================================================================== */

/* Reveal from Left */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* Reveal from Right */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Scale & Blur Reveals
   ========================================================================== */

/* Scale Reveal */
.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Blur Reveal */
.reveal-blur {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-blur.active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Rotate Reveal */
.reveal-rotate {
    opacity: 0;
    transform: scale(0.9) rotate(-3deg);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-rotate.active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ==========================================================================
   Fade Reveal (for headers)
   ========================================================================== */

.reveal-fade {
    opacity: 0;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-fade.active {
    opacity: 1;
}

/* ==========================================================================
   Catalog/Products Animations
   ========================================================================== */

/* Header Text Animations */
.header-badge {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    animation: badgeBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-play-state: paused;
}

.header-badge.visible {
    animation-play-state: running;
}

.header-title {
    opacity: 0;
    transform: translateX(-30px);
    animation: titleSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    animation-play-state: paused;
}

.header-title.visible {
    animation-play-state: running;
}

.header-description {
    opacity: 0;
    transform: translateX(30px);
    animation: descSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.5s;
    animation-play-state: paused;
}

.header-description.visible {
    animation-play-state: running;
}

/* Product Card Animation */
.product-card {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: cardWaveIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-play-state: paused;
}

.product-card.visible {
    animation-play-state: running;
}

/* ==========================================================================
   Portfolio/Bento Grid Animations
   ========================================================================== */

/* Bento Card Mosaic Animation */
.bento-card {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
    filter: blur(4px);
    animation: mosaicBuild 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.bento-featured.bento-card {
    transform: scale(0.7) rotate(8deg);
    animation: mosaicBuildFeatured 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.bento-medium.bento-card {
    transform: scale(0.85) rotate(3deg);
}

.bento-card:nth-child(odd) {
    transform: scale(0.8) rotate(5deg);
}

.bento-card:nth-child(even) {
    transform: scale(0.8) rotate(-5deg);
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes badgeBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    60% {
        transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes titleSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes descSlideIn {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardWaveIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    60% {
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mosaicBuild {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(var(--rotate-start, -5deg));
        filter: blur(4px);
    }
    60% {
        transform: scale(1.05) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

@keyframes mosaicBuildFeatured {
    0% {
        opacity: 0;
        transform: scale(0.7) rotate(8deg);
        filter: blur(6px);
    }
    50% {
        transform: scale(1.08) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

/* ==========================================================================
   Floating Decorative Elements
   ========================================================================== */

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-20px) translateX(10px);
    }
}

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
    animation-delay: 1s;
}

/* ==========================================================================
   Delay Classes (for stagger effects)
   ========================================================================== */

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Smooth scrollbar hide */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}