/* ==========================================================
   Ganesh Festival Launch Screen
========================================================== */

:root{
    --maroon:#680018;
    --maroon-dark:#39000d;
    --gold:#d4af37;
    --gold-light:#f7e18b;
    --ivory:#fff9ec;
}


#launch-overlay{
    position:fixed;
    inset:0;
    z-index:9999999;
    overflow:hidden;
    background:radial-gradient(circle,#7a001d 0%,#530013 60%,#220007 100%);
    font-family:Georgia,serif;
}

/* Background */

.launch-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center,
        rgba(255,215,0,.08),
        transparent 65%);
}

/* Light Rays */

.launch-light{
    position:absolute;
    inset:-30%;
    background:
        conic-gradient(
            transparent 0deg,
            rgba(255,215,0,.12) 20deg,
            transparent 40deg,
            rgba(255,255,255,.05) 60deg,
            transparent 90deg
        );
    animation:rotateLight 35s linear infinite;
    opacity:.5;
}

/* Golden Border */

.launch-border{
    position:absolute;
    inset:18px;
    border:3px solid rgba(212,175,55,.8);
    border-radius:10px;
    box-shadow:
        inset 0 0 20px rgba(212,175,55,.25),
        0 0 25px rgba(212,175,55,.35);
}

/* Garland */

.launch-garland{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:95px;
    background:
    repeating-radial-gradient(circle,
        #ff9800 0 9px,
        #ffd54f 10px 18px,
        transparent 19px 26px);
    background-size:70px 70px;
    opacity:.9;
}


/* Curtains */

.launch-curtain{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    z-index:30;
    transition:transform 2.3s cubic-bezier(.77,0,.18,1);

    background:
        repeating-linear-gradient(
            90deg,
            #8c001f 0,
            #6d0017 30px,
            #a1122c 60px,
            #6d0017 90px
        );

    box-shadow:
        inset 0 0 80px rgba(0,0,0,.45);
}

.launch-curtain.left{
    left:0;
    border-right:2px solid var(--gold);
}

.launch-curtain.right{
    right:0;
    border-left:2px solid var(--gold);
}

#launch-overlay.open .launch-curtain.left{
    transform:translateX(-100%);
}

#launch-overlay.open .launch-curtain.right{
    transform:translateX(100%);
}

/* Main Layout */

.launch-content{
    position:absolute;
    inset:0;
    z-index:100;

    display:grid;
    grid-template-columns:1fr 520px 1fr;

    align-items:center;

    gap:40px;

    padding:80px;
}

/* ==========================================================
   Typography
========================================================== */

.launch-column{
    color:#fff;
    z-index:120;
}

.launch-column.marathi{
    text-align:right;
    font-family:"Noto Serif Devanagari",serif;
}

.launch-column.english{
    text-align:left;
    font-family:"Cinzel",serif;
}

.launch-small{
    color:var(--gold-light);
    font-size:18px;
    letter-spacing:2px;
    margin-bottom:15px;
    text-transform:uppercase;
}

.launch-column h1{
    color:var(--gold);
    font-size:54px;
    line-height:1.2;
    margin:0 0 18px;
    text-shadow:0 0 18px rgba(212,175,55,.35);
}

.launch-column h3{
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
}

.launch-column p{
    color:#f5f5f5;
    font-size:20px;
    line-height:1.9;
}
/* ==========================================================
   Center Logo
========================================================== */

.launch-center{
    text-align:center;
    z-index:150;
}



.launch-logo{

    width:100%;
    height:auto;
    display:block;

    filter:drop-shadow(0 0 20px rgba(255,215,0,.55));

}

/* ==========================================================
   Button
========================================================== */

#launch-open{

    margin-top:350px;

    padding:18px 45px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    background:linear-gradient(#f8e48a,#d4af37);

    color:#432600;

    font-size:22px;

    font-weight:bold;

    transition:.35s;

}

#launch-open span{

    display:block;

    font-size:14px;

    letter-spacing:2px;

    margin-top:4px;

}

#launch-open:hover{

    transform:translateY(-4px);

    box-shadow:
        0 10px 30px rgba(212,175,55,.45);

}

/* ==========================================================
   CSS Diyas
========================================================== */

.launch-diya{

    position:absolute;

    bottom:25px;

    width:90px;

    height:90px;

    z-index:130;

}

.launch-diya.left{
    position: absolute;
    left: 30px;
    bottom: 25px;
    z-index: 150;
}

.launch-diya.right{
   position: absolute;
    right: 30px;
    bottom: 25px;
    z-index: 150;
}

.launch-diya img{
    width: 90px;
    height: auto;
    display: block;
}


/* ==========================================================
   Petals
========================================================== */

#launch-petals{

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:110;

}

.launch-petal{

    position:absolute;

    top:-50px;

    width:14px;
    height:22px;

    background:#ff9800;

    border-radius:60% 40%;

    opacity:.85;

    animation:petalFall linear infinite;

}

/* ==========================================================
   Sparkles
========================================================== */

#launch-sparkles{

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:105;

}

.launch-star{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#ffd700;

    box-shadow:
        0 0 8px gold,
        0 0 16px #fff;

    animation:sparkle 2s infinite;

}

/* ==========================================================
   Animations
========================================================== */

@keyframes rotateLight{

    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}

}

@keyframes flame{

    from{
        transform:scale(1);
        opacity:.8;
    }

    to{
        transform:scale(1.3);
        opacity:1;
    }

}

@keyframes sparkle{

    0%{
        opacity:0;
        transform:scale(.3);
    }

    50%{
        opacity:1;
        transform:scale(1.6);
    }

    100%{
        opacity:0;
        transform:scale(.3);
    }

}

@keyframes petalFall{

    from{
        transform:translateY(-50px) rotate(0deg);
    }

    to{
        transform:translateY(110vh) translateX(120px) rotate(720deg);
    }

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:991px){

.launch-content{

    grid-template-columns:1fr;

    padding:30px;

    text-align:center;

}

.launch-column.marathi,
.launch-column.english{

    text-align:center;

}

.launch-column h1{

    font-size:34px;

}

.launch-column h3{

    font-size:22px;

}

.launch-column p{

    font-size:17px;

}

.launch-logo-box{

    width:95%;

}

.launch-diya{

    display:none;

}

}