/* Base styles for animated elements */
.chain-animated {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

.chain-animated.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Elementit, joiden animaatio on ohitettu näytön leveyden takia */
.chain-animated.animation-finished {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Animation definitions */
@keyframes fadeInFromDown {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInFromUp {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInAndSmallScaleUp {
    from {
        opacity: 0;
        transform: scale(1);
    }
    10%{
        opacity:1;
        transform:scale(1.01);
    }

    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Poistuvia animaatioita välilehtien vaihtoon */
@keyframes fadeOutToLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes fadeOutToUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Taustakuvan slide-animaatio alhaalta ylös */
@keyframes slideInFromBottom {
    from {
        top: 100%;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes slideOutToBottom {
    from {
        top: 0%;
        opacity: 1;
    }
    to {
        top: 100%;
        opacity: 0;
    }
}

/* Animation classes */
.ca-fadeInFromDown.is-visible {
    animation: fadeInFromDown var(--animation-duration) ease-out forwards;
}

.ca-fadeInFromUp.is-visible {
    animation: fadeInFromUp var(--animation-duration) ease-out forwards;
}

.ca-fadeInFromLeft.is-visible {
    animation: fadeInFromLeft var(--animation-duration) ease-out forwards;
}

.ca-fadeInFromRight.is-visible {
    animation: fadeInFromRight var(--animation-duration) ease-out forwards;
}

.ca-fadeIn.is-visible {
    animation: fadeIn var(--animation-duration) ease-out forwards;
}
.ca-fadeInAndSmallScaleUp.is-visible {
    animation: fadeInAndSmallScaleUp 10s ease-out forwards;
}
/* Poistuvien animaatioiden luokat */
.ca-fadeOutToLeft {
    animation: fadeOutToLeft var(--animation-duration, 0.4s) ease-out forwards;
}

.ca-fadeOutToUp {
    animation: fadeOutToUp var(--animation-duration, 0.4s) ease-out forwards;
}

.ca-fadeOut {
    animation: fadeOut var(--animation-duration, 0.4s) ease-out forwards;
}

/* Tab Slider animaatiot välilehtien vaihdolle */
.tab-slider .tab-exit .tab-link,
.tab-slider .tab-exit .tab-description {
    animation: fadeOutToLeft 0.4s ease-out forwards;
}

.tab-slider .tab-exit .tab-title {
    animation: fadeOutToUp 0.4s ease-out forwards;
}

.tab-slider .tab-exit .tab-background-overlay {
    animation: fadeOut 0.4s ease-out forwards;
}

.tab-slider .tab-enter .tab-background {
    animation: slideInFromBottom 0.6s ease-out forwards;
}