/* css/hero-animations.css */

/* Animacja dla obrazka hero (postaci) */
@keyframes heroImageEntrance {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroImageFloat {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.hero-image-animated {
    animation: heroImageEntrance 1.2s ease-out forwards, heroImageFloat 4s ease-in-out infinite 1.2s;
    /* Opóźnienie float, aby najpierw zakończyła się animacja wejścia */
}

/* Animacje dla napisów */

/* Ogólna animacja wejścia dla tekstu (używana przez JS) */
@keyframes textFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nowa animacja dla pojedynczych słów, aby działała płynnie z translateY(100%) */
@keyframes wordSlideIn {
    0% {
        opacity: 0;
        transform: translateY(100%); /* Start od dołu */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Koniec w normalnej pozycji */
    }
}

/* Specyficzne dla linii tekstu (span.line-word) */
.hero-text-line {
    display: block; /* Upewnij się, że każda linia jest blokiem */
    overflow: hidden; /* Ukryj tekst poza obszarem do animacji */
}

.hero-text-line span.line-word {
    display: inline-block; /* Aby słowa mogły być animowane indywidualnie */
    opacity: 0; /* Zachowaj początkową przezroczystość 0 */
    animation: wordSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* Animacja będzie sterowana przez JS (animation-delay) */
}


/* Animacja dla przycisku CTA */
@keyframes buttonScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cta-button-animated {
    animation: buttonScaleIn 0.6s ease-out forwards;
}