/* ─── PAGE STAGE ─── */
        .page-stage {
            background: #111d29;
            border-radius: 2.4rem;
         
            border: 1px solid #2d4053;
            box-shadow: inset 0 4px 12px rgba(0,0,0,0.4);
            min-height: 280px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 1.8rem;
            overflow: hidden;
        }

        /* ─── THE ANIMATED CONTENT BLOCK ─── */
        .page-content {
            /*background: #18232f;
            padding: 2rem 2.8rem;
            border-radius: 2rem;
            text-align: center;
            border: 1px solid #2f445a;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            /*max-width: 500px;*/
            
        }

            

           


        /* ─── ANIMATION CLASSES ─── */
        /* Apply any of these classes to .page-content to see the effect */

        .anim-fade {
            animation: fadeIn 0.7s ease forwards;
        }

        .anim-slide-up {
            animation: slideUp 0.7s ease forwards;
        }

        .anim-slide-down {
            animation: slideDown 0.7s ease forwards;
        }

        .anim-slide-left {
            animation: slideLeft 0.7s ease forwards;
        }

        .anim-slide-right {
            animation: slideRight 0.7s ease forwards;
        }

        .anim-zoom-in {
            animation: zoomIn 0.7s ease forwards;
        }

        .anim-zoom-out {
            animation: zoomOut 0.7s ease forwards;
        }

        .anim-rotate {
            animation: rotateIn 0.7s ease forwards;
        }

        .anim-flip-x {
            animation: flipX 0.7s ease forwards;
        }

        .anim-flip-y {
            animation: flipY 0.7s ease forwards;
        }

        .anim-bounce {
            animation: bounceIn 0.7s cubic-bezier(0.47, 1.6, 0.45, 0.9) forwards;
        }

        .anim-scale-up {
            animation: scaleUp 0.7s ease forwards;
        }

        .anim-scale-down {
            animation: scaleDown 0.7s ease forwards;
        }

        .anim-skew-left {
            animation: skewLeft 0.7s ease forwards;
        }

        .anim-skew-right {
            animation: skewRight 0.7s ease forwards;
        }

        .anim-perspective {
            animation: perspectiveIn 0.7s ease forwards;
        }

        .anim-blur {
            animation: blurIn 0.7s ease forwards;
        }

        .anim-glide {
            animation: glideUp 0.7s ease forwards;
        }

        .anim-fall {
            animation: fallIn 0.7s ease forwards;
        }

        .anim-pop {
            animation: popIn 0.7s ease forwards;
        }

        /* ─── KEYFRAMES (20 unique entrance animations) ─── */

        /* 1. Fade */
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        /* 2. Slide Up */
        @keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 3. Slide Down */
        @keyframes slideDown {
            0% {
                opacity: 0;
                transform: translateY(-50px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 4. Slide Left */
        @keyframes slideLeft {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 5. Slide Right */
        @keyframes slideRight {
            0% {
                opacity: 0;
                transform: translateX(-50px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 6. Zoom In */
        @keyframes zoomIn {
            0% {
                opacity: 0;
                transform: scale(0.6);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 7. Zoom Out */
        @keyframes zoomOut {
            0% {
                opacity: 0;
                transform: scale(1.4);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 8. Rotate */
        @keyframes rotateIn {
            0% {
                opacity: 0;
                transform: rotate(-20deg) scale(0.7);
            }

            100% {
                opacity: 1;
                transform: rotate(0) scale(1);
            }
        }

        /* 9. Flip X (3D) */
        @keyframes flipX {
            0% {
                opacity: 0;
                transform: perspective(500px) rotateX(90deg);
            }

            100% {
                opacity: 1;
                transform: perspective(500px) rotateX(0);
            }
        }

        /* 10. Flip Y (3D) */
        @keyframes flipY {
            0% {
                opacity: 0;
                transform: perspective(500px) rotateY(90deg);
            }

            100% {
                opacity: 1;
                transform: perspective(500px) rotateY(0);
            }
        }

        /* 11. Bounce */
        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.2);
            }

            60% {
                transform: scale(1.08);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 12. Scale Up */
        @keyframes scaleUp {
            0% {
                opacity: 0;
                transform: scale(0.4);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 13. Scale Down */
        @keyframes scaleDown {
            0% {
                opacity: 0;
                transform: scale(1.5);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 14. Skew Left */
        @keyframes skewLeft {
            0% {
                opacity: 0;
                transform: skewX(-25deg) translateX(-40px);
            }

            100% {
                opacity: 1;
                transform: skewX(0) translateX(0);
            }
        }

        /* 15. Skew Right */
        @keyframes skewRight {
            0% {
                opacity: 0;
                transform: skewX(25deg) translateX(40px);
            }

            100% {
                opacity: 1;
                transform: skewX(0) translateX(0);
            }
        }

        /* 16. Perspective (3D) */
        @keyframes perspectiveIn {
            0% {
                opacity: 0;
                transform: perspective(600px) rotateX(-30deg) translateY(40px);
            }

            100% {
                opacity: 1;
                transform: perspective(600px) rotateX(0) translateY(0);
            }
        }

        /* 17. Blur */
        @keyframes blurIn {
            0% {
                opacity: 0;
                filter: blur(15px);
                transform: scale(0.9);
            }

            100% {
                opacity: 1;
                filter: blur(0);
                transform: scale(1);
            }
        }

        /* 18. Glide */
        @keyframes glideUp {
            0% {
                opacity: 0;
                transform: translateY(70px) scale(0.85);
            }

            60% {
                transform: translateY(-10px) scale(1.02);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* 19. Fall */
        @keyframes fallIn {
            0% {
                opacity: 0;
                transform: translateY(-100px) rotate(-10deg);
            }

            70% {
                transform: translateY(6px) rotate(2deg);
            }

            100% {
                opacity: 1;
                transform: translateY(0) rotate(0);
            }
        }

        /* 20. Pop */
        @keyframes popIn {
            0% {
                opacity: 0;
                transform: scale(0.1) rotate(-12deg);
            }

            60% {
                transform: scale(1.1) rotate(3deg);
            }

            100% {
                opacity: 1;
                transform: scale(1) rotate(0);
            }
        }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 700px) {
            .app {
                padding: 1.2rem;
            }

            .page-stage {
                padding: 1.2rem;
                min-height: 200px;
            }

            .page-content {
                padding: 1.5rem 1.2rem;
            }

                .page-content h2 {
                    font-size: 1.3rem;
                }

                .page-content .icon-big {
                    width: 60px;
                    height: 60px;
                    font-size: 2.6rem;
                }
        }

        @media (max-width: 480px) {
            .app-header h1 {
                font-size: 1.3rem;
            }

            .app-header .class-name {
                font-size: 0.7rem;
                padding: 0.2rem 1.2rem;
            }

            .page-content .icon-big {
                width: 50px;
                height: 50px;
                font-size: 2rem;
            }

            .page-content h2 {
                font-size: 1.1rem;
            }

            .page-content .desc {
                font-size: 0.85rem;
            }
        }