style.css

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Bebas Neue', cursive;
    background: #000;
    overflow: hidden;
}

.cinematic-number {
    position: relative;
    font-size: 30vw;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(145deg, #8B0000, #B22222, #DC143C);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 
        0 0 30px rgba(220, 20, 60, 0.8),
        0 0 60px rgba(220, 20, 60, 0.6),
        0 0 90px rgba(220, 20, 60, 0.4),
        4px 4px 0px #000,
        8px 8px 15px rgba(0, 0, 0, 0.8);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.cinematic-number::before {
    content: attr(data-number);
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(139, 0, 0, 0.3);
    z-index: -1;
    transform: translateZ(-30px) scale(1.1);
    filter: blur(15px);
}

.cinematic-number::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background: radial-gradient(circle at center, rgba(220, 20, 60, 0.1) 0%, transparent 70%);
    z-index: -2;
    border-radius: 20%;
    animation: ambientGlow 3s ease-in-out infinite alternate;
}

@keyframes ambientGlow {
    0% { opacity: 0.3; transform: scale(0.95); }
    100% { opacity: 0.7; transform: scale(1.05); }
}

/* Animation Classes */
.zoom-in {
    animation: zoomIn 3s ease-out forwards;
}

@keyframes zoomIn {
    0% { 
        transform: scale(0.1) rotateX(90deg); 
        opacity: 0;
    }
    50% { 
        transform: scale(1.1) rotateX(0deg); 
        opacity: 1;
    }
    100% { 
        transform: scale(1) rotateX(0deg); 
        opacity: 1;
    }
}

.bounce-in {
    animation: bounceIn 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounceIn {
    0% { 
        transform: scale(0) translateY(100vh); 
        opacity: 0;
    }
    60% { 
        transform: scale(1.2) translateY(-20px); 
        opacity: 1;
    }
    80% { 
        transform: scale(0.95) translateY(10px); 
    }
    100% { 
        transform: scale(1) translateY(0); 
        opacity: 1;
    }
}

.smoke-reveal {
    animation: smokeReveal 4s ease-out forwards;
}

@keyframes smokeReveal {
    0% { 
        transform: scale(0.5) translateY(50px); 
        opacity: 0;
        filter: blur(20px);
    }
    30% { 
        transform: scale(1.1) translateY(-10px); 
        opacity: 0.5;
        filter: blur(10px);
    }
    60% { 
        transform: scale(0.95) translateY(5px); 
        opacity: 0.8;
        filter: blur(5px);
    }
    100% { 
        transform: scale(1) translateY(0); 
        opacity: 1;
        filter: blur(0);
    }
}

.glitch-flicker {
    animation: glitchFlicker 2.5s ease-out forwards;
}

@keyframes glitchFlicker {
    0% { 
        transform: scale(0.8); 
        opacity: 0;
        filter: hue-rotate(0deg);
    }
    20% { 
        transform: scale(1.1); 
        opacity: 1;
        filter: hue-rotate(90deg);
    }
    40% { 
        transform: scale(0.9) translateX(-10px); 
        filter: hue-rotate(180deg);
    }
    60% { 
        transform: scale(1.05) translateX(10px); 
        filter: hue-rotate(270deg);
    }
    80% { 
        transform: scale(0.95); 
        filter: hue-rotate(360deg);
    }
    100% { 
        transform: scale(1); 
        opacity: 1;
        filter: hue-rotate(0deg);
    }
}

.energy-pulse {
    animation: energyPulse 3s ease-out forwards;
}

@keyframes energyPulse {
    0% { 
        transform: scale(0.5); 
        opacity: 0;
    }
    30% { 
        transform: scale(1.3); 
        opacity: 1;
        text-shadow: 
            0 0 50px rgba(220, 20, 60, 1),
            0 0 100px rgba(220, 20, 60, 0.8),
            0 0 150px rgba(220, 20, 60, 0.6);
    }
    50% { 
        transform: scale(1.1); 
        text-shadow: 
            0 0 30px rgba(220, 20, 60, 0.8),
            0 0 60px rgba(220, 20, 60, 0.6),
            0 0 90px rgba(220, 20, 60, 0.4);
    }
    100% { 
        transform: scale(1); 
        opacity: 1;
    }
}

/* Particle Effects */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #DC143C;
    border-radius: 50%;
    animation: floatParticle 2s ease-out forwards;
}

@keyframes floatParticle {
    0% { 
        transform: translate(0, 0) scale(0); 
        opacity: 1;
    }
    100% { 
        transform: translate(var(--tx), var(--ty)) scale(1); 
        opacity: 0;
    }
}