/*  Text track in */

.animate .tracking-in-expand {
    -webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}
@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}


/* Anfangszustand */
.hidden {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    visibility: hidden; /* verhindert, dass es klickbar ist */
}

/* Animation */
.animate .fade-in-up {
    animation: fadeInUp 0.9s ease-out both;
    -webkit-animation: fadeInUp 0.9s ease-out both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 120px, 0); /* Start weiter unten */
        visibility: hidden;
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
}

/*  Text track out */
.animate .tracking-out-contract {
    -webkit-animation: tracking-out-contract 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: tracking-out-contract 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes tracking-out-contract {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
}
@keyframes tracking-out-contract {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
}


.animate .fade-and-scale {
    animation: scale-in-ver-center-3 0.9s ease-out both;
    -webkit-animation: scale-in-ver-center-3 0.9s ease-out both;
}

/* Nur das Sichtbarwerden */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Dann die eigentliche Scale-Animation */
@keyframes scale-in-ver-center-3 {
    0%   {
        transform: scaleY(0.3);
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}


.animate .scale-in-ver-center {
    -webkit-animation: scale-in-ver-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-ver-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.animate .scale-in-ver-center-2 {
    overflow: hidden;
    -webkit-animation: scale-in-ver-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-ver-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-ver-center {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}
@keyframes scale-in-ver-center {
    0% {
        -webkit-transform: scaleY(-0.5);
        transform: scaleY(-0.5);
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}

.magictime {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.swap {
    -webkit-animation: swap;
    animation: swap;
}
@-webkit-keyframes swap {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: scale(0, 0) translate(-700px, 0px);
        transform: scale(0, 0) translate(-700px, 0px);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px);
    }
}
@keyframes swap {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: scale(0, 0) translate(-700px, 0px);
        transform: scale(0, 0) translate(-700px, 0px);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px);
    }
}


.animate .text-focus-in {
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-3-31 19:57:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.animate .scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-4-3 0:53:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translate3d(-120px, 0, 0); /* Start weiter unten */
        visibility: hidden;
    }
    to {
        opacity: 1;
        transform: translate3d(120px, 0, 0);
        visibility: visible;
    }
}

.animate .fade-in-right {
    --webkit-animation: fade-in-right 1s ease-out forwards;
    animation: fade-in-right 1s ease-out forwards;
}

.zoom-in {
    opacity: 0;
    transform: scale(0.5);
}

.animate .zoom-in {
    --webkit-animation: zoom-in-2 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
    animation: zoom-in-2 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
}
@keyframes zoom-in-2 {
    0% {
        transform: scale(0);
        opacity: 0;
        visibility: hidden;
    }
    20% {
        transform: scale(0.2);
        opacity: 0.2;
        visibility: visible;
    }
    90% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
}