/* =========================================
           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: none;
        }



        /* =========================================
           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;
            }

        }