/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Segoe UI,sans-serif;
}

/* ===========================
   INTRO SCREEN
=========================== */

#intro{

    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at center,
    #0f2447 0%,
    #071326 45%,
    #02060d 100%);

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    z-index:99999;

}

/* ===========================
   WEBSITE
=========================== */

#website{

    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    background:white;

}

#website h2{

    font-size:50px;
    margin-bottom:15px;

}

#website p{

    font-size:20px;
    color:#666;

}

/* ===========================
   CENTER
=========================== */

.center{

    position:relative;
    text-align:center;
    z-index:20;

}

/* ===========================
   OM
=========================== */

.om{

    font-size:90px;
    color:#ffd96b;

    opacity:0;

    animation:

    omAppear 2s forwards,
    omFloat 4s infinite ease-in-out;

}

@keyframes omAppear{

    from{

        opacity:0;
        transform:scale(.4);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes omFloat{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

}

/* ===========================
   IMAGE
=========================== */

.shivImage{

    width:280px;

    margin:20px 0;

    opacity:0;

    animation:

    imageAppear 2s forwards;

    animation-delay:1s;

    filter:

    drop-shadow(0 0 20px rgba(255,215,120,.5))
    drop-shadow(0 0 40px rgba(255,215,120,.4));

}

@keyframes imageAppear{

    from{

        opacity:0;

        transform:

        translateY(40px)
        scale(.8);

    }

    to{

        opacity:1;

        transform:

        translateY(0)
        scale(1);

    }

}

/* ===========================
   TITLE
=========================== */

.center h1{

    color:white;

    font-size:38px;

    margin-top:15px;

    opacity:0;

    animation:

    fadeText 2s forwards;

    animation-delay:2s;

}

.center p{

    color:#dddddd;

    font-size:18px;

    margin-top:10px;

    line-height:1.8;

    opacity:0;

    animation:

    fadeText 2s forwards;

    animation-delay:2.5s;

}

@keyframes fadeText{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ===========================
   SUN GLOW
=========================== */

.sunGlow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,220,120,.7),
    rgba(255,180,0,.18),
    transparent 70%);

    animation:

    glowPulse 4s infinite;

}

@keyframes glowPulse{

    0%{

        transform:scale(.9);
        opacity:.7;

    }

    50%{

        transform:scale(1.15);
        opacity:1;

    }

    100%{

        transform:scale(.9);
        opacity:.7;

    }

}

/* ===========================
   CLOUDS
=========================== */

.cloud{

    position:absolute;

    background:white;

    opacity:.12;

    filter:blur(18px);

    border-radius:100px;

}

.cloud1{

    width:350px;
    height:90px;

    top:90px;

    left:-250px;

    animation:

    cloudMove1 26s linear infinite;

}

.cloud2{

    width:260px;
    height:70px;

    top:220px;

    right:-220px;

    animation:

    cloudMove2 34s linear infinite;

}

.cloud3{

    width:320px;
    height:80px;

    bottom:130px;

    left:-260px;

    animation:

    cloudMove3 42s linear infinite;

}

@keyframes cloudMove1{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(1700px);

    }

}

@keyframes cloudMove2{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-1700px);

    }

}

@keyframes cloudMove3{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(1800px);

    }

}

/* ===========================
   STARS
=========================== */

.stars{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(white 1px, transparent 1px);

    background-size:40px 40px;

    opacity:.15;

    animation:

    starBlink 4s infinite;

}

@keyframes starBlink{

    0%,100%{

        opacity:.10;

    }

    50%{

        opacity:.22;

    }

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

.shivImage{

    width:210px;

}

.om{

    font-size:70px;

}

.center h1{

    font-size:28px;

}

.center p{

    font-size:16px;

}

#website h2{

    font-size:34px;

}

}



/* ===========================
   FLOWER PETALS
=========================== */

.petals{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:30;
}

