/* Text Animation Styles */

/* Load Google Fonts for our different text styles */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&family=Monsieur+La+Doulaise&display=swap');

/* Base typewriter class */
.typewriter {
    display: inline-block;
    /* Remove overflow hidden that's cutting off text */
    overflow: visible;
    white-space: nowrap;
    /* Ensure container is visible */
    opacity: 1;
    /* Standard spacing between most spans */
    word-spacing: 0.3em;
    /* Make sure container expands to fit content */
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* Base styles for different text types */
.text-normal {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
}

.text-code {
    font-family: 'Source Code Pro', monospace;
    font-weight: 500;
    letter-spacing: -0.5px;
    word-spacing: -3px; /* Reduce space between words in the software engineering text */
}

.text-handwriting {
    font-family: 'Monsieur La Doulaise', cursive;
    font-weight: normal;
    font-size: 2.6em;
    /* No special positioning */
    position: relative;
}

/* Base typewriter styles */
.typewriter span {
    display: inline-block;
    position: relative;
}

/* Styling for the typewriter text span */
#typewriter-text {
    display: inline-block;
}

/* Define a special animation for the handwriting text - no bounce */
@keyframes designFadeIn {
    0% {
        opacity: 0;
        transform: scale(2.5) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Initial state for handwriting text */
.typewriter .text-handwriting {
    transform-origin: left center;
    will-change: transform, opacity;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .typewriter {
        white-space: normal;
        text-align: center;
        font-size: 0.9em;
        padding: 0 15px;
        overflow-wrap: break-word;
    }
    
    .typewriter span {
        /* For mobile, wrap text better */
        white-space: normal;
        display: inline;
    }
    
    /* Adjust animation for smaller screens - no bounce */
    @keyframes designFadeIn {
        0% {
            opacity: 0;
            transform: scale(2.0) translateY(5px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
}

@media (max-width: 480px) {
    .typewriter {
        font-size: 0.8em;
        line-height: 1.6;
    }
    
    .text-handwriting {
        font-size: 2em;
        /* No top adjustment for mobile */
    }
}