/**
 * Typewriter Effect - Frontend Styles
 */

/* Bazowe style naglowka z typewriter */
.typewriter-heading {
    display: inline-block;
    position: relative;
}

/* Tekst */
.typewriter-text {
    display: inline;
}

/* Kropka na koncu */
.typewriter-dot {
    display: inline;
    transition: opacity 0.3s ease;
}

/* Kursor */
.typewriter-cursor {
    display: inline-block;
    margin-left: 2px;
    font-weight: 100;
    animation: typewriter-blink 0.7s step-end infinite;
}

/* Animacja migania kursora */
@keyframes typewriter-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Stan podczas animacji */
.typewriter-animating .typewriter-cursor {
    animation: typewriter-blink 0.7s step-end infinite;
}

/* Stan po zakonczeniu animacji - kursor znika po chwili */
.typewriter-done .typewriter-cursor {
    animation: typewriter-blink 0.7s step-end 3, typewriter-fade 0.3s ease 2.1s forwards;
}

@keyframes typewriter-fade {
    to {
        opacity: 0;
    }
}

/* Responsywnosc */
@media (max-width: 768px) {
    .typewriter-heading {
        word-break: break-word;
    }
}

/* Accessibility - prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .typewriter-heading {
        /* Pokaz pelny tekst od razu */
    }
    
    .typewriter-cursor {
        animation: none;
        opacity: 0;
    }
    
    .typewriter-dot {
        opacity: 1 !important;
    }
}