/* Animated Text Widget Styles */

.animated-text-container {

    display: inline-flex;

    flex-wrap: wrap;

    align-items: center;

    line-height: 1.2;

    min-height: 1.2em;

    font-size: inherit;

    font-family: inherit;

    font-weight: inherit;

}



.animated-text-container .prefix-text,

.animated-text-container .suffix-text {

    display: inline-block;

}



.animated-text-container .animated-text-wrapper {

    position: relative;

    display: inline-block;

    min-width: 1px; /* Ensures wrapper is always visible */

    min-height: 1em;

    overflow: hidden;

}



.animated-text-container .animated-text {

    display: inline-block;

    white-space: nowrap;

}



/* Cursor Styles */

.animated-text-container .animated-cursor {

    display: inline-block;

    vertical-align: text-top;

    color: inherit;

    margin-left: -2px;

    font-weight: 100;

}



.animated-text-container .animated-cursor.blink {

    animation: cursor-blink 0.5s infinite;

}



/* Highlight Styles */

.animated-text-container .animated-text-wrapper.highlight-underline,

.animated-text-container .animated-text.highlight-underline {

    text-decoration: underline;

    text-decoration-thickness: 0.1em;

    text-underline-offset: 0.1em;

}



.animated-text-container .animated-text-wrapper.highlight-background,

.animated-text-container .animated-text.highlight-background {

    padding: 0.1em 0.2em;

    border-radius: 0.2em;

}



.animated-text-container .animated-text-wrapper.highlight-box,

.animated-text-container .animated-text.highlight-box {

    padding: 0.1em 0.2em;

    border-radius: 0.2em;

}



/* Animation: Typing */

@keyframes typing {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}



.animated-text-container .animate-typing {

    overflow: hidden;

    white-space: nowrap;

    display: inline-block;

    width: 0;

    animation: typing 1s steps(30, end) forwards;

}



/* Animation: Fade In */

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



.animated-text-container .animate-fade-in {

    opacity: 0;

    animation: fadeIn 0.8s ease forwards;

}



/* Animation: Slide Up */

@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animated-text-container .animate-slide-up {

    opacity: 0;

    transform: translateY(20px);

    animation: slideUp 0.8s ease forwards;

}



/* Animation: Zoom In */

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(0.8);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



.animated-text-container .animate-zoom-in {

    opacity: 0;

    transform: scale(0.8);

    animation: zoomIn 0.8s ease forwards;

}



/* Animation: Rotate In */

@keyframes rotateIn {

    from {

        opacity: 0;

        transform: rotateX(90deg);

        transform-origin: center bottom;

    }

    to {

        opacity: 1;

        transform: rotateX(0);

        transform-origin: center bottom;

    }

}



.animated-text-container .animate-rotate-in {

    opacity: 0;

    transform: rotateX(90deg);

    animation: rotateIn 0.8s ease forwards;

    transform-origin: center bottom;

    display: inline-block;

    backface-visibility: hidden;

    perspective: 1000px;

}



/* Cursor Blink Animation */

@keyframes cursor-blink {

    0%, 100% {

        opacity: 1;

    }

    50% {

        opacity: 0;

    }

}



/* Deletion Animation */

@keyframes deleting {

    from {

        width: 100%;

    }

    to {

        width: 0;

    }

}



.animated-text-container .animate-deleting {

    overflow: hidden;

    white-space: nowrap;

    display: inline-block;

    width: 100%;

    animation: deleting 1s steps(30, end) forwards;

}



/* Scramble Animation */

.animated-text-container .animate-scramble {

    display: inline-block;

}



/* Make sure the text doesn't break on small screens */

@media screen and (max-width: 767px) {

    .animated-text-container {

        width: 100%;

        justify-content: center;

    }

    

    .animated-text-container .animated-text {

        max-width: 100%;

    }

    

    .animated-text-container .animated-text-wrapper {

        max-width: 100%;

    }

}



/* Fix for Safari */

@supports (-webkit-overflow-scrolling: touch) {

    .animated-text-container .animated-text-wrapper {

        display: inline;

    }

    

    .animated-text-container .animated-cursor {

        vertical-align: middle;

    }

}



/* Fix for Firefox */

@-moz-document url-prefix() {

    .animated-text-container .animated-cursor {

        line-height: normal;

    }

}



/* Edge/IE fixes */

@supports (-ms-ime-align:auto) {

    .animated-text-container {

        display: inline;

    }

    

    .animated-text-container .animated-text-wrapper {

        display: inline;

    }

}