/**
 * Frontend Styles - Herzstück Animated Text Block
 */

.herzstueck-animated-text-block {
    margin: 0;
    padding: 0;
}

.herzstueck-animated-text-wrapper {
    display: inline-block;
    position: relative;
    line-height: 1.2;
}

.herzstueck-static-text {
    display: inline;
}

.herzstueck-end-text {
    display: inline;
    margin-left: 0.25em;
}

.herzstueck-animated-text-container {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
}

.herzstueck-animated-text {
    display: inline-block;
    position: relative;
    color: inherit;
}

/* Becklyn-Style Animations */
.herzstueck-text-slide-out {
    animation: herztueckSlideOutUp 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.herzstueck-text-slide-in {
    animation: herztueckSlideInUp 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes herztueckSlideOutUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes herztueckSlideInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Cursor Animation */
.herzstueck-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: currentColor;
    margin-left: 5px;
    animation: herztueckBlink 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes herztueckBlink {
    0%, 50% { 
        opacity: 1; 
    }
    51%, 100% { 
        opacity: 0; 
    }
}

/* Responsive */
@media (max-width: 768px) {
    .herzstueck-animated-text-wrapper {
        display: block;
    }
}

/* Zweite Zeile */
.herzstueck-animated-line-2 {
    margin-top: 0;
}

.herzstueck-line-2-wrapper {
    display: block;
}