/* Fresh Hero Animations CSS */

.action-text {
    text-align: center;
    margin: 40px 0 20px 0;
    opacity: 1;
    transition: opacity 1s ease-out;
}

.action-text.fade-out {
    opacity: 0;
}

.action-line {
    font-family: 'Playfair Display', serif, cursive;
    font-size: 2.2rem;
    font-weight: bold;
    color: white;
    text-shadow: 
        2px 2px 0px rgba(255, 255, 255, 0.7),
        4px 4px 8px rgba(240, 240, 240, 0.5);
    letter-spacing: 1px;
    line-height: 1.2;
}

.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) scale(0.8) rotate(-5deg);
    margin: 0 8px;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.word.show {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}

.word:nth-child(even) {
    transform: translateY(20px) scale(0.8) rotate(5deg);
}

.word.show:nth-child(even) {
    transform: translateY(0) scale(1) rotate(0deg);
}

/* Badge Star Animation */
.badge-star {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0) rotate(0deg);
    transition: opacity 0.5s ease-in-out;
}

.badge-star.animate {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
    animation: starSpinOnly 3s linear infinite;
}

@keyframes starSpinOnly {
    0% { 
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
    33% { 
        transform: translateY(-50%) scale(1.3) rotate(240deg);
    }
    66% { 
        transform: translateY(-50%) scale(0.9) rotate(480deg);
    }
    100% { 
        transform: translateY(-50%) scale(1) rotate(720deg);
    }
}

/* Badge container needs relative positioning for absolute star */
.hero-badge {
    position: relative;
    padding-left: 24px;
}

/* AI Icon (remove this since we're not using it) */
.ai-icon {
    display: none;
}