.animated-title-wrapper-84bcf7f2 {
    position: relative;
    display: inline-block;
    text-align: center;
}

.animated-title-old-84bcf7f2 {
    position: relative;
    display: inline-block;
}

.animated-title-old-84bcf7f2::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 3px;
    background-color: currentColor;
    animation: strike-through-84bcf7f2 1s ease forwards;
    transform: translateY(-50%);
}

.animated-title-new-84bcf7f2 {
    position: absolute;
    left: 50%;
    top: 50%;
    white-space: nowrap;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 10px;
    border-radius: 4px;
    /* Default variables for rotation, overridden via inline style */
    --at-rotation: -10deg;
}

/* Base states for different animation types to prevent initial display */
.animated-title-new-84bcf7f2.anim-type-pop-up {
    transform: translate(-50%, -50%) rotate(var(--at-rotation)) scale(0);
    animation: pop-up-84bcf7f2 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animated-title-new-84bcf7f2.anim-type-fade-in {
    transform: translate(-50%, -50%) rotate(var(--at-rotation));
    animation: fade-in-84bcf7f2 0.8s ease forwards;
}

.animated-title-new-84bcf7f2.anim-type-slide-up {
    transform: translate(-50%, -10%) rotate(var(--at-rotation));
    animation: slide-up-84bcf7f2 0.8s ease-out forwards;
}

/* Typing Animation */
.animated-title-new-84bcf7f2.anim-type-typing {
    transform: translate(-50%, -50%) rotate(var(--at-rotation));
    opacity: 1; /* Wrapper needs to be visible immediately when delay ends */
    visibility: hidden;
    animation: show-wrapper-84bcf7f2 0.1s linear forwards;
}

.animated-title-new-84bcf7f2.anim-type-typing .animated-title-new-inner-84bcf7f2 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    border-right: 2px solid currentColor;
    /* Delay is applied to wrapper, so this animation runs after wrapper becomes visible */
    animation: typing-84bcf7f2 1.5s steps(20, end) forwards, blink-caret-84bcf7f2 0.75s step-end infinite;
    /* We inherit the delay from the wrapper in JS/PHP or just use a fixed secondary delay */
    /* Since we can't easily inherit, we use a CSS trick: start animation paused, wrapper unpauses it, but pure CSS means we just stack delays. We'll use the same delay as the wrapper for simplicity */
    animation-delay: inherit;
}

/* Handwriting Animation */
.animated-title-new-84bcf7f2.anim-type-handwriting {
    transform: translate(-50%, -50%) rotate(var(--at-rotation));
    opacity: 0;
    animation: handwriting-fade-84bcf7f2 1s ease forwards;
    filter: blur(4px);
}

@keyframes strike-through-84bcf7f2 {
    0% { width: 0; }
    50% { width: 100%; opacity: 1; }
    100% { width: 100%; }
}

@keyframes pop-up-84bcf7f2 {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--at-rotation)) scale(0); }
    50% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--at-rotation)) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--at-rotation)) scale(1); }
}

@keyframes fade-in-84bcf7f2 {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes slide-up-84bcf7f2 {
    0% { opacity: 0; transform: translate(-50%, -10%) rotate(var(--at-rotation)); }
    50% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--at-rotation)); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--at-rotation)); }
}

@keyframes show-wrapper-84bcf7f2 {
    to { visibility: visible; }
}

@keyframes typing-84bcf7f2 {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret-84bcf7f2 {
    from, to { border-color: transparent; }
    50% { border-color: currentColor; }
}

@keyframes handwriting-fade-84bcf7f2 {
    0% { opacity: 0; filter: blur(4px); transform: translate(-50%, -50%) rotate(var(--at-rotation)) scale(0.95); }
    100% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) rotate(var(--at-rotation)) scale(1); }
}