/* 80s Style Animations */

/* Word drop and bounce animation - v2.0.0 - Extreme realistic physics */
@keyframes dropAndBounce {
    0% {
        transform: translateY(-150vh) translateX(0) rotate(0deg);
        opacity: 1;
    }
    /* First drop to floor - gravity acceleration */
    30% {
        transform: translateY(0) translateX(0) rotate(3deg);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    /* First bounce up - EXTREME */
    45% {
        transform: translateY(-25vh) translateX(0) rotate(-2deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    /* Second hit floor */
    55% {
        transform: translateY(0) translateX(0) rotate(2deg);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    /* Second bounce - still big */
    65% {
        transform: translateY(-12vh) translateX(0) rotate(-1deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    /* Third hit floor */
    72% {
        transform: translateY(0) translateX(0) rotate(1deg);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    /* Third bounce */
    78% {
        transform: translateY(-5vh) translateX(0) rotate(-0.5deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    /* Fourth hit */
    83% {
        transform: translateY(0) translateX(0) rotate(0.3deg);
    }
    /* Small bounce */
    87% {
        transform: translateY(-1.5vh) translateX(0) rotate(0deg);
    }
    /* Final settle */
    92%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* Randomized bounce variations */
@keyframes dropAndBounceAlt1 {
    0% {
        transform: translateY(-150vh) translateX(0) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: translateY(0) translateX(0) rotate(-3deg);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    45% {
        transform: translateY(-28vh) translateX(0) rotate(2.5deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    55% {
        transform: translateY(0) translateX(0) rotate(-2deg);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    65% {
        transform: translateY(-14vh) translateX(0) rotate(1.5deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    72% {
        transform: translateY(0) translateX(0) rotate(-1deg);
    }
    78% {
        transform: translateY(-6vh) translateX(0) rotate(0.5deg);
    }
    83% {
        transform: translateY(0) translateX(0) rotate(-0.3deg);
    }
    87% {
        transform: translateY(-2vh) translateX(0) rotate(0deg);
    }
    92%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes dropAndBounceAlt2 {
    0% {
        transform: translateY(-150vh) translateX(0) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: translateY(0) translateX(0) rotate(4deg);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    45% {
        transform: translateY(-22vh) translateX(0) rotate(-3deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    55% {
        transform: translateY(0) translateX(0) rotate(2.5deg);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    65% {
        transform: translateY(-10vh) translateX(0) rotate(-1.5deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    72% {
        transform: translateY(0) translateX(0) rotate(1.2deg);
    }
    78% {
        transform: translateY(-4vh) translateX(0) rotate(-0.7deg);
    }
    83% {
        transform: translateY(0) translateX(0) rotate(0.4deg);
    }
    87% {
        transform: translateY(-1vh) translateX(0) rotate(0deg);
    }
    92%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* Fly-in animation - Title enters from left (v1 - deprecated) */
@keyframes flyInFromLeft {
    0% {
        transform: translateX(-200vw);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Pulse animation - Neon sign strobe effect */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 20px rgba(255, 16, 240, 0.8));
        text-shadow: 
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #FF10F0,
            0 0 55px #FF10F0,
            0 0 70px #FF10F0,
            0 0 100px #FF10F0,
            0 0 150px #FF10F0;
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.4) drop-shadow(0 0 40px rgba(255, 16, 240, 1));
        text-shadow: 
            0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #fff,
            0 0 50px #FF10F0,
            0 0 70px #FF10F0,
            0 0 90px #FF10F0,
            0 0 120px #FF10F0,
            0 0 200px #FF10F0,
            0 0 250px #FF10F0;
    }
}

/* Special character sequential reveal animation */
@keyframes specialCharReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.special-char {
    display: inline-block;
    opacity: 0;
}


/* Fade-in animation for secondary message */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Word-by-word fade-in for secondary message */
@keyframes fadeInWord {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation classes to be applied via JavaScript */
.animate-fly-in {
    animation: flyInFromLeft 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.animate-fade-in {
    animation: fadeIn 1s ease-in forwards;
}

/* Performance optimization - GPU acceleration */
.main-title {
    will-change: transform, opacity, filter;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.secondary-message {
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    /* Override all animations to instant states */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    @keyframes flyInFromLeft {
        0%, 100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            filter: brightness(1);
        }
    }
    
    @keyframes fadeIn {
        0%, 100% {
            opacity: 1;
        }
    }
    
    /* Ensure text is immediately visible */
    .main-title,
    .main-title .word,
    .secondary-message,
    .secondary-message .word {
        opacity: 1 !important;
        transform: translateY(0) translateX(0) rotate(0deg) !important;
        filter: none !important;
    }
    
    .secondary-message,
    .secondary-message .word {
        transform: translateY(0) !important;
    }
    
    .animate-fly-in,
    .animate-pulse,
    .animate-fade-in {
        animation: none !important;
    }
}