.petal{

    position:absolute;

    top:-60px;

    user-select:none;

    animation-name:fall;

    animation-timing-function:linear;

    animation-fill-mode:forwards;

    filter:drop-shadow(0 0 6px rgba(255,255,255,.35));

}

@keyframes fall{

    0%{

        transform:
        translateY(-80px)
        translateX(0)
        rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:
        translateY(115vh)
        translateX(120px)
        rotate(540deg);

        opacity:0;

    }

}

/* ===========================
   FLOATING PARTICLES
=========================== */

.particles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.spark{

    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#ffe8a6;

    box-shadow:
    0 0 12px #ffe9aa;

    animation:
    sparkle linear forwards;

}

@keyframes sparkle{

    from{

        transform:
        translateY(0)
        scale(.4);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        transform:
        translateY(-180px)
        scale(1.5);

        opacity:0;

    }

}


/* ====================================
DIVINE LIGHT RAYS
==================================== */

.rays{

position:absolute;

left:50%;
top:48%;

transform:translate(-50%,-50%);

width:700px;
height:700px;

border-radius:50%;

background:

conic-gradient(

transparent 0deg,

rgba(255,235,150,.20) 20deg,

transparent 40deg,

rgba(255,235,150,.18) 70deg,

transparent 90deg,

rgba(255,235,150,.18) 120deg,

transparent 150deg,

rgba(255,235,150,.20) 180deg,

transparent 210deg,

rgba(255,235,150,.18) 240deg,

transparent 270deg,

rgba(255,235,150,.18) 300deg,

transparent 330deg,

rgba(255,235,150,.18) 360deg

);

filter:blur(12px);

opacity:.35;

animation:

rotateRays 45s linear infinite;

z-index:-1;

}

@keyframes rotateRays{

from{

transform:

translate(-50%,-50%)

rotate(0deg);

}

to{

transform:

translate(-50%,-50%)

rotate(360deg);

}

}

/* ====================================
TRISHUL
==================================== */

.trishul{

position:absolute;

left:50%;

top:42%;

transform:translateX(-50%);

font-size:55px;

opacity:.18;

color:#ffd86a;

animation:

trishulGlow 3s ease-in-out infinite;

pointer-events:none;

}

@keyframes trishulGlow{

0%,100%{

opacity:.18;

transform:

translateX(-50%)

scale(1);

}

50%{

opacity:.45;

transform:

translateX(-50%)

scale(1.08);

}

}

/* ====================================
DIYA
==================================== */

.diya{

position:absolute;

bottom:10px;

font-size:46px;

animation:

diyaFloat 2.5s ease-in-out infinite;

filter:

drop-shadow(0 0 15px orange)

drop-shadow(0 0 30px gold);

}

.diya-left{

left:-120px;

}

.diya-right{

right:-120px;

}

@keyframes diyaFloat{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

}

/* ====================================
FLAME
==================================== */

.diya::after{

content:"";

position:absolute;

left:50%;

top:-8px;

transform:translateX(-50%);

width:12px;

height:20px;

background:

radial-gradient(circle,

#fff7cc,

#ffbe00,

orange);

border-radius:50%;

filter:blur(1px);

animation:

flame 0.18s infinite alternate;

}

@keyframes flame{

from{

transform:

translateX(-50%)

scaleY(1);

}

to{

transform:

translateX(-50%)

scaleY(1.25)

rotate(-2deg);

}

}

/* ====================================
IMAGE FLOAT
==================================== */

.shivImage{

animation:

imageAppear 2s forwards,

divineFloat 6s ease-in-out infinite;

animation-delay:

1s,

3s;

}

@keyframes divineFloat{

0%,100%{

transform:

translateY(0px);

}

50%{

transform:

translateY(-12px);

}

}

/* ====================================
TEXT GLOW
==================================== */

.center h1{

text-shadow:

0 0 15px rgba(255,220,100,.6),

0 0 35px rgba(255,220,100,.3);

}

.center p{

text-shadow:

0 0 10px rgba(255,255,255,.35);

}