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

.netflix-number {
    font-family: 'Bebas Neue', cursive;
    font-size: 20rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 
        0.05em 0.05em 0.1em rgba(0, 0, 0, 0.5),
        0 0 0.5em rgba(229, 9, 20, 0.8),
        0 0 1em rgba(229, 9, 20, 0.6);
    position: relative;
    display: inline-block;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.netflix-number::before {
    content: attr(data-number);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    text-shadow: 
        0.1em 0.1em 0.2em rgba(0, 0, 0, 0.3),
        0 0 0.8em rgba(229, 9, 20, 0.9),
        0 0 1.5em rgba(229, 9, 20, 0.7);
    filter: blur(0.02em);
    z-index: -1;
    transform: translateZ(-0.05em);
}

.netflix-number::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(229, 9, 20, 0.2) 0%, transparent 70%);
    border-radius: 0.1em;
    z-index: -2;
}

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

@keyframes zoomIn {
    0% {
        transform: scale(0.8) translateZ(0);
        opacity: 0;
    }
    20% {
        transform: scale(1.1) translateZ(0.1em);
        opacity: 1;
    }
    40% {
        transform: scale(1) translateZ(0);
    }
    60% {
        text-shadow: 
            0.05em 0.05em 0.1em rgba(0, 0, 0, 0.5),
            0 0 0.8em rgba(229, 9, 20, 0.9),
            0 0 1.5em rgba(229, 9, 20, 0.7);
    }
    100% {
        transform: scale(1) translateZ(0);
        text-shadow: 
            0.05em 0.05em 0.1em rgba(0, 0, 0, 0.5),
            0 0 0.5em rgba(229, 9, 20, 0.8),
            0 0 1em rgba(229, 9, 20, 0.6);
    }
}

/* Bounce Animation */
.bounce-animation {
    animation: bounceIn 2s ease-out infinite;
}

@keyframes bounceIn {
    0% {
        transform: scale(0) translateZ(0);
        opacity: 0;
    }
    40% {
        transform: scale(1.2) translateZ(0.2em);
    }
    60% {
        transform: scale(0.9) translateZ(0.1em);
    }
    80% {
        transform: scale(1.1) translateZ(0.15em);
    }
    100% {
        transform: scale(1) translateZ(0);
        opacity: 1;
    }
}

/* Smoke Animation */
.smoke-animation {
    animation: smokeReveal 4s ease-out infinite;
}

@keyframes smokeReveal {
    0% {
        opacity: 0;
        filter: blur(2em);
        transform: scale(1.5) translateZ(0);
    }
    30% {
        opacity: 0.3;
        filter: blur(1em);
    }
    60% {
        opacity: 0.7;
        filter: blur(0.5em);
        transform: scale(1.1) translateZ(0.1em);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1) translateZ(0);
    }
}

/* Glitch Animation */
.glitch-animation {
    animation: glitchEffect 3s ease-in-out infinite;
}

@keyframes glitchEffect {
    0%, 100% {
        transform: translateZ(0);
        text-shadow: 
            0.05em 0.05em 0.1em rgba(0, 0, 0, 0.5),
            0 0 0.5em rgba(229, 9, 20, 0.8),
            0 0 1em rgba(229, 9, 20, 0.6);
    }
    5%, 15%, 25%, 35% {
        transform: translateX(0.02em) translateZ(0.01em);
        text-shadow: 
            0.06em 0.04em 0.1em rgba(0, 0, 0, 0.5),
            0.01em 0 0.6em rgba(229, 9, 20, 0.9),
            -0.01em 0 0.8em rgba(0, 255, 255, 0.6);
    }
    10%, 20%, 30% {
        transform: translateX(-0.02em) translateZ(-0.01em);
        text-shadow: 
            0.04em 0.06em 0.1em rgba(0, 0, 0, 0.5),
            -0.01em 0 0.6em rgba(229, 9, 20, 0.9),
            0.01em 0 0.8em rgba(255, 0, 255, 0.6);
    }
}

/* Pulse Animation */
.pulse-animation {
    animation: energyPulse 4s ease-in-out infinite;
}

@keyframes energyPulse {
    0%, 100% {
        transform: scale(1) translateZ(0);
        text-shadow: 
            0.05em 0.05em 0.1em rgba(0, 0, 0, 0.5),
            0 0 0.5em rgba(229, 9, 20, 0.8),
            0 0 1em rgba(229, 9, 20, 0.6);
    }
    50% {
        transform: scale(1.2) translateZ(0.3em);
        text-shadow: 
            0.1em 0.1em 0.2em rgba(0, 0, 0, 0.3),
            0 0 1.5em rgba(229, 9, 20, 1),
            0 0 3em rgba(229, 9, 20, 0.8),
            0 0 5em rgba(229, 9, 20, 0.6);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .netflix-number {
        font-size: 12rem;
    }
}

@media (max-width: 480px) {
    .netflix-number {
        font-size: 8rem;
    }
}