@import url('shell.css');

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(28px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slowZoom {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.06);
            }
        }

        .anim-fade-up {
            opacity: 0;
            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .anim-fade-in {
            opacity: 0;
            animation: fadeIn 1s ease-out forwards;
        }

        .anim-bg-zoom {
            animation: slowZoom 20s ease-in-out infinite alternate;
        }

        .delay-100 {
            animation-delay: 100ms;
        }

        .delay-200 {
            animation-delay: 200ms;
        }

        .delay-300 {
            animation-delay: 300ms;
        }

        .delay-500 {
            animation-delay: 500ms;
        }

        .delay-700 {
            animation-delay: 700ms;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .timeline-snap {
            scroll-snap-type: x mandatory;
        }

        .snap-start-item {
            scroll-snap-align: start;
        }

        .lcd-box {
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }