/* ===============================================
   Content Switcher Pro - Advanced Animations
   =============================================== */

/* Base Animation Settings */
.cs-content {
    transform-origin: center center;
}

/* ===============================================
   ANIMATION 1: Fade
   =============================================== */
.cs-animation-fade .cs-content {
    transition: opacity 0.5s ease-in-out;
}

.cs-animation-fade .cs-content:not(.active) {
    opacity: 0;
}

.cs-animation-fade .cs-content.active {
    opacity: 1;
}

/* ===============================================
   ANIMATION 2: Slide from Left
   =============================================== */
.cs-animation-slide-left .cs-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-slide-left .cs-content:not(.active) {
    transform: translateX(-50px);
    opacity: 0;
}

.cs-animation-slide-left .cs-content.active {
    transform: translateX(0);
    opacity: 1;
}

/* ===============================================
   ANIMATION 3: Slide from Right
   =============================================== */
.cs-animation-slide-right .cs-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-slide-right .cs-content:not(.active) {
    transform: translateX(50px);
    opacity: 0;
}

.cs-animation-slide-right .cs-content.active {
    transform: translateX(0);
    opacity: 1;
}

/* ===============================================
   ANIMATION 4: Slide from Bottom
   =============================================== */
.cs-animation-slide-up .cs-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-slide-up .cs-content:not(.active) {
    transform: translateY(50px);
    opacity: 0;
}

.cs-animation-slide-up .cs-content.active {
    transform: translateY(0);
    opacity: 1;
}

/* ===============================================
   ANIMATION 5: Slide from Top
   =============================================== */
.cs-animation-slide-down .cs-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-slide-down .cs-content:not(.active) {
    transform: translateY(-50px);
    opacity: 0;
}

.cs-animation-slide-down .cs-content.active {
    transform: translateY(0);
    opacity: 1;
}

/* ===============================================
   ANIMATION 6: Zoom In
   =============================================== */
.cs-animation-zoom-in .cs-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-zoom-in .cs-content:not(.active) {
    transform: scale(0.8);
    opacity: 0;
}

.cs-animation-zoom-in .cs-content.active {
    transform: scale(1);
    opacity: 1;
}

/* ===============================================
   ANIMATION 7: Zoom Out
   =============================================== */
.cs-animation-zoom-out .cs-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-zoom-out .cs-content:not(.active) {
    transform: scale(1.2);
    opacity: 0;
}

.cs-animation-zoom-out .cs-content.active {
    transform: scale(1);
    opacity: 1;
}

/* ===============================================
   ANIMATION 8: Flip Horizontal (3D)
   =============================================== */
.cs-animation-flip-horizontal {
    perspective: 1000px;
}

.cs-animation-flip-horizontal .cs-content {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}

.cs-animation-flip-horizontal .cs-content:not(.active) {
    transform: rotateY(90deg);
    opacity: 0;
}

.cs-animation-flip-horizontal .cs-content.active {
    transform: rotateY(0deg);
    opacity: 1;
}

/* ===============================================
   ANIMATION 9: Flip Vertical (3D)
   =============================================== */
.cs-animation-flip-vertical {
    perspective: 1000px;
}

.cs-animation-flip-vertical .cs-content {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}

.cs-animation-flip-vertical .cs-content:not(.active) {
    transform: rotateX(90deg);
    opacity: 0;
}

.cs-animation-flip-vertical .cs-content.active {
    transform: rotateX(0deg);
    opacity: 1;
}

/* ===============================================
   ANIMATION 10: Rotate
   =============================================== */
.cs-animation-rotate .cs-content {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-rotate .cs-content:not(.active) {
    transform: rotate(180deg) scale(0.8);
    opacity: 0;
}

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

/* ===============================================
   Advanced Animation Combinations
   =============================================== */

/* Bounce Effect */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.cs-animation-bounce .cs-content.active {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Elastic Effect */
@keyframes elasticIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    55% {
        opacity: 1;
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.cs-animation-elastic .cs-content.active {
    animation: elasticIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Blur Effect */
.cs-animation-blur .cs-content {
    transition: all 0.5s ease-in-out;
}

.cs-animation-blur .cs-content:not(.active) {
    opacity: 0;
    filter: blur(10px);
}

.cs-animation-blur .cs-content.active {
    opacity: 1;
    filter: blur(0);
}

/* Slide and Fade Combination */
.cs-animation-slide-fade-left .cs-content {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-animation-slide-fade-left .cs-content:not(.active) {
    transform: translateX(-100px);
    opacity: 0;
}

.cs-animation-slide-fade-left .cs-content.active {
    transform: translateX(0);
    opacity: 1;
}

/* Scale and Rotate Combination */
.cs-animation-scale-rotate .cs-content {
    transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cs-animation-scale-rotate .cs-content:not(.active) {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
}

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

/* ===============================================
   Loading Animation
   =============================================== */
@keyframes contentLoading {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

.cs-content.loading {
    animation: contentLoading 1.5s ease-in-out infinite;
}

/* ===============================================
   Reduced Motion Support (Accessibility)
   =============================================== */
@media (prefers-reduced-motion: reduce) {
    .cs-content,
    .cs-switcher-btn,
    .cs-toggle-slider,
    .cs-toggle-thumb,
    .cs-toggle-icon {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    
    .cs-content.active {
        animation: none !important;
    }
}

/* ===============================================
   Performance Optimization (only during transition)
   =============================================== */
.cs-content:not(.active) {
    pointer-events: none;
}

/* ===============================================
   Custom Duration Classes
   =============================================== */
.cs-duration-fast .cs-content {
    transition-duration: 0.3s !important;
}

.cs-duration-normal .cs-content {
    transition-duration: 0.5s !important;
}

.cs-duration-slow .cs-content {
    transition-duration: 0.8s !important;
}

.cs-duration-very-slow .cs-content {
    transition-duration: 1.2s !important;
}

/* ===============================================
   Entrance Animations (for first load)
   =============================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs-wrapper:not(.cs-loaded) .cs-content.active {
    animation: fadeInUp 0.6s ease-out;
}

.cs-wrapper.cs-loaded {
    /* Marker class added after first interaction */
}

/* ===============================================
   Smooth Height Transition
   =============================================== */
.cs-content-wrapper {
    transition: min-height 0.3s ease-in-out;
}

/* ===============================================
   3D Effects Enhancement
   =============================================== */
.cs-animation-flip-horizontal,
.cs-animation-flip-vertical {
    transform-style: preserve-3d;
}

.cs-animation-flip-horizontal .cs-content,
.cs-animation-flip-vertical .cs-content {
    transform-style: preserve-3d;
}

/* ===============================================
   Glow Effect for Active Content
   =============================================== */
.cs-content.active.glow-effect {
    box-shadow: 0 0 20px rgba(67, 160, 71, 0.3),
                0 5px 20px rgba(0, 0, 0, 0.1);
}

/* ===============================================
   Responsive Animation Adjustments
   =============================================== */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .cs-animation-flip-horizontal .cs-content:not(.active),
    .cs-animation-flip-vertical .cs-content:not(.active),
    .cs-animation-rotate .cs-content:not(.active) {
        transform: scale(0.95);
        opacity: 0;
    }
    
    .cs-animation-flip-horizontal .cs-content.active,
    .cs-animation-flip-vertical .cs-content.active,
    .cs-animation-rotate .cs-content.active {
        transform: scale(1);
        opacity: 1;
    }
}