@keyframes glow { from { filter: drop-shadow(0 0 5px rgba(255, 46, 46, 0.5)); } to { filter: drop-shadow(0 0 20px rgba(255, 46, 46, 0.9)); } } @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } @keyframes zoomIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .number-container { perspective: 1000px; } .netflix-number { position: relative; font-family: 'Netflix Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; text-align: center; color: white; background: linear-gradient(145deg, #1a1a1a, #0a0a0a); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 -5px 10px rgba(255, 46, 46, 0.3), inset 0 5px 10px rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .netflix-number:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 -5px 10px rgba(255, 46, 46, 0.5), inset 0 5px 10px rgba(255, 255, 255, 0.2); } .netflix-number::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 46, 46, 0.3) 0%, rgba(255, 46, 46, 0) 50%, rgba(255, 46, 46, 0.3) 100%); border-radius: 8px; z-index: -1; } .netflix-number::after { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 6px; background: linear-gradient(145deg, #0a0a0a, #1a1a1a); z-index: -2; }