/* ==========================================================
   ROTARACT LOGO ANIMATION
   ========================================================== */

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

html,body{
    width:100%;
    height:100%;
}

/* ==========================================================
   BACKGROUND
   ========================================================== */

body{

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

    overflow:hidden;

    background:
    radial-gradient(circle at center,#10234b 0%,#040913 55%,#000000 100%);

    font-family:Arial, Helvetica, sans-serif;

}

/* ==========================================================
   STAR FIELD
   ========================================================== */

body::before{

    content:"";

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-image:

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

    background-size:

        120px 120px,
        180px 180px;

    background-position:

        0 0,
        60px 60px;

    opacity:.35;

    animation:backgroundTwinkle 8s ease-in-out infinite;

    z-index:-5;

}

/* ==========================================================
   MOVING NEBULA
   ========================================================== */

body::after{

    content:"";

    position:fixed;

    left:-50%;
    top:-50%;

    width:200%;
    height:200%;

    background:

    radial-gradient(circle,
    rgba(0,180,255,.12),
    transparent 35%),

    radial-gradient(circle,
    rgba(255,255,255,.08),
    transparent 45%),

    radial-gradient(circle,
    rgba(0,100,255,.08),
    transparent 40%);

    animation:nebula 40s linear infinite;

    z-index:-6;

}

/* ==========================================================
   LOGO WRAPPER
   ========================================================== */

.logo-wrapper{

    position:relative;

    z-index:1;

    width:clamp(320px, 40vw, 780px);
    max-width:90vw;

    animation:

    intro 2s ease,
    float 5s ease-in-out infinite;

}

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

#logo{

    width:100%;
    height:auto;
    aspect-ratio: 1200 / 1243;
    object-fit: contain;
    display:block;

    border-radius:50%;

    filter:

    drop-shadow(0 0 10px rgba(255,255,255,.2))
    drop-shadow(0 0 30px rgba(255,215,0,.5));

    animation:

    glow 4s ease-in-out infinite;

}

/* ==========================================================
   HALO
   ========================================================== */

.logo-wrapper::before{

    content:"";

    position:absolute;

    top:-30px;
    left:-30px;
    right:-30px;
    bottom:-30px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,215,0,.35),

    transparent 70%);

    animation:

    halo 4s ease-in-out infinite;

    z-index:-1;

}

/* ==========================================================
   SHINE EFFECT
   ========================================================== */

.logo-wrapper::after{

    content:"";

    position:absolute;

    z-index:-1;

    top:-75%;

    left:-180%;

    width:60%;

    height:300%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.95),

        transparent

    );

    animation:

    shine 5s linear infinite;

}

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

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

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

@keyframes intro{

    from{

        opacity:0;

        transform:

        scale(.45)

        rotate(-20deg);

    }

    to{

        opacity:1;

        transform:

        scale(1)

        rotate(0);

    }

}

/* ==========================================================
   LOGO GLOW
   ========================================================== */

@keyframes glow{

    0%,100%{

        filter:

        drop-shadow(0 0 15px rgba(255,255,255,.3))

        drop-shadow(0 0 20px gold);

    }

    50%{

        filter:

        drop-shadow(0 0 35px white)

        drop-shadow(0 0 65px gold);

    }

}

/* ==========================================================
   HALO
   ========================================================== */

@keyframes halo{

    0%,100%{

        transform:scale(.92);

        opacity:.35;

    }

    50%{

        transform:scale(1.08);

        opacity:.75;

    }

}

/* ==========================================================
   SHINE
   ========================================================== */

@keyframes shine{

    from{

        left:-180%;

    }

    to{

        left:200%;

    }

}

/* ==========================================================
   BACKGROUND TWINKLE
   ========================================================== */

@keyframes backgroundTwinkle{

    0%,100%{

        opacity:.25;

    }

    50%{

        opacity:.5;

    }

}

/* ==========================================================
   NEBULA ROTATION
   ========================================================== */

@keyframes nebula{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   STARS CREATED BY JAVASCRIPT
   ========================================================== */

@keyframes twinkle{

    0%,100%{

        opacity:.2;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(2);

    }

}

/* ==========================================================
   MONSOON RAIN
   ========================================================== */

@keyframes rainFall{

    0%{

        transform:translate(0,-120px) rotate(var(--tilt,12deg));

        opacity:0;

    }

    8%{

        opacity:.85;

    }

    50%{

        transform:translate(calc(var(--sway,10px) * -1),55vh) rotate(var(--tilt,12deg));

    }

    92%{

        opacity:.7;

    }

    100%{

        transform:translate(var(--sway,10px),110vh) rotate(var(--tilt,12deg));

        opacity:0;

    }

}

/* ==========================================================
   LIGHTNING FLASH
   ========================================================== */

.lightning{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(210,225,255,.55);

    opacity:0;

    pointer-events:none;

    z-index:-3;
}

.lightning.flash{

    animation:lightningFlash .9s ease-out;

}

@keyframes lightningFlash{

    0%{opacity:0;}

    6%{opacity:.65;}

    12%{opacity:.05;}

    18%{opacity:.5;}

    30%{opacity:0;}

    100%{opacity:0;}

}

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

@media (max-width:700px){

.logo-wrapper{

    width:90vw;

}

}