/* animations.css - Animation styles for Racing Destiny */

/* Racing Lights Animation */
@keyframes lightUp {
    0% { background-color: #333; }
    10% { background-color: var(--racing-red); }
    100% { background-color: var(--racing-red); }
}

.racing-lights.start .light:nth-child(1) {
    animation: lightUp 0.5s forwards;
}

.racing-lights.start .light:nth-child(2) {
    animation: lightUp 0.5s forwards;
    animation-delay: 0.5s;
}

.racing-lights.start .light:nth-child(3) {
    animation: lightUp 0.5s forwards;
    animation-delay: 1s;
}

.racing-lights.start .light:nth-child(4) {
    animation: lightUp 0.5s forwards;
    animation-delay: 1.5s;
}

.racing-lights.start .light:nth-child(5) {
    animation: lightUp 0.5s forwards;
    animation-delay: 2s;
}

/* Rev Counter Animation */
@keyframes revUp {
    0% { transform: translateX(-50%) rotate(-90deg); }
    100% { transform: translateX(-50%) rotate(90deg); }
}

.rev-counter.revving .rev-needle {
    animation: revUp 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Car Selection Highlight */
.driver-option.selected {
    border-color: var(--racing-red);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    transform: translateY(-5px);
}

/* Circuit Selection Highlight */
.circuit-option.selected {
    border-color: var(--racing-green);
    box-shadow: 0 0 20px rgba(0, 204, 102, 0.4);
    transform: translateY(-5px);
}

/* Race Animation */
@keyframes carVibration {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-1px); }
    75% { transform: translateY(1px); }
}

.player-car {
    animation: carVibration 0.1s infinite;
}

/* Overtaking Animation */
@keyframes overtake {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(20px) translateY(-5px); }
    50% { transform: translateX(40px) translateY(0); }
    75% { transform: translateX(60px) translateY(5px); }
    100% { transform: translateX(80px) translateY(0); }
}

.player-car.overtaking {
    animation: overtake 1s forwards;
}

/* Final Race Animation */
@keyframes accelerateToFinish {
    0% { transform: translateX(0) scale(1); }
    100% { transform: translateX(100px) scale(1.1); }
}

.final-race-sequence .player-car {
    animation: 
        carVibration 0.1s infinite,
        accelerateToFinish 5s forwards;
    animation-delay: 0s, 5s;
}

/* Championship Transition Animations */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.final-race-sequence.complete {
    animation: fadeOut 1s forwards;
}

.victory-sequence {
    opacity: 0;
}

.victory-sequence.active {
    display: flex;
    animation: fadeIn 1s forwards;
}

.podium-sequence {
    opacity: 0;
}

.podium-sequence.active {
    display: flex;
    animation: fadeIn 1s forwards;
}

/* Confetti Animation */
@keyframes confettiFall {
    0% { background-position: 0px 0px; }
    100% { background-position: 500px 500px; }
}

.confetti {
    animation: confettiFall 10s linear infinite;
}

/* Birthday Reveal Animations */
@keyframes systemGlitch {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
    25%, 75% { color: cyan; text-shadow: 2px 2px red; }
}

.system-message {
    animation: systemGlitch 0.3s infinite;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

.message-container p {
    overflow: hidden;
    white-space: pre-wrap;
    border-right: 2px solid var(--racing-red);
    animation: 
        typewriter 4s steps(60, end) forwards,
        blinkCursor 0.8s infinite;
}

@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--racing-red); }
}

/* Reveal Background Animation */
@keyframes bgShift {
    0% { 
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }
    50% { 
        background-position: 100% 100%;
        filter: hue-rotate(180deg);
    }
    100% { 
        background-position: 0% 0%;
        filter: hue-rotate(360deg);
    }
}

#birthday-reveal {
    background: radial-gradient(circle, rgba(30,30,30,1) 0%, rgba(10,10,10,1) 100%);
    background-size: 200% 200%;
}

#birthday-reveal.revealing {
    animation: bgShift 15s infinite linear;
}

/* Loading Progress Animation */
@keyframes progressFill {
    0% { width: 0%; }
    20% { width: 20%; }
    40% { width: 40%; }
    60% { width: 70%; }
    80% { width: 90%; }
    100% { width: 100%; }
}

.loading-progress.active {
    animation: progressFill 3s forwards;
}

/* Section Transition Animations */
.game-section {
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.game-section.active {
    transform: translateY(0);
    opacity: 1;
}

/* Button Click Animation */
@keyframes buttonPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.game-button:active,
.select-button:active,
.decision-option:active,
.answer-button:active {
    animation: buttonPulse 0.3s ease;
}

/* Trophy Animation */
@keyframes trophyLift {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.trophy {
    animation: trophyLift 1s ease forwards;
}

/* Birthday Message Entrance Animation */
@keyframes messageEntrance {
    0% { transform: scale(0.8); opacity: 0; }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.birthday-message.active {
    display: block;
    animation: messageEntrance 1s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards;
}