/* =========================================

           WEBSITE

        ========================================= */



        .website {

            width: 100%;

            height: 100vh;



            display: flex;

            justify-content: center;

            align-items: center;



            background:

                radial-gradient(

                    circle at center,

                    #243b80,

                    #080d20

                );



            color: white;

            text-align: center;

        }





        .website h1 {

            font-size: clamp(45px, 7vw, 100px);

            letter-spacing: 8px;

        }





        .website p {

            margin-top: 15px;

            font-size: 20px;

            opacity: .8;

        }







        /* =========================================

           CURTAIN SCREEN

        ========================================= */



        .curtain-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999;
    overflow: hidden;
    background: #00000000;

    pointer-events: auto;   /* IMPORTANT */
    cursor: pointer;
}

/* Curtain open hone ke baad website par click allow */
.curtain-screen.open {
    pointer-events: none;
    cursor: default;
}

.celebrating {
    background: #0066b3;
}
.celebrating marquee {
    color: #fff;
    padding: 5px 0px 0px;
    font-weight: 700;
    font-size: 18px;
}






        /* =========================================

           CURTAIN IMAGE

        ========================================= */



        .curtain {



            position: absolute;



            top: 0;



            width: 100%;

            height: 100%;



            /*

             * Original curtain image

             */

            background-image: url("../images/curtain.png");



            background-repeat: no-repeat;



            /*

             * Image ko screen ke according fit karega

             */

            background-size: cover;



            background-position: center;



            transition:

                transform 3.5s

                cubic-bezier(.77, 0, .18, 1);



            will-change: transform;

        }







        /* =========================================

           LEFT CURTAIN

        ========================================= */



        .curtain-left {



            left: 0;



            /*

             * Sirf left half visible

             */

            clip-path: inset(

                0 50% 0 0

            );



            transform-origin: left center;

        }







        /* =========================================

           RIGHT CURTAIN

        ========================================= */



        .curtain-right {



            right: 0;



            /*

             * Sirf right half visible

             */

            clip-path: inset(

                0 0 0 50%

            );



            transform-origin: right center;

        }







        /* =========================================

           CENTER SEAM

        ========================================= */



        .center-shadow {



            position: absolute;



            top: 0;

            left: 50%;



            transform:

                translateX(-50%);



            width: 20px;

            height: 100%;



            background:

                linear-gradient(

                    90deg,

                    transparent,

                    rgba(0,0,0,.75),

                    transparent

                );



            z-index: 5;



            transition:

                opacity .8s ease;

        }







        /* =========================================

           LOGO

        ========================================= */



        .launch-logo {



            position: absolute;



            top: 50%;

            left: 50%;



            transform:

                translate(-50%, -50%);



            z-index: 20;



                width: 200px;

    height: auto;



            display: flex;

            align-items: center;

            justify-content: center;



            transition:



                opacity 1s ease,



                transform 1s ease;

                background: #fff;

                    padding: 10px;

    border-radius: 10px;



    filter:

                drop-shadow(

                    0 8px 20px

                    rgba(0,0,0,.8)

                );



        }





        .launch-logo img {



            width: 100%;

            height: 100%;



            object-fit: contain;



            

        }







        /* =========================================

           LOGO LIGHT

        ========================================= */



        .logo-light {



            position: absolute;



            width: 300px;

            height: 300px;



            border-radius: 50%;



            background:

                radial-gradient(

                    circle,

                    rgba(255,255,255,.18),

                    transparent 65%

                );



            filter: blur(15px);



            z-index: -1;

        }







        /* =========================================

           WELCOME TEXT

        ========================================= */



        .launch-text {



            position: absolute;



            left: 50%;



            top: calc(40% + 130px);



            transform:

                translateX(-50%);



            z-index: 20;



            color: white;



            text-align: center;



            transition:

                opacity .8s ease;

        }





        .launch-text h2 {



            font-size: 24px;



            letter-spacing: 6px;



            text-transform: uppercase;



            text-shadow:

                0 3px 12px

                rgba(0,0,0,.9);

        }





        .launch-text p {



            margin-top: 10px;



            font-size: 13px;



            letter-spacing: 3px;



            opacity: .8;

        }







        /* =========================================

           OPEN CURTAIN

        ========================================= */



        .curtain-screen.open .curtain-left {



            /*

             * LEFT → LEFT

             */

            transform:

                translateX(-100%);

        }





        .curtain-screen.open .curtain-right {



            /*

             * RIGHT → RIGHT

             */

            transform:

                translateX(100%);

        }





        /* =========================================

           LOGO FADE

        ========================================= */



        .curtain-screen.open .launch-logo {



            opacity: 0;



            transform:

                translate(-50%, -50%)

                scale(.7);

        }





        .curtain-screen.open .launch-text {



            opacity: 0;

        }





        .curtain-screen.open .center-shadow {



            opacity: 0;

        }







        /* =========================================

           MOBILE

        ========================================= */



        @media(max-width: 768px) {



            .launch-logo {



                width: 120px;

                height: 120px;

            }





            .launch-text {



                top: calc(50% + 90px);

            }





            .launch-text h2 {



                font-size: 16px;



                letter-spacing: 4px;

            }



        }