/* --- HEADLINE ANIMATION STYLES --- */
.headline-flipper {
    height: 1.5rem; /* Adjust height to fit the headline font size */
    perspective: 800px;
    position: relative;
    margin-bottom: 0.5rem; /* Space between headline and subtitle */
}

.headline-face {
    /* Base styles from your original .main-headline-text class */
    font-size: 1.4rem;
    font-weight: 700;
    color: #a0a0a0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    white-space: nowrap;
    -webkit-text-stroke: 0px black;
    paint-order: stroke fill;
    text-transform: uppercase;
    letter-spacing: 0em;
    
    /* Animation properties */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transform-origin: center center;
    animation: roll-headline 12s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

/* Position the second face rotated up, ready to be revealed */
#main-headline-face2 {
    transform: rotateX(90deg);
    animation-delay: 6s; /* Start this face's animation halfway through */
}

@keyframes roll-headline {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    45% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    50% {
        transform: rotateX(-90deg);
        opacity: 0;
    }
    /* This pause is important for the second face's animation to take over */
    51% {
        transform: rotateX(-90deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(-90deg);
        opacity: 0;
    }
}

/* Adjust font size on mobile for the animated headline */
@media (max-width: 768px) {
    .headline-face {
        font-size: 0.90rem;
        white-space: normal;
    }
    .headline-flipper {
        height: 2.2rem; /* Taller height on mobile to accommodate wrapped text */
    }
}